当前位置：首页 > 网页特效 > 音频和视频

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

分类：音频和视频日期：2024-05-14 点击(2) 评论(0)

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

简介

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

```html
<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结构如下：

```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>
          </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>
        <i data-fullscreen class="fullscreen iconicfill-fullscreen" title="fullscreen"></i>
  </div>
</div>
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果