Video.js 是一个开源的 Html5 jquery 视频插件，这个插件可以用来处理 Flash 视频，它还是一个多平台支持的产品，你可以下载 Video.js 的源码放到自己的服务器上，或者使用免费的 CDN 托管版本。现在推荐将 JavaScript 文件放到 <body> 标签中，而不是 <head>。但是 Video.js 包含了一个需要在 <head> 标签中引用的 'HTML5 Shiv'，为了让旧版本的IE浏览器识别 video 标签。这里使用的是video.js 5.2.1版本。
如果是h5会使用video或audio元素，如果是flash，会定义一个flash播放器。不止flash，还支持Silverlight、Quicktime等技术播放。可以在元素中直接定义data-setup。
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script
<!--指定flash方式 此方式需引入video-js.swf-->
<video data-setup='{"techOrder": ["flash", "other supported tech"]}'></video>
<!--指定html5方式-->
<video data-setup='{"techOrder": ["html5", "other supported tech"]}'></video>
<link rel='stylesheet prefetch' href='https://vjs.zencdn.net/5.2.1/video-js.css'>
<style>
@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;
}
}
</style>
<video id="example_video_1" class="video-js vjs-polyzor-skin" controls preload="auto" width="640" height="400" poster="https://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
<source src="/uploads/1706/balloons.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<h1>Video.js Polyzor Skin</h1>
<script src='https://vjs.zencdn.net/5.2.1/video.js'></script>
最后看下效果：
