简洁的HTML5视频播放器UI特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款简洁的HTML5视频播放器UI特效。该HTML5视频播放器UI采用响应式设计，通过CSS代码来构建视频播放器的界面，整体效果时尚简洁。

HTML5视频播放器UI

使用方法

在页面中引入modernizr.min.js，font-awesome字体文件和style.css样式文件，以及jquery和jqueryui和vedio.js文件。

<script src="path/to/modernizr.min.js"></script>
<link rel="stylesheet" href="path/to/font-awesome.min.css">
<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jqueryui.min.js"></script>
<script src="path/to/vedio.js"></script>

HTML结构

该HTML5视频播放器的HTML结构如下：

<div class="wrapper">
  <div class="js-video">
        <video class="js-media" poster="vedio/sintel.jpg">
            <source src="vedio/sintel.mp4" type="video/mp4" />
            <p>你的浏览器不支持 HTML5 Video。</p>
        </video>
        <i data-playPause class="playPause fa fa-play ui-icon"><span></span></i>
        <div class="ui">
          <div>
            <div data-progress class="progress">
              <div data-buffer class="progress-buffer"></div>
              <div data-time class="progress-time"></div>
            </div><!-- progress -->
          </div>
          <div>
            <span class="timeDisplay"><i data-currentTime>0:00</i> / <i data-duration>0:00</i></span>
          </div>
          <div>
            <i data-mute class="fa fa-volume-up ui-icon"></i>
          </div>
          <div>
            <div data-volume="100" class="volumeControl"><span class="ui-slider-handle"></span></div>
          </div>
        </div><!-- ui -->
        <i data-fullscreen class="fullscreen iconicfill-fullscreen" title="fullscreen"></i>
  </div><!-- js-video -->
</div><!-- wrapper -->

该HTML5视频播放器的codepen地址为：https://codepen.io/dodozhang21/pen/ByQaQb