HTML5多媒体播放video元素

在HTML5问世之前，要在网络上展示视频、音频和动画，除了使用第三方自主开发的播放器外，使用得最多的工具

应该是FLASH了，便它们都需要在浏览器中安装各种插件才能使用，而且有时速度很慢。HTML5的出现使这一局面得到改观。在HTML5中，提供了音频视频的标准接口，通过HTML5中的相关技术，视频、动画、音频等多媒体播放再也不需要安装插件了，只需要一个支持HTML5的浏览器就可以了。

在介绍HTML5的video元素和 autio元素之前，让我们先来回忆一下在HTML4页面中是如何播放视频和音频数据的，
如下面代码:

<object classid="clasid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="340" codebase="swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash"
width="425"
height="340"
src="a.swf"
allowscriptacess="always"
allowfullscreen="true">
</embed>
</object>

很明显，这段代码具有三个缺点：

代码冗长且丑陋。
需要使用Flash插件。如果用户滑安装该插件，这段视频就不能看了，画面上会出现一片空白。
需要结合使用比较复杂的object元素与embed元素，并且为object元素添加许多属性和参数，代码的书写比较烦琐。

HTML5 页面中播放视频和音频的方法

在HTML5中，新增了两个元素——video元素与audio元素，其中video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。使用这两个元素，就不需要再使用其他插件了，只要使用支持HTML5的浏览器就可以了，同时在开发的时候也不再需要书写复杂的object元素和embed元素了。

现在，Safari 3以上、Firefox 4以上、Opera 10以上，以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持。

这两个元素的使用方法都很简单，首先以audio元素为例，只要把播放音频的URl地址指定给该元素的src属性就可以了，如下所示。

<audio src="http://www.devdo.net/demo/test.mp3">
您好的浏览器不支持audio元素
</audio>

通过这种方法，可以把指定的音频数据直接嵌入到网页上，其中“您的浏览器不支持audio元素”为在不支持audio元素的浏览器中所显赫的替代文字。

video元素的使用方法也很简单，只要设定好元素的长、宽等属性，并且把播放视频的URL地址指定给该元素的src属性就可以了，如下所示。

<video widht="500" height="300" src="http://wwww.devdo.net/demo/test.mp4>
您好的浏览器不支持video 元素
</video>

另外，你还可以通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，它会从上往下判断自己对该播放格式是否支持，直到选择到自己支持的播放格式为止。source元素的使用方法如下所示。

<video>
<source src='test.ogv' type='video/ogg; codecs="thora, vorbis"'>
<source src='test.mov' type="'video/quicktime'>
</video>
1. AddType video/ogg .ogv
2. AddType video/mp4 .mp4
3. AddType video/webm .webm

source元素具有几个属性：src属性是指播放媒体的URL地址；type表示媒体类型，甚属性值为播放文件的MIME类型，该属性中的codes参数表示所使用的媒体编码格式。type属性是可选属性，但最好不要省略type属性，否则浏览器会在从上往下选择时无法判断自己能不能播放而先行下载一小段视频（或音频）数据，这样就有可能浪费带宽和时间了。

因为各个浏览器对于各种媒体的媒体类型及编码格式的支持情况都各不相同，所以使用source元素来指定多种媒体类型是非常有必要的。

接下来，我们来具体看一下各浏览器对于编码格式的支持情况。

IE 9
支持H.264视频编码格式和vp8视频编码格式。
支持mp3音频编码格式和WAV音频编码格式。
Firefox 4以上
支持Ogg Theora视频编码格式和vp8视频编码格式。
支持Ogg vorbix音频编码格式和WAV音频编码格式。
Opera 10以上
支持Ogg Theora视频编码格式和vp8视频编码格式。
支持Ogg vorbix音频编码格式和WAV音频编码格式。
Chrome 5以上
支持H.264视频编码格式、Ogg Theora视频编码格式和vp8视频编码格式。
支持Ogg vorbix音频编码格式和WAV音频编码格式。

HTML5多媒体播放video元素相关推荐

用于播放视频的Html5元素是,HTML5多媒体播放video元素与audio元素详解
在HTML5问世之前,要在网络上展示视频.音频和动画,除了使用第三方自主开发的播放器外,使用得最多的工具应该是FLASH了,便它们都需要在浏览器中安装各种插件才能使用,而且有时速度很慢.HTML5的出 ...
html5的video元素学习手札
为了监控移动端视频播放的情况,研究了一下 html5 <video> 标签的属性与事件触发,及其在各系统和各个浏览器的兼容情况属性与事件理解清楚属性和事件,才能更好的使用 video ...
html5音乐播放时间监测,【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）...
//获取视频DOM元素 var myVideo = document.getElementById("myVideo"); myVideo.oncanplay = function ...
Html5中的Video元素使用方法
现在互联网视频大都使用Flash来实现.但是不同的浏览器可能使用不同的插件.在HTML5中则提供了一个统一的方式来展示视频内容.HTML5 video在Internet Explorer 9, Fir ...
[html]HTML5如何隐藏video元素的控制栏、全屏按钮？
[html]HTML5如何隐藏video元素的控制栏.全屏按钮? 将<video width="800px" height="400px" id=&quo ...
移动端HTML5＜video＞浏览器劫持视频播放视频激活播放后强制全屏视频无法被其他元素覆盖
浏览器劫持视频播放.视频无法被其他元素覆盖 Html5 video 多媒体标签 <videoid="loginVideo"mutedautoplayloop:src=&quo ...
html5 dom video,HTML5 / HTML5 video - 使用 DOM 进行控制 - 汇智网
HTML5 < video > - 使用 DOM 进行控制 HTML5 < video > 和 < audio > 元素同样拥有方法.属性和事件. < vid ...
html5的vidoe标签,HTML5的Video标签的属性,方法和事件
大多数的视频通过插件(例如flash)来播放,然而并非所有的浏览器都支持此类插件.HTML5规定了一种通过video来包含视频的标准方法.但是IE8及以下版本不支持video. HTML5的video ...
HTML5 视频 Video
文章目录 HTML5 视频 Video Web站点上的视频浏览器支持 HTML5 (视频)- 如何工作视频格式与浏览器的支持视频格式 HTML5 \<video> - 使用 DOM ...

HTML5多媒体播放video元素

HTML5 页面中播放视频和音频的方法

HTML5多媒体播放video元素相关推荐

最新文章

热门文章