HTML5视频播放器jQuery插件

HTML5 Video player jQuery plugin As you know – HTML5 <video> element is already supported by most of browsers (by modern browsers). Its initialization is very easy. During today’s investigation I have understood few things: that each browser supports only few of video formats, and each browser has own native video controls (and all of them are different). But fortunately, html5 can give us all necessary possibilities to make own interface to control our video element. Today I will show you process of building own html5 player (quite crossbrowser), more, it will be new jquery plugin.

HTML5视频播放器jQuery插件众所周知，大多数浏览器(现代浏览器)已经支持HTML5 <video>元素。它的初始化非常容易。在今天的调查中，我了解到的事情很少：每种浏览器仅支持几种视频格式，并且每种浏览器都有自己的本机视频控件(并且所有控件都不相同)。但幸运的是，html5可以为我们提供所有必要的可能性，以使自己的界面能够控制我们的视频元素。今天，我将向您展示构建自己的html5播放器(相当跨浏览器)的过程，此外，它将是新的jquery插件。

Final result of our player:

我们玩家的最终结果：

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

步骤1. HTML标记 (Step 1. HTML Markup)

This is markup of our result slideshow page. Here it is:

这是我们的结果幻灯片页面的标记。这里是：

index.html (index.html)


<div class="video_player"><video controls="controls" poster="media/poster.jpg" style="width:800px;"><source src="media/video.ogg" type="video/ogg" /><source src="media/video.mp4" type="video/mp4" /><source src="media/video.webm" type="video/webm" /></video><div class="custom_controls"><a class="play" title="Play"></a><a class="pause" title="Pause"></a><div class="time_slider"></div><div class="timer">00:00</div><div class="volume"><div class="volume_slider"></div><a class="mute" title="Mute"></a><a class="unmute" title="Unmute"></a></div></div>
</div>
<script>$(function() {$('.video_player').myPlayer();});
</script>


<div class="video_player"><video controls="controls" poster="media/poster.jpg" style="width:800px;"><source src="media/video.ogg" type="video/ogg" /><source src="media/video.mp4" type="video/mp4" /><source src="media/video.webm" type="video/webm" /></video><div class="custom_controls"><a class="play" title="Play"></a><a class="pause" title="Pause"></a><div class="time_slider"></div><div class="timer">00:00</div><div class="volume"><div class="volume_slider"></div><a class="mute" title="Mute"></a><a class="unmute" title="Unmute"></a></div></div>
</div>
<script>$(function() {$('.video_player').myPlayer();});
</script>

You can see here and our Video element, and the custom controls set. Plus – jquery plugin initialization. As you can see – I have to provide 3 file formats (ogg, mp4 and webm) to cover all browsers (FF, IE, Chrome, Safari and possible Opera too). As video converter software, I can recommend Miro Video Converter (http://www.mirovideoconverter.com/) as example.

您可以在这里看到我们的Video元素以及自定义控件集。加– jQuery插件初始化。如您所见–我必须提供3种文件格式(ogg，mp4和webm)以涵盖所有浏览器(FF，IE，Chrome，Safari和可能的Opera)。作为视频转换器软件，我可以推荐Miro Video Converter(http://www.mirovideoconverter.com/)作为示例。

步骤2. CSS (Step 2. CSS)

Here are all stylesheets

这是所有样式表

css / player.css (css/player.css)


/* jquery */
.ui-slider-handle {display: block;margin-left: -9px;position: absolute;z-index: 2;
}
.ui-slider-range {bottom: 0;display: block;height: 100%;left: 0;position: absolute;width: 100%;z-index: 1;
}
/* player */
.video_player {background-color: #E8E8E8;border: 1px solid #888;float: left;padding: 10px;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
}
/* controls */
.video_player .custom_controls {clear: both;height: 30px;padding-top: 8px;position: relative;width: 100%;
}
.play, .pause, .volume, .time_slider, .timer {float: left;
}
.play, .pause, .mute, .unmute {cursor: pointer;
}
.play, .pause {display: block;height: 24px;margin-left: 5px;margin-right: 15px;opacity: 0.8;width: 33px;transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;
}
.play {background: url(../images/play.png) no-repeat;
}
.pause {background: url(../images/pause.png) no-repeat;display: none;
}
.play:hover, .pause:hover {opacity: 1;
}
.time_slider {border: 1px solid #5f5f5f;height: 10px;margin-top: 5px;position: relative;width: 630px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;background: #777777;background-image: -moz-linear-gradient(top, #777777, #9d9d9d);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #777777),color-stop(1, #9d9d9d));
}
.time_slider .ui-slider-handle {background: url(../images/handler.png) no-repeat;cursor: pointer;height: 16px;opacity: 0.8;top: -2px;width: 16px;
}
.time_slider .ui-slider-handle.ui-state-hover {opacity: 1;
}
.time_slider .ui-slider-range {border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;background: #e9742e;background-image: -moz-linear-gradient(top, #e9742e, #c14901);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e9742e),color-stop(1, #c14901));
}
.timer {color: #000;font-size: 12px;margin-left: 10px;margin-top: 3px;
}
.volume {bottom: 0;color: #FFFFFF;height: 35px;overflow: hidden;padding: 5px 10px 0;position: absolute;right: 0;width: 33px;
}
.volume:hover {background: url(../images/volume.png) no-repeat scroll 8px 0 transparent;height: 161px;
}
.volume_slider {height: 105px;left: -1px;opacity: 0;position: relative;width: 33px;
}
.volume:hover .volume_slider {opacity: 1;
}
.volume_slider .ui-slider-handle {background: url(../images/handler.png) no-repeat;height: 15px;left: 9px;margin-bottom: -15px;margin-left: 0;opacity: 0.8;width: 14px;
}
.volume_slider .ui-slider-handle.ui-state-hover {opacity: 1;
}
.mute, .unmute {bottom: 7px;display: block;height: 23px;opacity: 0.8;position: absolute;text-indent: -999px;width: 33px;
}
.mute:hover, .unmute:hover {opacity: 1;
}
.mute {background: url(../images/vol_full.png) no-repeat;
}
.unmute {background: url(../images/vol_mute.png) no-repeat;display: none;
}


/* jquery */
.ui-slider-handle {display: block;margin-left: -9px;position: absolute;z-index: 2;
}
.ui-slider-range {bottom: 0;display: block;height: 100%;left: 0;position: absolute;width: 100%;z-index: 1;
}
/* player */
.video_player {background-color: #E8E8E8;border: 1px solid #888;float: left;padding: 10px;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
}
/* controls */
.video_player .custom_controls {clear: both;height: 30px;padding-top: 8px;position: relative;width: 100%;
}
.play, .pause, .volume, .time_slider, .timer {float: left;
}
.play, .pause, .mute, .unmute {cursor: pointer;
}
.play, .pause {display: block;height: 24px;margin-left: 5px;margin-right: 15px;opacity: 0.8;width: 33px;transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;
}
.play {background: url(../images/play.png) no-repeat;
}
.pause {background: url(../images/pause.png) no-repeat;display: none;
}
.play:hover, .pause:hover {opacity: 1;
}
.time_slider {border: 1px solid #5f5f5f;height: 10px;margin-top: 5px;position: relative;width: 630px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;background: #777777;background-image: -moz-linear-gradient(top, #777777, #9d9d9d);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #777777),color-stop(1, #9d9d9d));
}
.time_slider .ui-slider-handle {background: url(../images/handler.png) no-repeat;cursor: pointer;height: 16px;opacity: 0.8;top: -2px;width: 16px;
}
.time_slider .ui-slider-handle.ui-state-hover {opacity: 1;
}
.time_slider .ui-slider-range {border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;background: #e9742e;background-image: -moz-linear-gradient(top, #e9742e, #c14901);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e9742e),color-stop(1, #c14901));
}
.timer {color: #000;font-size: 12px;margin-left: 10px;margin-top: 3px;
}
.volume {bottom: 0;color: #FFFFFF;height: 35px;overflow: hidden;padding: 5px 10px 0;position: absolute;right: 0;width: 33px;
}
.volume:hover {background: url(../images/volume.png) no-repeat scroll 8px 0 transparent;height: 161px;
}
.volume_slider {height: 105px;left: -1px;opacity: 0;position: relative;width: 33px;
}
.volume:hover .volume_slider {opacity: 1;
}
.volume_slider .ui-slider-handle {background: url(../images/handler.png) no-repeat;height: 15px;left: 9px;margin-bottom: -15px;margin-left: 0;opacity: 0.8;width: 14px;
}
.volume_slider .ui-slider-handle.ui-state-hover {opacity: 1;
}
.mute, .unmute {bottom: 7px;display: block;height: 23px;opacity: 0.8;position: absolute;text-indent: -999px;width: 33px;
}
.mute:hover, .unmute:hover {opacity: 1;
}
.mute {background: url(../images/vol_full.png) no-repeat;
}
.unmute {background: url(../images/vol_mute.png) no-repeat;display: none;
}

步骤3. JS (Step 3. JS)

js / script.js (js/script.js)


function rectime(secs) {var hr = Math.floor(secs / 3600);var min = Math.floor((secs - (hr * 3600))/60);var sec = Math.floor(secs - (hr * 3600) - (min * 60));if (hr < 10) {hr = '0' + hr; }if (min < 10) {min = '0' + min;}if (sec < 10) {sec = '0' + sec;}if (hr) {hr = '00';}return hr + ':' + min + ':' + sec;
}
(function($) {$.fn.myPlayer = function() {return this.each(function() {// variablesvar $oMain = $(this);var $oVideo = $('video', $oMain);var $oPlay = $('.play', $oMain);var $oPause = $('.pause', $oMain);var $oTimeSlider = $('.time_slider', $oMain);var $oTimer = $('.timer', $oMain);var $oVolSlider = $('.volume_slider', $oMain);var $oMute = $('.mute', $oMain);var $oUnmute = $('.unmute', $oMain);var bTimeSlide = false;var iVolume = 1;// functions sectionvar prepareTimeSlider = function() {if (! $oVideo[0].readyState) {setTimeout(prepareTimeSlider, 1000);} else {$oTimeSlider.slider({value: 0,step: 0.01,orientation: 'horizontal',range: 'min',max: $oVideo[0].duration,animate: true,slide: function() {bTimeSlide = true;},stop:function(e, ui) {bTimeSlide = false;$oVideo[0].currentTime = ui.value;}});};};// events section$oPlay.click(function () {$oVideo[0].play();$oPlay.hide();$oPause.css('display', 'block');});$oPause.click(function () {$oVideo[0].pause();$oPause.hide();$oPlay.css('display', 'block');});$oMute.click(function () {$oVideo[0].muted = true;$oVolSlider.slider('value', '0');$oMute.hide();$oUnmute.css('display', 'block');});$oUnmute.click(function () {$oVideo[0].muted = false;$oVolSlider.slider('value', iVolume);$oUnmute.hide();$oMute.css('display', 'block');});// bind extra inner events$oVideo.bind('ended', function() {$oVideo[0].pause();$oPause.hide();$oPlay.css('display', 'block');});$oVideo.bind('timeupdate', function() {var iNow = $oVideo[0].currentTime;$oTimer.text(rectime(iNow));if (! bTimeSlide)$oTimeSlider.slider('value', iNow);});// rest initialization$oVolSlider.slider({value: 1,orientation: 'vertical',range: 'min',max: 1,step: 0.02,animate: true,slide: function(e, ui) {$oVideo[0].muted = false;iVolume = ui.value;$oVideo[0].volume = ui.value;}});prepareTimeSlider();$oVideo.removeAttr('controls');});};
})(jQuery);


function rectime(secs) {var hr = Math.floor(secs / 3600);var min = Math.floor((secs - (hr * 3600))/60);var sec = Math.floor(secs - (hr * 3600) - (min * 60));if (hr < 10) {hr = '0' + hr; }if (min < 10) {min = '0' + min;}if (sec < 10) {sec = '0' + sec;}if (hr) {hr = '00';}return hr + ':' + min + ':' + sec;
}
(function($) {$.fn.myPlayer = function() {return this.each(function() {// variablesvar $oMain = $(this);var $oVideo = $('video', $oMain);var $oPlay = $('.play', $oMain);var $oPause = $('.pause', $oMain);var $oTimeSlider = $('.time_slider', $oMain);var $oTimer = $('.timer', $oMain);var $oVolSlider = $('.volume_slider', $oMain);var $oMute = $('.mute', $oMain);var $oUnmute = $('.unmute', $oMain);var bTimeSlide = false;var iVolume = 1;// functions sectionvar prepareTimeSlider = function() {if (! $oVideo[0].readyState) {setTimeout(prepareTimeSlider, 1000);} else {$oTimeSlider.slider({value: 0,step: 0.01,orientation: 'horizontal',range: 'min',max: $oVideo[0].duration,animate: true,slide: function() {bTimeSlide = true;},stop:function(e, ui) {bTimeSlide = false;$oVideo[0].currentTime = ui.value;}});};};// events section$oPlay.click(function () {$oVideo[0].play();$oPlay.hide();$oPause.css('display', 'block');});$oPause.click(function () {$oVideo[0].pause();$oPause.hide();$oPlay.css('display', 'block');});$oMute.click(function () {$oVideo[0].muted = true;$oVolSlider.slider('value', '0');$oMute.hide();$oUnmute.css('display', 'block');});$oUnmute.click(function () {$oVideo[0].muted = false;$oVolSlider.slider('value', iVolume);$oUnmute.hide();$oMute.css('display', 'block');});// bind extra inner events$oVideo.bind('ended', function() {$oVideo[0].pause();$oPause.hide();$oPlay.css('display', 'block');});$oVideo.bind('timeupdate', function() {var iNow = $oVideo[0].currentTime;$oTimer.text(rectime(iNow));if (! bTimeSlide)$oTimeSlider.slider('value', iNow);});// rest initialization$oVolSlider.slider({value: 1,orientation: 'vertical',range: 'min',max: 1,step: 0.02,animate: true,slide: function(e, ui) {$oVideo[0].muted = false;iVolume = ui.value;$oVideo[0].volume = ui.value;}});prepareTimeSlider();$oVideo.removeAttr('controls');});};
})(jQuery);

As you see – this is simple jQuery plugin. In the beginning – I have prepared all necessary controls and variables. Then – I have binded ‘onclick’ events to our controls, plus several inner events of video player (like ‘ended’ and ‘timeupdate’). After, I have implemented two jQueryUI sliders (time slider and volume slider). At the end – I have removed default controls: $oVideo.removeAttr(‘controls’); Generally – thats all.

如您所见–这是简单的jQuery插件。在开始时，我已经准备了所有必需的控件和变量。然后–我将“ onclick”事件绑定到我们的控件，以及视频播放器的多个内部事件(如“ end”和“ timeupdate”)。之后，我实现了两个jQueryUI滑块(时间滑块和音量滑块)。最后，我删除了默认控件：$ oVideo.removeAttr('controls'); 通常-仅此而已。

步骤4.图片 (Step 4. Images)

For our html5 video player I have used next images:

对于我们的html5视频播放器，我使用了下一张图片：

现场演示

结论 (Conclusion)

Hope that today’s html5 tutorial was great. We have made another one nice html5 example. I will be glad to see your thanks and comments. Good luck!

希望今天的html5教程很棒。我们又做了一个很好的html5示例。看到您的感谢和评论，我将非常高兴。祝好运！

翻译自: https://www.script-tutorials.com/html5-video-player-jquery-plugin/