当前位置:主页 > 网页特效 > 播放器代码 >

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

发布时间:2018/08/01 来源:互联网 浏览: 关键词:HTML5 UI 视频播放器 播放器代码 
简洁的HTML5视频播放器UI特效 简洁的HTML5视频播放器UI特效
阿里云

简要教程

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

HTML5视频播放器UI

使用方法

在页面中引入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>

HTML结构

该HTML5视频播放器的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 -->

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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top