• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

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

未分类 小辉 222次浏览 已收录 0个评论 扫描二维码

随着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(’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 代码



 

<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

小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明html5实战与剖析之媒体元素(video标签和audio标签简介)

喜欢 (0)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址