在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

简洁的HTML5视频播放器UI特效

分类:插件代码 更新时间:2018-04-27 浏览次数:496

代码简介

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

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE9+

使用方法

1. 引入文件:

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

<scriptsrc="path/to/modernizr.min.js"></script>
<linkrel="stylesheet"href="path/to/font-awesome.min.css">
<linkrel="stylesheet"href="path/to/style.css">
<scriptsrc="path/to/jquery.min.js"></script>
<scriptsrc="path/to/jqueryui.min.js"></script>

<scriptsrc="path/to/vedio.js"></script>


2. html:

<divclass="wrapper">
  <divclass="js-video">
        <videoclass="js-media"poster="vedio/sintel.jpg">
            <sourcesrc="vedio/sintel.mp4"type="video/mp4"/>
            <p>你的浏览器不支持 HTML5 Video。</p>
        </video>
        <idata-playPauseclass="playPause fa fa-play ui-icon"><span></span></i>
        <divclass="ui">
          <div>
            <divdata-progressclass="progress">
              <divdata-bufferclass="progress-buffer"></div>
              <divdata-timeclass="progress-time"></div>
            </div><!-- progress -->
          </div>
          <div>
            <spanclass="timeDisplay"><idata-currentTime>0:00</i> / <idata-duration>0:00</i></span>
          </div>
          <div>
            <idata-muteclass="fa fa-volume-up ui-icon"></i>
          </div>
          <div>
            <divdata-volume="100"class="volumeControl"><spanclass="ui-slider-handle"></span></div>
          </div>
        </div><!-- ui -->
        <idata-fullscreenclass="fullscreen iconicfill-fullscreen"title="fullscreen"></i>
  </div><!-- js-video -->
</div><!-- wrapper -->


问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!