Media elements of HTML5 practice and analysis (1. Introduction to video tags and audio tags)

With the advent of HTML5, flash cannot be supported on mobile phones, in this way, you can only use the media tag video tag and audio tag in HTML5 to play a flash-based music or video. Coincidentally, the mobile end supports the video tag and audio tag of HTML5 media. This makes HTML5 popular on mobile terminals.

The video tag and audio tag also provide useful JavaScript APIs that allow you to create custom controls. The usage of the two labels is as follows.

 

HTML code

<! -- Video tag --> <video src = "meng.ogg" id = "myVideo"> videos are not supported </video> <! -- Audio tag --> <audio src = "longpolling" id = "myAudio"> audio unsupported </audio>

 

When using the video tag and audio tag, it must contain the src attribute and point to the media file to be loaded. You can also set the width and height attributes to specify the player size. Display an image during video content loading. You can specify the image URI in the poster attribute. In addition, the tag contains the controls attribute, which means that the browser should display the UI control, allowing you to directly operate on the media. Any content between the start and end tags is used as the backup content, which is displayed when the browser does not support these two media elements.

Because not all browsers support different media sources, you must write multiple source tags separately. The following is a small example.

 

 

HTML code

<! -- Audio tag --> <audio id = "audio"> <source id = "s1" src = "meng.mp3"> </source> <source id = "s2" src =" meng.ogg "> </source> audio unsupported </audio> <! -- Video tag --> <video id = "video"> <source id = "s1" src = "meng.mp3"> </source> <source id = "s2" src =" meng.ogg "> </source> video not supported </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.

Media elements of HTML5 practice and analysis (1. Introduction to video tags and audio tags) have been completed. Media tags are well supported in HTML5, therefore, it is usually used. More HTML5-related knowledge can be found at Menglong xiaozhan. Thank you for your support.

 

 

New Video Playback Method

JavaScript code

Function bofangshipin (Num) {var u = navigator. userAgent; if (u. indexOf ('iphone ')>-1 | u. indexOf ('mac')>-1) {// Apple $ ("# vid" + Num).css ("width", "100%"); document. getElementById ('vid' + Num ). style. display = 'block'; document. getElementById ('vid' + Num ). play ();} else {// Android $ ("# vid" + Num).css ({"width": $ (". wrapperW "). width (), "height": $ (". wrapperW "). height (), "left": ($ (". m_wraper "). width ()-$ (". wrapperW "). width ()/2}); document. getElementById ('vid' + Num ). style. display = 'block'; setTimeout (function () {document. getElementById ('vid' + Num ). play ();}, 1000);} document. getElementById ('vid' + 1 ). addEventListener ("ended", end_playing, false); document. getElementById ('vid' + 1 ). addEventListener ("pause", end_playing, false); document. getElementById ('vid' + 2 ). addEventListener ("ended", end_playing, false); document. getElementById ('vid' + 2 ). addEventListener ("pause", end_playing, false); document. getElementById ('vid' + 3 ). addEventListener ("ended", end_playing, false); document. getElementById ('vid' + 3 ). addEventListener ("pause", end_playing, false); function end_playing () {document. getElementById ('vid' + 1 ). style. display = 'none'; document. getElementById ('vid' + 2 ). style. display = 'none'; document. getElementById ('vid' + 3 ). style. display = 'none'; $ ("# vid" + 12.16.css ("width", "0%"); $ ("# vid" + 22.16.css ("width ", "0%"); $ ("# vid" + 32.16.css ("width", "0% ");}

 

HTML code

 

<video src="images/sanxing.mp4"  id="vid1" controls autoplay  style="position: absolute; z-index:100;  left: 0px; display:none" name="vid1">       <source src="images/sanxing.mp4"></source>    </video>