HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)

百变鹏仔 2个月前 (10-19) #H5教程

文章标签标签

随着html5的到来，flash在手机端全部不能得到支持，这就使一项以flash制作的音乐播放和视频播放只能用html5中的媒体标签video标签和audio标签来制作了。很恰巧的是，移动端对html5中的媒体标签video标签和audio标签支持的非常好。这就使html5在移动端很流行。

video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。两个标签的用法如下。

HTML代码

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

使用video标签和audio标签的时候，要包含src属性，指向要加载的媒体文件。还可以设置宽度(width)和高度(height)属性用来指定播放器大小。在加载视频内容期间显示一幅图像可以在poster属性指定图像的URI。另外标签中有controls属性，这个属性意味着浏览器应该显示UI控件，可以方便用户直接操作媒体。位于开始和结束标签之间的任何内容都是作为后备内容，在浏览器不支持这两种媒体元素的情况下显示。

正因为不是所有浏览器支持的媒体来源不一样，所以要用多个source标签进行分别编写。小例子如下。

立即学习“前端免费学习笔记（深入）”；

HTML代码

<!-- 音频标签 --><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>

支持video标签和audio标签的浏览器有Firefox 3.5+、Opera 10.5+、IE9+、Safari 4+、Chrome、iOS版Safari和Android版WebKit。

HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)就为大家介绍完了，媒体标签在HTML5中算是得到了很好的支持，所以用的比较多。更多有关HTML5的相关知识尽在梦龙小站，感谢大家的支持。

新添加的视频播放方法

JavaScript代码

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%");        }

HTML 代码

<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>

文章推荐

HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集