html5好看的特效皮肤,Video.js 一款漂亮的HTML视频播放器皮肤
HTML
导入代码模板：
@charset "UTF-8";
html,
body {
width: 100%;
height: 100%;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: #d9d9d9;
}
video {
box-shadow: 0px 0px 43px -3px #474747;
}
h1 {
font-weight: 100;
color: gray;
}
/* 1.5em = 45px default */
/*THEME ICONS
------------------------------------------------------------------------------------------------*/
.vjs-polyzor-skin .vjs-icon-play,
.video-js .vjs-big-play-button,
.video-js .vjs-play-control {
font-family: VideoJS;
font-weight: normal;
font-style: normal;
}
.vjs-polyzor-skin .vjs-icon-play:before,
.video-js .vjs-big-play-button:before,
.video-js .vjs-play-control:before {
content: "";
}
.vjs-polyzor-skin {
font-size: 10px;
/* The main font color changes the ICON COLORS as well as the text */
color: #26A69A;
}
.vjs-polyzor-skin .vjs-control-bar,
.vjs-polyzor-skin .vjs-big-play-button,
.vjs-polyzor-skin .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: #2B333F;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(43, 51, 63, 0.7);
}
.vjs-polyzor-skin .vjs-big-play-button {
font-size: 6em;
line-height: 1;
height: 1em;
width: 1em;
color: #26A69A;
background: none !important;
border: 0;
-webkit-transition: all .3s ease !important;
transition: all .3s ease !important;
/* Align center */
left: 50%;
top: 50%;
margin-left: -0.5em;
margin-top: -0.5em;
}
.vjs-polyzor-skin .vjs-big-play-button:hover {
color: #fff;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
.vjs-polyzor-skin .vjs-control-bar {
padding: 0 5px;
height: 4em !important;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.vjs-polyzor-skin .vjs-progress-control {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0 !important;
width: 100% !important;
height: auto !important;
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.vjs-polyzor-skin .vjs-progress-holder {
height: 0.5em !important;
margin: 0;
}
.vjs-polyzor-skin .vjs-progress-holder .vjs-load-progress,
.vjs-polyzor-skin .vjs-progress-holder .vjs-play-progress {
-webkit-transition: width 400ms ease;
transition: width 400ms ease;
height: 100% !important;
}
.vjs-polyzor-skin .vjs-progress-holder .vjs-play-progress:before {
font-size: 1em;
color: #fcfaff;
top: -55%;
}
.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
visibility: visible;
opacity: 1;
background: none;
-webkit-transition: all 1s;
transition: all 1s;
}
.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-control,
.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-time-control {
visibility: hidden;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
}
.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-progress-control {
visibility: visible;
opacity: 1;
top: 100%;
-webkit-transition: all .8s !important;
transition: all .8s !important;
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-progress-control .vjs-play-progress.vjs-slider-bar:before {
content: '';
}
.vjs-polyzor-skin .vjs-control {
height: auto;
width: auto;
padding: 0 5px;
}
.vjs-polyzor-skin .vjs-control:before {
font-size: 3em;
line-height: 1 !important;
}
.vjs-polyzor-skin .vjs-control:before {
line-height: 1;
position: relative;
}
.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
text-shadow: 0 0 1em #26A69A;
}
.vjs-polyzor-skin .vjs-play-control {
position: absolute;
width: auto;
height: 100%;
top: 50%;
left: 50%;
-webkit-transition: 300ms;
transition: 300ms;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.vjs-polyzor-skin .vjs-play-control:before {
position: relative;
line-height: 1 !important;
font-size: 25px;
font-size: 2.85714em !important;
}
.vjs-polyzor-skin .vjs-volume-menu-button {
position: relative;
height: 2.3em;
width: 2.3em;
overflow: hidden;
}
.vjs-polyzor-skin .vjs-volume-menu-button:before {
text-align: left;
font-size: 2.3em !important;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-shadow: none !important;
}
.vjs-polyzor-skin .vjs-volume-menu-button .vjs-menu {
position: relative;
width: 100%;
left: 2em;
}
.vjs-polyzor-skin .vjs-volume-menu-button .vjs-menu-content {
position: absolute;
height: 2.3em;
padding: 0 5px !important;
}
.vjs-polyzor-skin .vjs-volume-menu-button .vjs-menu-content .vjs-volume-bar {
margin: 0 !important;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.vjs-polyzor-skin .vjs-volume-level {
color: #fcfaff;
}
.vjs-polyzor-skin .vjs-vol-0 {
color: red;
}
.vjs-polyzor-skin .vjs-remaining-time {
margin-right: auto;
}
.vjs-polyzor-skin .vjs-time-control {
color: #fff;
}
.vjs-polyzor-skin .vjs-live-control {
position: absolute;
width: auto;
line-height: 1;
height: auto;
top: -30px;
right: 0;
}
.vjs-polyzor-skin .vjs-live-control:before {
content: '';
display: block;
width: 10px;
height: 10px;
position: absolute;
left: 0;
top: 50%;
background: red;
border-radius: 100%;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.vjs-polyzor-skin .vjs-playback-rate {
/*TODO: fix playback height*/
}
.vjs-current-time,
.vjs-time-divider {
display: block !important;
}
.vjs-polyzor-skin .vjs-progress-control:hover .vjs-mouse-display:after {
background: rgba(38, 166, 154, 0.7);
}
/* The slider bar color is used for the progress bar and the volume bar
(the first two can be removed after a fix that's coming) */
.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
background: #26A69A;
}
/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
/* For IE8 we'll lighten the color */
background: #bfc7d3;
/* Otherwise we'll rely on stacked opacities */
background: rgba(115, 133, 159, 0.5);
}
/* The load progress bar also has internal divs that represent
smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
/* For IE8 we'll lighten the color */
background: white;
/* Otherwise we'll rely on stacked opacities */
background: rgba(115, 133, 159, 0.75);
}
@media screen and (max-width: 400px) {
.vjs-polyzor-skin .vjs-play-control {
display: inline-block;
position: relative;
height: 100%;
top: 0 !important;
left: 0 !important;
-webkit-transform: translate(0, 0) !important;
-ms-transform: translate(0, 0) !important;
transform: translate(0, 0) !important;
margin-right: 5px;
}
.vjs-polyzor-skin .vjs-play-control:before {
position: relative;
line-height: 1 !important;
font-size: 2.85714em !important;
}
}
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
Video.js Polyzor Skin
html5好看的特效皮肤,Video.js 一款漂亮的HTML视频播放器皮肤相关推荐
- 8款惊艳的HTML5粒子动画特效,超级惊艳 8款HTML5动画特效推荐源码
1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动 ...
- 【html+css+js】用前端做一个视频播放器页面
目录 介绍 HTML5 CSS3 JavaScript 效果图展示 介绍 学习前端两个星期后学到了很多,知道了html是制作网页的"骨架",css是制作好看的皮囊,js是让人动起来 ...
- web player html5源码,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowpla ...
- vue开发移动端使用video.js播放视频
安装 引入 文档 HTML代码 css自定义播放按钮 css居中播放按钮 css设置简洁播放按钮 css设置海报占据整个视频空间 js使用设置 videojs设置中文 销毁视频播放器实例 使用html ...
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- video.js 自定义使用
video.js 直接使用 自定义控制条和样式 弹幕相关 plugin写法 video.js 是开源插件,据说甚至可以集合到gitbook上 note: 一个需要注意的点是下载下来的demo.html ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(四)- webpack + video.js 打造流媒体服务器前端
EasyPlayer播放器是基于EasyDSS流媒体服务器视频强大的后台管理能力,提供视频点播和直播播放能力的强大播放载体.流畅稳定的播放性能,集广告植入.数据监测等功能于一身,为开发者提供端到端的一 ...
- videojs-flvjs：video.js + flv.js播放m3u8和flv视频
videojs-flvjs是video.js的扩展,让video.js支持flv.js播放器,可以在video.js的techOrder里配置flvjs播放器. 下面做了一个切换m3u8和flv直播流 ...
- video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...
最新文章
- 制备pdms膜的方法_专利：一种热致变色纳米纤维膜及其制备方法
- 高斯用服务器能算chk文件么,教程（二十四）使用freqchk命令进行热力学校正
- Windows 10——安装Snort_2_9_16
- confluence 为合并的单元格新增一行
- java 多重压缩下载_Java 多文件边压缩边下载
- java代码限制短信发送次数_java如何实现发短息限制日发送次数代码
- 实验五 网络编程与安全
- android:ellipsize省略文字用法（转载）
- tfs sql查询_TFS安装中SQL Server课程
- 在线mod计算机,计算机系中有关mod的常识(全).doc
- 地图不显示_图灵搜不显示地图，软件打开一片空白，怎么解决？
- chrome怎么安装java插件下载_java插件下载如何将JAVA插件支持Chrome
- dns服务器响应 异常,DNS云学堂｜快速定位DNS解析异常问题，牢记这四种DNS状态码...
- java实现在线预览word(docx)功能
- Python链家广州二手房的数据爬取--数据爬取
- SpringBoot+Vue实现前后端分离的企业人事管理系统
- 强化学习常用算法总结
- 搜狗输入法 - 自定义短语
- 机器学习-54-RL-06-Actor-Critic(强化学习-A2C,A3C,Pathwise Derivative Policy Gradient)
- 心과 情의 調和 (韓長庚 易學原理總論)