Xiaoqiang's HTML5 mobile development path (5)-making a beautiful video player

I have introduced the features and basic knowledge of HTML5 in the previous articles. Next we will start to experience the advantages of HTML5, let's get started with making a beautiful video player. First, let's take a look at the basic knowledge of video files before getting started.

I. Video Format

Currently, the mainstream and used video formats include avi, rmvb, wmv, mpeg4, ogg, and webm. These videos are composed of three parts: video, audio, and encoding format. In HTML5, there are multiple sets of different encoders based on different browsers:

H.264 (personal dislike): This encoder is a proprietary video encoder in Apple's systems, including Apple mobile phones. Patent fees may be charged for any part of the code and transfer process. Therefore, Safari (Apple's browser) and Intenet Explorer support this encoder. However, when open source has become a trend, patent fees are still charged in the browser, which is really not good for individuals.

Theora: This is a proprietary encoding format that provides free video encoder for encoding, transmission, and playback of all levels. Chrome, Firefox, and Opera support this encoder.

VP8: This video encoder is similar to Theora, but its owner is Google, which is open-source and does not require patent fees. Chrome, Firefox, and Opera support this encoder.

AAC: The Audio Encoder, which is the same as H.264. This Audio Encoder has patent limitations. Safari, Chrome, and Internet Explorer support this audio encoder.

MP3: it is also a patented technology. Safari, Chrome, and Internet Explorer support this audio encoder.

PCM: A format used to store complete data encoded by analog digital converters and stored on audio CD. It is a Chinese lossless encoder. Its file size is generally several times that of AAC and MP3 files. Safari, Firefox, and Internet Explorer support this audio encoder.

Vorbis: the file extension name is .ogg, which is also known as Ogg Vorbis. This Audio Encoder is not protected by patents, so copyright is free of charge. Supported browsers include Chrome, Firefox, and Opera.

Video and audio supported by mainstream browsers and devices

 

Browser	Container	Video	Audio
Apple ios	MP4	H.264	ACC, MP3, PCM
Apple Safari	MP4	H.264
Google Android (pre v.3)	--	--	--
Google Chrome	MP4, OGG, WebM	Theora, VP8	ACC, MP3, Vorbis
Microsoft Internet Explorer	MP4	H.264	ACC, MP3
Mozilla Firefox	OGG, WebM	Theora, VP8	PCM and Vorbis
Opera	OGG, WebM	Theora, VP8	PCM and Vorbis

Ii. HTML5 Attribute

 

Available in html5

Or Use tags to play html5 media:

 

 

Video tags have many attributes. For example, the controls attribute can be used to control whether a console exists.

 

The browser does not support HTML5 video playback.
From the preceding video format, we can see that different browsers support different video formats, so that we can use Tags specify videos in multiple formats. By default, the browser automatically starts to download files to determine their types.

 

 

3. Create a video player

 

Index.html

 

<Script src = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js> </script> <Script src = ../vendorscript. js> </script> <script src = video. js> </script> Custom HTML5 Video Controls with jQueryBACK to article» Visit inWebson.com» Demo 1 Custom HTML5 Video Controls

Your browser does not support the video tag.

This is HTML5 video with custom controls/Speed: x1x3

• DEMO 1
• DEMO 2

  ©2011 inWebson.com. Design by Kenny Ooi. Powered by HTML5 and jQuery.
Style.css

 

 

/* video container */.videoContainer{width:600px;height:350px;position:relative;overflow:hidden;background:#000;color:#ccc;}/* video caption css */.caption{display:none;position:absolute;top:0;left:0;width:100%;padding:10px;color:#ccc;font-size:20px;font-weight:bold;box-sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;background: #1F1F1F; /* fallback */background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);}/*** VIDEO CONTROLS CSS ***//* control holder */.control{background:#333;color:#ccc;position:absolute;bottom:0;left:0;width:100%;z-index:5;display:none;}/* control top part */.topControl{height:11px;border-bottom:1px solid #404040;padding:1px 5px;background:#1F1F1F; /* fallback */background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);}/* control bottom part */.btmControl{clear:both;background: #1F1F1F; /* fallback */background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);}.control div.btn {float:left;width:34px;height:30px;padding:0 5px;border-right:1px solid #404040;cursor:pointer;}.control div.text{font-size:12px;font-weight:bold;line-height:30px;text-align:center;font-family:verdana;width:20px;border:none;color:#777;}.control div.btnPlay{background:url(control.png) no-repeat 0 0;border-left:1px solid #404040;}.control div.paused{background:url(control.png) no-repeat 0 -30px;}.control div.btnStop{background:url(control.png) no-repeat 0 -60px;}.control div.spdText{border:none;font-size:14px;line-height:30px;font-style:italic;}.control div.selected{font-size:15px;color:#ccc;}.control div.sound{background:url(control.png) no-repeat -88px -30px;border:none;float:right;}.control div.sound2{background:url(control.png) no-repeat -88px -60px !important;}.control div.muted{background:url(control.png) no-repeat -88px 0 !important;}.control div.btnFS{background:url(control.png) no-repeat -44px 0;float:right;}.control div.btnLight{background:url(control.png) no-repeat -44px -60px;border-left:1px solid #404040;float:right;}.control div.lighton{background:url(control.png) no-repeat -44px -30px !important;}/* PROGRESS BAR CSS *//* Progress bar */.progress {width:85%;height:10px;position:relative;float:left;cursor:pointer;background: #444; /* fallback */background:-moz-linear-gradient(top,#666,#333);background:-webkit-linear-gradient(top,#666,#333);background:-o-linear-gradient(top,#666,#333);box-shadow:0 2px 3px #333 inset;-moz-box-shadow:0 2px 3px #333 inset;-webkit-box-shadow:0 2px 3px #333 inset;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}.progress span {height:100%;position:absolute;top:0;left:0;display:block;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}.timeBar{z-index:10;width:0;background: #3FB7FC; /* fallback */background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);box-shadow:0 0 1px #fff;-moz-box-shadow:0 0 1px #fff;-webkit-box-shadow:0 0 1px #fff;}.bufferBar{z-index:5;width:0;background: #777;background:-moz-linear-gradient(top,#999,#666);background:-webkit-linear-gradient(top,#999,#666);background:-o-linear-gradient(top,#999,#666);box-shadow:2px 0 5px #333;-moz-box-shadow:2px 0 5px #333;-webkit-box-shadow:2px 0 5px #333;}/* time and duration */.time{width:15%;float:right;text-align:center;font-size:11px;line-height:12px;}/* VOLUME BAR CSS *//* volume bar */.volume{position:relative;cursor:pointer;width:70px;height:10px;float:right;margin-top:10px;margin-right:10px;}.volumeBar{display:block;height:100%;position:absolute;top:0;left:0;background-color:#eee;z-index:10;}/* OTHERS CSS *//* video screen cover */.loading, #init{position:absolute;top:0;left:0;width:100%;height:100%;background:url(loading.gif) no-repeat 50% 50%;z-index:2;display:none;}#init{background:url(bigplay.png) no-repeat 50% 50% !important;cursor:pointer;}

Video. js

 

 

$(document).ready(function(){//INITIALIZEvar video = $('#myVideo');//remove default control when JS loadedvideo[0].removeAttribute(controls);$('.control').show().css({'bottom':-45});$('.loading').fadeIn(500);$('.caption').fadeIn(500); //before everything get startedvideo.on('loadedmetadata', function() {$('.caption').animate({'top':-45},300);//set video properties$('.current').text(timeFormat(0));$('.duration').text(timeFormat(video[0].duration));updateVolume(0, 0.7);//start to get video buffering data setTimeout(startBuffer, 150);//bind video events$('.videoContainer').append('

'). Hover (function () {$ ('. control '). stop (). animate ({'bottom ': 0}, 500); $ ('. caption '). stop (). animate ({'top': 0}, 500) ;}, function () {if (! VolumeDrag &&! TimeDrag) {$ ('. control '). stop (). animate ({'bottom ':-45}, 500); $ ('. caption '). stop (). animate ({'top':-45}, 500 );}}). on ('click', function () {$ ('# init '). remove (); $ ('. btnplay '). addClass ('paused'); $ (this ). unbind ('click'); video [0]. play () ;}); $ ('# init '). fadeIn (200) ;}); // display video buffering bar var startBuffer = function () {var currentBuffer = video [0]. buffered. end (0); var maxduration = video [0]. duration; var perc = 100 * currentBuffer/maxduration; ('.bufferbar').css ('width', perc + '%'); if (currentBuffer <maxduration) {setTimeout (startBuffer, 500) ;}}; // display current video play time video. on ('timeupdate', function () {var currentPos = video [0]. currentTime; var maxduration = video [0]. duration; var perc = 100 * currentPos/maxduration; ('.timebar').css ('width', perc + '%'); $ ('. cur Rent '). text (timeFormat (currentPos) ;}); // controls events // video screen and play button clicked video. on ('click', function () {playpause () ;}); $ ('. btnplay '). on ('click', function () {playpause () ;}); var playpause = function () {if (video [0]. paused | video [0]. ended) {$ ('. btnplay '). addClass ('paused'); video [0]. play ();} else {$ ('. btnplay '). removeClass ('paused'); video [0]. pause () ;}}; // speed Text clicked $ ('. btnx1 '). on ('click', function () {fastfowrd (this, 1) ;}); $ ('. btnx3 '). on ('click', function () {fastfowrd (this, 3) ;}); var fastfowrd = function (obj, spd) {$ ('. text '). removeClass ('selected'); $ (obj ). addClass ('selected'); video [0]. playbackRate = spd; video [0]. play () ;}; // stop button clicked $ ('. btnstop '). on ('click', function () {$ ('. btnplay '). removeClass ('paused'); updatebar ($ ('. p Rogress '). offset (). left); video [0]. pause () ;}); // fullscreen button clicked $ ('. btnFS '). on ('click', function () {if ($. isFunction (video [0]. webkitEnterFullscreen) {video [0]. webkitEnterFullscreen ();} else if ($. isFunction (video [0]. required requestfullscreen) {video [0]. required requestfullscreen ();} else {alert ('your browsers doesn' t support fullscreen ') ;}}); // light bulb button clicked $ ('. btnLight '). cl Ick (function () {$ (this). toggleClass ('lighton'); // if lightoff, create an overlay if (! $ (This ). hasClass ('lighton') {$ ('body '). append (''); Comment ('.overlay'}.css ({'position': 'absolute ', 'width': 100 +' % ', 'height': $ (document ). height (), 'background': '# 000', 'opacity': 0.9, 'top': 0, 'left': 0, 'z-Index ': 999}); ('.videocontainer'{.css ({'z-Index': 1000});} // if lighton, remove overlay else {$ ('. overlay '). remove () ;}}); // sound button clicked $ ('. sound '). click (function () {video [0]. muted =! Video [0]. muted; $ (this ). toggleClass ('muted'); if (video [0]. muted) {detail ('.volumebar'detail .css ('width', 0);} else {detail ('.volumebar'detail .css ('width', video [0]. volume * 100 + '%') ;}}); // video events // video canplay event video. on ('canplay', function () {$ ('. loading '). fadeOut (100);}); // video canplaythrough event // solve Chrome cache issue var completeloaded = false; video. on ('playpassthrough ', function () {complet Eloaded = true;}); // video ended event video. on ('enabled', function () {$ ('. btnplay '). removeClass ('paused'); video [0]. pause () ;}); // video seeking event video. on ('secret', function () {// if video fully loaded, ignore loading screen if (! Completeloaded) {$ ('. loading '). fadeIn (200) ;}}); // video seeked event video. on ('seeked', function () {}); // video waiting for more data event video. on ('waiting', function () {$ ('. loading '). fadeIn (200);}); // video progress bar // when video timebar clicked var timeDrag = false;/* check for drag event */$ ('. SS ss '). on ('mousedown', function (e) {timeDrag = true; updatebar (e. pageX) ;}); $ (docume Nt ). on ('mouseup', function (e) {if (timeDrag) {timeDrag = false; updatebar (e. pageX) ;}}); $ (document ). on ('mousemove ', function (e) {if (timeDrag) {updatebar (e. pageX) ;}}); var updatebar = function (x) {var progress =$ ('. progress '); // calculate drag position // and update video currenttime // as well as progress bar var maxduration = video [0]. duration; var position = x-progress. offset (). left; va R percentage = 100 * position/progress. width (); if (percentage> 100) {percentage = 100;} if (percentage <0) {percentage = 0;} percent ('.timebar'%.css ('width ', percentage + '%'); video [0]. currentTime = maxduration * percentage/100;}; // volume bar // volume bar event var volumeDrag = false; $ ('. volume '). on ('mousedown', function (e) {volumeDrag = true; video [0]. muted = false; $ ('. sound '). removeClass (' Muted '); updateVolume (e. pageX) ;}); $ (document ). on ('mouseup', function (e) {if (volumeDrag) {volumeDrag = false; updateVolume (e. pageX) ;}}); $ (document ). on ('mousemove ', function (e) {if (volumeDrag) {updateVolume (e. pageX) ;}}); var updateVolume = function (x, vol) {var volume =$ ('. volume '); var percentage; // if only volume have specificed // then direct update volume if (vol) {percentage = vol * 100;} else {var position = x-volume. offset (). left; percentage = 100 * position/volume. width () ;}if (percentage> 100) {percentage = 100 ;}if (percentage <0) {percentage = 0 ;} // update volume bar and video volume ('.volumebar'0000.css ('width', percentage + '%'); video [0]. volume = percentage/100; // change sound icon based on volume if (video [0]. volume = 0) {$ ('. sound '). removeClass ('sound2 '). AddClass ('muted');} else if (video [0]. volume> 0.5) {$ ('. sound '). removeClass ('muted '). addClass ('sound2 ');} else {$ ('. sound '). removeClass ('muted '). removeClass ('sound2 ') ;};// Time format converter-00:00 var timeFormat = 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 ;};});
Running effect: