当前位置:主页 > JavsScript库 > 其它 >

Bootstrap 5自定义HTML5视频播放器 - bootstrap-videoplayer
栏目分类:其它   发布日期:2021-08-19   浏览次数:

自定义 HTML5 视频播放器,易于使用 Bootstrap 5 CSS 实用程序类进行自定义和设置样式。

使用:

1.在文档中加载需要的Bootstrap 5框架和Bootstrap Icons。

<link href="/path/to/cdn/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. 在文档中加载 Bootstrap 5 视频播放器的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="dist/css/videoplayer.min.css" />
<script src="dist/js/videoplayer.min.js"></script>

3. 将 HTML5 视频嵌入到文档中,并将其与自定义视频控件一起包装到具有“videoplayer”的 CSS 类的容器元素中。

<div class="videoplayer" id="myPlayer">
  <div class="ratio ratio-21x9 bg-dark">
    <video class="video" src="TearsOfSteel.mp4#t=9"></video>
  </div>
  <div class="controls controls-dark">
    <button class="btn btn-lg btn-video-playpause" data-bs-toggle="tooltip" title="Play Video" type="button"><i class="bi bi-play-fill"></i><i class="bi bi-pause-fill d-none"></i></button>
    <div class="px-1 w-100">
      <div class="progress w-100">
        <div class="progress-bar"></div>
      </div>
    </div>
    <button class="btn btn-lg btn-video-pip" title="Play picture in picture"><i class="bi bi-pip"></i></button><button class="btn btn-lg btn-video-fullscreen" title="Full Screen"><i class="bi bi-arrows-fullscreen"></i></button>
    <div class="dropup">
      <button class="btn btn-lg btn-video-volume" data-bs-toggle="dropdown" title="Volume"><i class="bi bi-volume-mute-fill"></i></button>
      <div class="dropdown-menu dropdown-menu-end dropup-volume dropdown-menu-dark">
        <input class="form-range form-range-volume" type="range">
      </div>
    </div>
    <div class="dropup">
      <button class="btn btn-lg" data-bs-toggle="dropdown" title="More..."><i class="bi bi-three-dots-vertical"></i></button>
      <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
        <a class="dropdown-item" href="#"><i class="bi bi-info-circle-fill"></i> 关于</a>
      </div>
    </div>
  </div>
  <div class="overlay">
    <div class="title">
      视频标题
    </div>
  </div>
</div>

4. 初始化自定义 HTML5 视频并完成。

document.addEventListener('DOMContentLoaded', () => {
  var myPlayer = new BootstrapVideoplayer('myPlayer',{
      selectors:{
        video: '.video'
      }
  })
})

5. 通过覆盖以下 CSS 类来自定义视频控件。

document.addEventListener('DOMContentLoaded', () => {
  var myPlayer = new BootstrapVideoplayer('myPlayer',{
      selectors:{
        video: '.video',
        playPauseButton: '.btn-video-playpause',
        playIcon: '.bi-play-fill',
        pauseIcon: '.bi-pause-fill',
        progress: '.progress',
        progressbar: '.progress-bar',
        pipButton: '.btn-video-pip',
        fullscreenButton: '.btn-video-fullscreen',
        volumeRange: '.form-range-volume'
      }
  })
})

6. 要在鼠标移开时自动隐藏视频控件,只需将 CSS 类“自动隐藏”添加到控件容器即可。

<div class="controls controls-dark auto-hide">
  ...
</div>


官方网站:https://github.com/koehlersimon/bootstrap-videoplayer

相关热词: HTML5视频播放器

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库