


HTML5 actual combat and analysis of media elements (1. Introduction to video tags and audio tags)
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>
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>
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('iPhone') > -1 || u.indexOf('Mac') > -1) { //苹果 $("#vid" + Num).css("width", "100%"); document.getElementById('vid' + Num).style.display = 'block'; document.getElementById('vid' + Num).play(); } else { //安卓 $("#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" + 1).css("width", "0%"); $("#vid" + 2).css("width", "0%"); $("#vid" + 3).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>
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)!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
