最近做项目的时候，遇到了播放视频的问题。 我发现了很多插件和方法。 今天介绍的是一个比较简单、功能强大的开源库html5 视频 播放器，而且播放格式可以任意改变。
简单的介绍
这是一个简单的 HTML5 视频播放器 UI 效果。 HTML5视频播放器的UI采用响应式设计html5 视频 播放器，通过CSS代码建立视频播放器的界面，整体效果时尚简洁。
如何使用
页面中引入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>
CSS结构
/* @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); */@import url(http://weloveiconfonts.com/api/?family=iconicfill);[class*="iconicfill-"]:before {font-family: 'IconicFill', sans-serif;}/********************** Background*********************/html {background: #F4D17E;background-size: cover;height: 100%;}body {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight: 300;line-height: 1.4;height: 100%;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;margin: 0;padding: 0;}/********************** Wrapper*********************/.js-video {position: relative;max-width: 600px;margin: 0 auto;padding: 10px;background: rgba(0, 0, 0, 0.2);border-radius: 8px;}/********************** Elements inside js-video*********************/video {max-width: 100%;max-height: 70vh;background-size: cover;background-position: center center;}.js-video button {-moz-appearance: none;-webkit-appearance: none;}/********************** UI*********************/.playPause.ui-icon {position: absolute;top: 10px;left: 10px;right: 0;display: block;width: auto;bottom: 56px;}.playPause.ui-icon:before, .playPause.ui-icon:after {position: absolute;top: 50%;left: 50%;}.playPause.ui-icon:after {content: '';width: 80px;height: 80px;margin: -40px 0 0 -40px;background: rgba(0, 0, 0, 0.8);border-radius: 10px;}.playPause.ui-icon:before {font-size: 40px;line-height: 80px;color: rgba(244, 209, 126, 0.5);z-index: 2;top: 50%;left: 50%;margin: -40px 0 0 -14px;}.playPause.ui-icon.fa-pause:before, .playPause.ui-icon.fa-undo:before {margin-left: -17px;}.playPause.ui-icon.fa-pause {opacity: 0;}.ui {padding: 10px 1vw;font-size: 0;display: -webkit-flex;display: flex;}.ui > div:nth-of-type(1), .ui > div:nth-of-type(4) {padding-top: 8px;}.ui > div:nth-of-type(1) {-webkit-flex: 30 30 1px;flex: 30 30 1px;margin-right: 10px;}.ui > div:nth-of-type(2) {-webkit-flex: 1 0 60px;flex: 1 0 60px;font-size: 12px;margin-right: 10px;text-align: center;line-height: 20px;}.ui > div:nth-of-type(3) {-webkit-flex: 0 0 20px;flex: 0 0 20px;margin-right: 10px;}.ui > div:nth-of-type(4) {-webkit-flex: 0 0 60px;flex: 0 0 60px;}.timeDisplay {white-space: nowrap;}.timeDisplay i {font-style: normal;}.fullscreen {position: absolute;font-style: normal;left: 20px;bottom: 66px;display: block;width: 40px;height: 40px;text-align: center;cursor: pointer;-moz-transition: color 0.3s;-o-transition: color 0.3s;-webkit-transition: color 0.3s;transition: color 0.3s;}.fullscreen:before {font-size: 30px;line-height: 40px;color: rgba(244, 209, 126, 0.2);}.fullscreen:hover:before {color: rgba(244, 209, 126, 0.5);}.ui-icon {font-size: 20px;vertical-align: middle;width: 20px;margin-right: 10px;cursor: pointer;}/********************** Progress*********************/.progress, .volumeControl {background: rgba(0, 0, 0, 0.1);width: 100%;position: relative;height: 5px;cursor: pointer;overflow: hidden;border-radius: 2px;border: 0;}.progress > * {position: absolute;top: 0;left: 0;height: 100%;}.progress-time {background-color: black;}.anim {-moz-transition: width 1000ms linear;-o-transition: width 1000ms linear;-webkit-transition: width 1000ms linear;transition: width 1000ms linear;}.progress-buffer {background-color: rgba(0, 0, 0, 0.3);-moz-transition: width 250ms linear;-o-transition: width 250ms linear;-webkit-transition: width 250ms linear;transition: width 250ms linear;}.volumeControl {width: 90%;overflow: visible;position: relative;background: rgba(0, 0, 0, 0.3);}.volumeControl .ui-slider-handle {position: absolute;width: 9px;height: 9px;border: 0;top: -2px;background: transparent;}.volumeControl .ui-slider-handle:after {content: '';position: absolute;width: 100%;height: 100%;left: -50%;background: black;border-radius: 4px;}.volumeControl .ui-slider-handle:focus {outline: none;}
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></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>
作者 | 思齐大师| 蚂蚁开源社区大师、高级开发工程师
我觉得文章不错，点击阅读
发表评论