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

Source: Internet
Author: User
Tags unsupported

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>  

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.