html5概述视频,HTML5 视频

Web上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数的视频都是通过插件(例如flash)来显示的。然而，并非所有的浏览器都有同样的插件。

HTML5通过video元素来包含视频的标准方法。

当前video元素支持三种视频格式：

视频格式(^下表可能在竖屏手机中适配有问题 )

|格式|IE|FireFox|Opera|Chrome|Safari

|---|---|---|---|---|---|---|

|Ogg|No|3.5+|10.5+|5.0+|No|

|MPEG 4|9.0+|No|No|5.0+|3.0+|

|WebM|No|4.0+|10.6+|6.0+|No|

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如何工作

如果需要在HTML5中显示视频，需要一下代码

例子：

Your browser does not support the video tag.

要确保safari浏览器能够播放，视频文件需要是MP4文件格式

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式.

例子：

Video

//适配兼容性

//加载MP4文件路径

Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。

标签的属性(^下表可能在竖屏手机中适配有问题 )

属性

值

描述

autoplay

autoplay

如果出现该属性，则在视频就绪后就开始播放

controls

controls

如果出现该属性，则向用户展示控件，例如播放按钮

height

px

设置视频播放器的高度

loop

loop

如果出现该属性，则在视频播放结束后再次开始播放该视频

preload

preload

如果出现该属性，则在视频页面加载时进行加载，并预备播放。如果使用了autoplay，则忽略该属性

src

url

要播放视频的url

width

px

设置视频播放器的宽度

Video + DOM

HTML5 元素使用DOM进行控制，元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停和加载等事件。其中的属性(时长、音量)可以被读取和设置。其中DOM事件能够通知您，比方说，元素开始播放、已暂停、已停止等等。

例子：

播放/暂停

大

中

小

Your browser does not support HTML5 video.

var myVideo=document.getElementById("video1");

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function makeBig()

{

myVideo.width=560;

}

function makeSmall()

{

myVideo.width=320;

}

function makeNormal()

{

myVideo.width=420;

}

代码演示页面：[Click me](http://www.w3school.com.cn/tiy/t.asp?f=html5_video_dom)

上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

* **HTML5 的方法、属性以及事件**

下面列出了大多数浏览器支持的视频方法、属性和事件：


**注意：**在这些属性中，只有videoWidth 和 videoHeight是可以直接使用的，其他的属性，都需要视频元数据加载后才可以使用。

—谢谢W3C提供的学习资源