<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简洁的HTML5视频播放器UI特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<script src="js/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>简洁的HTML5视频播放器UI特效 <span>A responsive HTML 5 video skin</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/html5/yinpinheshipin/201804125070.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<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 -->
<div class="related">
<h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
<a href="http://www.htmleaf.com/html5/yinpinheshipin/201505261910.html">
<img src="related/1.jpg" width="300" alt="基于JSON数据HTML5视频播放器js插件"/>
<h3>基于JSON数据HTML5视频播放器js插件</h3>
</a>
<a href="http://www.htmleaf.com/html5/yinpinheshipin/201711144827.html">
<img src="related/2.jpg" width="300" alt="jQuery视频播放器代码"/>
<h3>jQuery视频播放器代码</h3>
</a>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="js/vedio.js"></script>
</body>
</html>
简洁的HTML5视频播放器UI特效
需积分: 44 93 浏览量
2019-12-12
20:13:01
上传
评论
收藏 3.35MB ZIP 举报
201804121528.zip （18个子文件） 
css 
htmleaf-demo.css 6KB normalize.css 2KB style.css 4KB jQuery之家.url 268B scss style.scss 4KB
readme.html 865B fonts icomoon.woff 1KB icomoon.eot 2KB
icomoon.svg 2KB icomoon.ttf 1KB related 
2.jpg 38KB 1.jpg 28KB js modernizr.min.js 11KB jquery-1.11.0.min.js 94KB vedio.js 7KB index.html 3KB vedio sintel.jpg 96KB
sintel.mp4 3.16MB资源评论
