HTML5实战与剖析之媒体元素
随着HTML5的到来，flash在手机端全部不能得到支持，这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。很恰巧的是，移动端对HTML5中的媒体标签video标签和audio标签支持的非常好。这就使HTML5在移动端很流行。
video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。两个标签的用法如下。
HTML代码
1.<!-- 视频标签 --> 2.<video src="meng.ogg" id="myVideo">视频不支持</video> 3. 4.<!-- 音频标签 --> 5.<audio src="long.mp3" id="myAudio">音频不支持</audio>
使用video标签和audio标签的时候，要包含src属性，指向要加载的媒体文件。还可以设置宽度(width)和高度(height)属性用来指定播放器大小。在加载视频内容期间显示一幅图像可以在poster属性指定图像的URI。另外标签中有controls属性，这个属性意味着浏览器应该显示UI控件，可以方便用户直接操作媒体。位于开始和结束标签之间的任何内容都是作为后备内容，在浏览器不支持这两种媒体元素的情况下显示。
正因为不是所有浏览器支持的媒体来源不一样，所以要用多个source标签进行分别编写。小例子如下。
HTML代码
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>
支持video标签和audio标签的浏览器有Firefox 3.5+、Opera 10.5+、IE9+、Safari 4+、Chrome、iOS版Safari和Android版WebKit。
HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)就为大家介绍完了，媒体标签在HTML5中算是得到了很好的支持，所以用的比较多。更多有关HTML5的相关知识尽在梦龙小站，感谢大家的支持。
新添加的视频播放方法
JavaScript代码
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 代码
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> 郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
