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

javascript中的自定义全屏HTML5视频播放器 - video-player
栏目分类:其它   发布日期:2021-09-01   浏览次数:

具有自定义控件的全屏 HTML5 视频播放器,如播放、暂停、前进、后退、全屏切换等。

使用:

1. 在页面中嵌入 HTML5 视频播放器以及视频控件和说明。

《div class="player">
  《div class="player-overlay" data-fullscreen="false">
    《div class="container">
      《div class="information-container">
        <h1 class="title">视频播放器</h1>
        <p class="description">具有自定义控件的全屏 HTML5 视频播放器,如播放、暂停、前进、后退、全屏切换等。</p>
      《/div>
      《div class="player-container">
        《div class="video-progress"><div class="video-progress-filled"></div> </div>
        《div class="player-controls">
          《div class="player-buttons">
            <button aria-label="play" class="button play" title="play" type="button" ></button>
            <button aria-label="pause" class="button pause" hidden title="pause" type="button" ></button>
            <button aria-label="backward" class="button backward" title="backward" type="button" ></button>
            <button aria-label="forward" class="button forward" title="forward" type="button" ></button>
            <button aria-label="volume" class="button volume" title="volume" type="button" ></button>
            <button aria-label="silence" class="button silence" hidden title="silence" type="button" ></button>
            <div class="volume-progress"><div class="volume-progress-filled"></div></div>
            <div class="time-container">
              <p class="current-time">0:00</p>
              <p class="time-separator">/</p>
              <p class="duration-video">0:00</p>
            </div>
          《/div>
          《div class="expand-container">
            《button aria-label="expand" class="button expand" title="expand" type="button" ></button>
            《button aria-label="reduce" class="button reduce" hidden title="reduce" type="button" ></button>
          《/div>
        《/div>
      《/div>
    《/div>
  《/div>
  《videoclass="video" poster="./poster.png" src="./rain.mp4" ></video>
《/div>

2. 在页面上加载必要的样式表和 JavaScript。就是这样。

<link rel="stylesheet" href="./styles/style.css" />
<script src="./js/index.js"></script>

官方网站:https://github.com/oscarbebop/video-player

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