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

Posted 2021-03-29 蚂蚁开源社区

近期在做一个项目时，遇到了播放视频的问题，找了很多插件和方法，今天介绍的这个是比较认为简洁和功能强大的开源库，可以任意修改播放格式。

简要介绍

这是一款简洁的html5视频播放器UI特效。该HTML5视频播放器UI采用响应式设计，通过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><!-- 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 -->

作者 | 思齐大神 | 蚂蚁开源社区大神，资深开发工程师

觉得文章不错，点下在看

点击阅读原文，下载DEMO源码

↓↓↓↓