HTML5 actual combat and analysis of the Media Elements

With the advent of HTML5, Flash on the mobile phone can not be supported, which makes a flash production of music and video playback can only be used in HTML5 media tag video tags and audio tags to make. It happens that the mobile side supports the media tag video tags and audio tags in HTML5 very well. This makes the HTML5 very popular on the mobile side.

The video tag and audio tags also provide a useful JavaScript API that allows you to create custom controls. The usage of two tags is as follows.

HTML code

View Source print? 1. <!-- 视频标签 -->  2. < video  src = "meng.ogg"  id = "myVideo" >视频不支持</ video >  3.  4. <!-- 音频标签 -->  5. < audio  src = "long.mp3"  id = "myAudio" >音频不支持</ audio > 

When using the video tag and the audio tag, include the SRC attribute, which points to the media file to be loaded. You can also set the width and Height properties to specify the player size. Displays an image during the loading of video content you can specify the URI of the image in the poster property. In addition, the controls property in the tag, which means that the browser should display UI controls, allowing users to manipulate the media directly. Anything between the start and end tags is used as fallback content, and is displayed if the browser does not support both media elements.

Because not all browsers support a different source of media, it is written separately with multiple source tags. A small example is as follows.

HTML code

View Source print? 01. <!-- 音频标签 -->  02. < audio  id = "audio" >  03. < source  id = "s1"  src = "meng.mp3" ></ source >  04. < source  id = "s2"  src = "meng.ogg" ></ source >  05. 音频不支持  06. </ audio >  07.  08. <!-- 视频标签 -->  09. < video  id = "video" >  10. < source  id = "s1"  src = "meng.mp3" ></ source >  11. < source  id = "s2"  src = "meng.ogg" ></ source >  12. 视频不支持  13. </ video >

Browsers that support video tags and audio tags include firefox 3.5+, Opera 10.5+, ie9+, Safari 4+, Chrome, iOS Safari, and Android WebKit.

HTML5 actual combat and analysis of the Media Elements (1, video tags and audio tags introduction) for everyone, the media label in the HTML5 is a very good support, so use more. More about HTML5 in the Dream Dragon Station, thank you for your support.

Newly added video playback methods

JavaScript code

View Source print? 01. function  bofangshipin(Num) {  02. var  u = navigator.userAgent;  03. if  (u.indexOf( ‘iPhone‘ ) > -1 || u.indexOf( ‘Mac‘ ) > -1) {   //苹果  04. $( "#vid"  + Num).css( "width" ,  "100%" );  05. document.getElementById( ‘vid‘  + Num).style.display =  ‘block‘ ;  06. document.getElementById( ‘vid‘  + Num).play();  07. }  else  {   //安卓  08. $( "#vid"  + Num).css({  09. "width" : $( ".wrapperW" ).width(),  10. "height" : $( ".wrapperW" ).height(),  11. "left" : ( $( ".m_wraper" ).width() - $( ".wrapperW" ).width() ) / 2  12. });  13. document.getElementById( ‘vid‘  + Num).style.display =  ‘block‘ ;  14. setTimeout( function  () { document.getElementById( ‘vid‘  + Num).play(); }, 1000);  15. }  16.  17. }  18. document.getElementById( ‘vid‘  + 1).addEventListener( "ended" , end_playing, false );  19. document.getElementById( ‘vid‘  + 1).addEventListener( "pause" , end_playing, false );  20. document.getElementById( ‘vid‘  + 2).addEventListener( "ended" , end_playing, false );  21. document.getElementById( ‘vid‘  + 2).addEventListener( "pause" , end_playing, false );  22. document.getElementById( ‘vid‘  + 3).addEventListener( "ended" , end_playing, false );  23. document.getElementById( ‘vid‘  + 3).addEventListener( "pause" , end_playing, false );  24. function  end_playing() {  25. document.getElementById( ‘vid‘  + 1).style.display =  ‘none‘ ;  26. document.getElementById( ‘vid‘  + 2).style.display =  ‘none‘ ;  27. document.getElementById( ‘vid‘  + 3).style.display =  ‘none‘ ;  28.  29. $( "#vid"  + 1).css( "width" ,  "0%" );  30. $( "#vid"  + 2).css( "width" ,  "0%" );  31. $( "#vid"  + 3).css( "width" ,  "0%" );  32. }

HTML Code

View Source print? 1. < video  src = "images/sanxing.mp4"   id = "vid1"  controls autoplay   style = "position: absolute; z-index:100;  left: 0px; display:none"  name = "vid1" >  2. < source  src = "images/sanxing.mp4" ></ source >  3. </ video > When everyone is tired, go to see the evil GIF animated chart bar, connotation without pornography, pleasure body and mind! Http://www.530312.net