HTML5 actual combat and analysis of media elements (1. Introduction to video tags and audio tags)-H5 Tutorial-php.cn

HTML5 actual combat and analysis of media elements (1. Introduction to video tags and audio tags)

黄舟

Release： 2017-02-13 13:26:05

Original

1754 people have browsed it

With the arrival of HTML5, flash cannot be supported on mobile phones. This means that music playback and video playback produced in flash can only be produced using the media tags video tag and audio tag in HTML5. Coincidentally, the mobile terminal supports the media tags video tag and audio tag in HTML5 very well. This makes HTML5 very popular on mobile devices.

The video tag and audio tag also provide very useful JavaScript APIs, allowing the creation of custom controls. The usage of the two tags is as follows.

　HTML code

<!-- 视频标签 -->
<video src="meng.ogg" id="myVideo">视频不支持</video>

<!-- 音频标签 -->
<audio src="long.mp3" id="myAudio">音频不支持</audio>

Copy after login

When using video tags and audio tags, you must include the src attribute, pointing to the content to be loaded media files. You can also set the width and height attributes to specify the player size. Displaying an image while the video content is loading can be done by specifying the URI of the image in the poster attribute. In addition, there is a controls attribute in the tag. This attribute means that the browser should display UI controls to facilitate users to directly operate the media. Anything between the opening and closing tags is used as fallback content and is displayed if the browser does not support either media element.

Precisely because not all browsers support different media sources, multiple source tags must be written separately. A small example is as follows.

　HTML code

<!-- 音频标签 -->
<audio id="audio">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	音频不支持
</audio>

<!-- 视频标签 -->
<video id="video">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	视频不支持
</video>

Copy after login

Browsers that support the video tag and audio tag include Firefox 3.5+ and Opera 10.5+ , IE9+, Safari 4+, Chrome, Safari for iOS and WebKit for Android.

HTML5 actual combat and analysis of media elements (1. Introduction to video tags and audio tags) has been introduced to you. Media tags are well supported in HTML5, so they are used more often. More relevant knowledge about HTML5 can be found at the Menglong website. Thank you for your support.

Newly added video playback method

JavaScript code

function bofangshipin(Num) {
            var u = navigator.userAgent;
            if (u.indexOf(&#39;iPhone&#39;) > -1 || u.indexOf(&#39;Mac&#39;) > -1) {  //苹果
                $("#vid" + Num).css("width", "100%");
                document.getElementById(&#39;vid&#39; + Num).style.display = &#39;block&#39;;
                document.getElementById(&#39;vid&#39; + Num).play();
            } else {  //安卓
            $("#vid" + Num).css({
                "width": $(".wrapperW").width(),
                "height": $(".wrapperW").height(),
                "left": ( $(".m_wraper").width() - $(".wrapperW").width() ) / 2
            });
                document.getElementById(&#39;vid&#39; + Num).style.display = &#39;block&#39;;
                setTimeout(function () { document.getElementById(&#39;vid&#39; + Num).play(); }, 1000);
            }

        }
        document.getElementById(&#39;vid&#39; + 1).addEventListener("ended", end_playing, false);
        document.getElementById(&#39;vid&#39; + 1).addEventListener("pause", end_playing, false);
        document.getElementById(&#39;vid&#39; + 2).addEventListener("ended", end_playing, false);
        document.getElementById(&#39;vid&#39; + 2).addEventListener("pause", end_playing, false);
        document.getElementById(&#39;vid&#39; + 3).addEventListener("ended", end_playing, false);
        document.getElementById(&#39;vid&#39; + 3).addEventListener("pause", end_playing, false);
        function end_playing() {
            document.getElementById(&#39;vid&#39; + 1).style.display = &#39;none&#39;;
            document.getElementById(&#39;vid&#39; + 2).style.display = &#39;none&#39;;
            document.getElementById(&#39;vid&#39; + 3).style.display = &#39;none&#39;;

            $("#vid" + 1).css("width", "0%");
            $("#vid" + 2).css("width", "0%");
            $("#vid" + 3).css("width", "0%");
        }

Copy after login

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>

Copy after login

The above is the content of HTML5 actual combat and analysis of media elements (1. Introduction to video tags and audio tags). For more related content, please pay attention to the PHP Chinese website (www. php.cn)!