8 HTML5中新增多媒体播放元素

8 HTML5中新增多媒体播放元素

在HTML5之前,要在网站上展示视频、音频、动画等多媒体信息,除了使用第三方自主开发的播放器之外, 使用的最多的工具应该算是FLASH了, 但是它们都需要在浏览器中安装各种插件才能使用, 有时速度很慢。
HTML5的出现使这一局面得到了改观。在HTML5中,提供了音频的标准接口,多媒体播放再也不需要安装插件了, 只需要一个支持HTML5的浏览器就可以了。
介绍video元素和audio两个HTML5新增加的元素, 它们分别用来处理视频与音频数据。目前Safari 3以上、Firefox 4以上、Opera 10以上,以及时Google chrome 3.0以上的浏览器都实了对这两个媒体元素的支持。以audio元素为例,只要把播放视频的url地址指定给该元素的src属性就可以了。

18.png
19.png
20.png

还有一些属性、一些方法和多个事件可用,但需要结合JavaScript来实现一些特定的效果。例如,通过error属性可以处理出现的错误等,使用networkState属性读取当前网络状态。使用play方法来播放媒体,使用load方法重新载入媒体进行播放等,通过timeupdate事件来通知当前播放位置的改变,再结合JavaScript来显示当前的播放进度等。

test.html

<!doctype html>
<meta charset="utf-8">

<!-- audio controls autoplay>
    <source src="test.mp3" type="audio/mp3"/>
    <source src="test.ogg" type="audio/ogg"/>
    <source src="test.wav" type="audio/wav"/>

    你的浏览器不支支持媒体格式!
</audio -->

<video controls autoplay loop width="500" height="200" poster="test.jpg">
    
    
    <source src="test.webm" type="audio/webm"/>
    <source src="test.ogg" type="audio/ogg"/>

    你的浏览器不支支持媒体格式!
</video>

3.html

<!doctype html>
<meta charset="utf-8">
<!--视频标签-->
<video src="test.webm" controls loop width="1600" height="1000" >
    您的破浏览器不支持视频video标签
</video>
<!--完整视频格式-->
<video controls>
    <source src="test.webm" type="video/webm">
    <source src="test.ogg" type="video/ogg">
    您的破浏览器不支持视频video标签
</video>

2.html

<!doctype html>
<meta charset="utf-8">
<!--音频标签-->
<audio src="_WStyle.mp3" controls >您的浏览器不支持音频功能</audio>
<hr>

<!--完整音频格式-->
<audio controls >
    <source src="_WStyle.mp3" type="audio/mp3" >
    <source src="_WStyle.ogg" type="audio/ogg" >
    <source src="_WStyle.wav" type="audio/wav" >
    您的浏览器不支持音频功能
</audio>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容