简介HTML5的标签已经被目前大多数主流浏览器所支持，包括还未正式发布的IE9也声明将支持标签，利用浏览器原生特性嵌入视频有很多好处，所以很多开发者想尽快用上，但是真正使用前还有些问题要考虑，尤其是 Opera/Firefox 和IE/Safari浏览器所支持的视频编码不同的问题，Google几个月前发布的开源视频编码VP8有望能解决这一问题，另外Google还发布了开放网络媒体项目WebM，旨在帮助开发者为开放网络制作出世界级媒体格式，Opera, Firefox, Chrome和IE9都将支持VP8，而且Flash Player也将可以播放VP8，这就意味着我们很快就可以只制作一个版本的视频然后在所有主流浏览器上播放了。另外一个主要的问题就是如何构建自定义的HTML5播放器，这是目前Flash Player的优势所在，利用Flash的IDE所提供的接口可以很方便的构建一个个性化的视频播放器，那HTML5的标签要怎样才能实现呢？这个问题就是本文所要解决的！我们将开发一个HTML5视频播放器的jQuery插件，并且可以很方便的进行自定义，将分为以下几个部分：1.视频控制工具条2.视频控制按钮3.打包成jQuery插件4.外观和体验5.自定义皮肤视频控制工具条做为一个专业的web开发人员，我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致(consistent)，但是通过下面的图可以看到目前各个浏览器提供的视频控制工具条外观各不相同：那就没办法了，我们得自己从头来创建这个控制工具条，利用HTML和CSS再加上一些图片实现起来并不算很难，另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。视频控制按钮基本的视频控制工具条要包含一个播放/暂停按钮，一个进度条，一个计时器和一个音量控制按钮，我们将这些按钮放在元素下面，并用一个div作为父容器： 00:00 复制代码 注意，我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。打包成jQuery插件创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的，正如前面提到的一样我们将我们的播放器打包成jQuery插件，这样可以很好的实现复用，代码如下： $.fn.gVideo = function(options) { // build main options before element iteration var defaults = { theme: 'simpledark', childtheme: '' }; var options = $.extend(defaults, options); // iterate and reformat each matched element return this.each(function() { var $gVideo = $(this); //create html structure //main wrapper var $video_wrap = $('').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme); //controls wraper var $video_controls = $('00:00'); gVideo.after($video_controls); Copy code here first It is assumed that you understand jQuery and know how to create a jQuery plug-in, because this is beyond the scope of this article. In the above script, we use jQuery to dynamically create elements of the video control toolbar. Next, in order to bind events, we need to obtain the corresponding Elements: //get newly created elements var $video_container = $gVideo.parent('.ghinda-video-player'); var $video_controls = $('.ghinda-video-controls', $video_container); var $ghinda_play_btn = $('.ghinda-video-play', $video_container); var $ghinda_video_seek = $('.ghinda-video-seek', $video_container); var $ghinda_video_timer = $('.ghinda-video-timer', $video_container); var $ghinda_volume = $('.ghinda-volume-slider', $video_container); var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container); $video_controls.hide(); // keep the controls hidden Copy code Here we get it through className, first hide the toolbar Until all resources are loaded, now implement the play/pause button: var gPlay = function() { if($gVideo.attr(' paused') == false) { $gVideo[0].pause(); 🎜> } }; $ghinda_play_btn.click(gPlay); $gVideo.click(gPlay); $gVideo.bind('play', function() { $ghinda_play_btn.addClass('ghinda-paused-button'); } ); $gVideo.bind('pause', function() { $ghinda_play_btn.removeClass('ghinda-paused-button'); }); $gVideo.bind('ended', function() { $ghinda_play_btn.removeClass('ghinda-paused-button') ; }); Copy codeMost browsers will provide an independent menu when right-clicking on a video. It also provides video control functions. If the user controls the video through this right-click menu, it will conflict with our custom controls, so in order to avoid this we need to Bind the "play", "pause" and "end" events of the video player itself, process the play/pause button in the event handler function, and control the style of the button. To create the drag block of the progress bar, we used jQuery UI’s Slider component: var createSeek = function() { if ($gVideo.attr('readyState')) { var video_duration = $gVideo.attr('duration'); value : 0. range: "min", max: video_duration, animate: true, }, )( $gVideo.attr("currentTime",ui.value); > $video_controls.show(); Timeout(createSeek, 150); } }; createSeek(); Copy codeAs you can see, here we wrote a recursive function to determine whether the video is ready by looping and comparing the readyState property of the video. Otherwise, we cannot get the duration of the video and cannot create a slider. When the video is ready, we Initialize the slider and display the control toolbar. Next, we implement the timer function by binding the timeupdate event of the video element: var gTimeFormat=function(seconds){ var m=Math.floor(seconds/60)<10?"0" Math.floor(seconds/60):Math.floor(seconds/60); var s=Math .floor(seconds-(m*60))<10?"0" Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60)); return m ":" s; }; var seekUpdate = function() { var currenttime = $gVideo.attr('currentTime '); if(!seeksliding) $ghinda_video_seek.slider('value', currenttime); $ghinda_video_timer.text(gTimeFormat(currenttime)); ; $gVideo.bind('timeupdate', seekUpdate); Copy code Here we use the seekUpdate function to get the currentTime attribute value of the video Then call the gTimeFormat function to format and get the current playback time point. As for the volume control control, we still use the Slider component of jQuery UI and then use a custom function to implement the mute and unmute functions: $ghinda_volume.slider({ value: 1, orientation: "vertical", range: "min", max: 1, step : 0.05, animate: true, slide:function(e,ui){ $gVideo.attr('muted',false); video_volume = ui.value; 🎜> var muteVolume = function() { if($gVideo.attr('muted')==true) { $gVideo.attr('muted', false); $ghinda_volume.slider('value', video_volume); $ghinda_volume_btn.removeClass(' ghinda-volume-mute'); } else { $ gvideo.attr ('muted', true); $ ghinda_volume.slider ('value', '0'); $ ghinda_volume_btn.addclass ('ghinda-volume-mute'); }; }; .click(muteVolume); Copy code Finally, when our own custom video control toolbar is constructed, we need to remove the controls attribute of the tag, so that the browser defaults The toolbar has been removed. Okay, our plug-in functions have been completed. The calling method: $('video').gVideo(); Copy codeThis will apply our plugin to every video element on the page. Appearance and experienceOkay, now comes the more interesting part, which is the appearance and experience of the player. After the plug-in function is completed, the style can be easily customized with a little CSS. We will all use CSS3 to implement it. First, we add some styles to the main container of the player: .ghinda-video-player { float: left; padding: 10px; border: 5px solid #61625d; * FF1 */ -ms-border-radius: 5px; /* IE future proofing */ -webkit-border-radius: 5px; /* Saf3, Chrome */ border-radius: / #000000); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); / * SAF4, Chrome * / Box-Shadow: Inset 0 15px 35px #535353; > Copy code Next, we set the left side of the video control toolbar to float so that they are aligned horizontally. Using CSS3 opacity and transitions, we added a very nice floating effect to the play/pause and mute/unmute buttons: .ghinda-video-play { display: block; 🎜> margin-right: 15px; background: url(../images/play-icon.png) no-repeat; opacity: 0.7 ; -OUT;/ * IE Future Proofing */ O-Transition: All 0.2s Ease-in-OUT;/ * Opera */ -Webkit-Transitude: All 0.2s Ease -in-out; /* Safari and Chrome */ transition: all 0.2s ease-in-out; } .ghinda -paused-button { background: url(../images/pause-icon.png) no-repeat; } . ghinda-video-play:hover { If you carefully read the previous JavaScript code that adds and removes the play/pause button style according to the video playback status (Playing/Paused), you will understand why .ghinda-paused-button should rewrite .ghinda-video-play background property. Now it’s the slider’s turn. The implementation of our progress bar and volume control slider uses the Slider component of jQuery UI. This component itself has its own style, which is defined in the css file corresponding to jQuery UI. But in order to keep the appearance of the slider consistent with other controls of the player we rewrite all its styles: .ghinda-video-seek .ui-slider-handle { width: 15px; height: 15px; border: 1px solid #333; top: -4px; -moz-border-radius:10px; -ms-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; #d5d5d5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5)); box-shadow: inset 0 -3px 3px #d5d5d5; ui-state-hover { background: #fff; } .ghinda-video-seek .ui-slider-range { -moz-border-radius:15px; -ms-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; background: #4cbae8; background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce)); box-shadow: inset 0 -3px 3px #39a2ce; } Copy code At this time, the volume control slider is always displayed next to the volume button. We need to change it to be hidden by default. When the mouse is hovering over the volume button, it will be displayed dynamically. Using transitions to achieve this effect would be a good choice: .ghinda-volume-box { s ease-in-out; /* Firefox */ -ms-transition: all 0.1s ease-in-out; /* IE future proofing */ -o-transition: all 0.2s ease-in-out; /* Opera */ -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */ transition: all 0.1 s ease-in-out; } .ghinda-volume-box:hover { > padding-top: 5px; /* Firefox */ in-out; /* IE future proofing */ -o-transition: all 0.1s ease-in-out; /* Opera */ -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */ transition: all 0.1s ease-in-out; } . ghinda-volume-box:hover .ghinda-volume-slider { position: relative; visibility: visible; opacity: 1; } Copy code Using some basic CSS properties and the new properties provided by CSS3, we created a new player appearance, which looks like this: Custom skinYou may have noticed that we have defined some default options when writing the plug-in. They are theme and childtheme, which can be used when calling the plug-in. Need to easily apply custom skins. Here is the explanation that theme is a complete set of style definitions for all controls. Childtheme is to rewrite certain styles based on theme. We can specify these two options or one of them at the same time when calling the plug-in: $('video').gVideo({ childtheme:'smalldark' }); Copy the code We wrote an example skin smalldark, which only rewrites part of the style. The display effect is like this: SummaryUsing HTML5 Video, JavaScript and CSS3 are really easy to create a customized video player. Use JavaScript to implement the toolbar function, and leave the appearance and experience to CSS3. We get a powerful and easy-to-customize solution!
