HTML5视频

HTML5视频及应用

1.HTML5视频

在网页上显示视频大多是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

video 目前支持的格式有:

video格式	IE	Firefox	Chrome	Opera	Safari
Ogg	不支持	版本3.5以上	版本5.0以上	版本10.5以上	不支持
MPEG 4	版本9.0以上	不支持	版本5.0以上	不支持	版本3.0以上
WebM	不支持	版本4.0以上	版本6.0以上	版本10.6以上	不支持

2.在HTML5中显示视频

<video>标签用来在网页中插入视频；

<video src="../../../Vedio/movie.ogg" controls="controls">
此浏览器不支持
</video>

<video>与 </video>之间插入的内容是供不支持 video 元素的浏览器显示的：

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

<video controls="controls">
    <source src="mov_bbb.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    此浏览器不支持
</video>

3.<video>标签的属性

<video>标签的属性如下：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

HTML 5 Video + DOM

为视频创建简单的播放/暂停以及调整尺寸控件

<button onclick="playPause()"glt;播放/暂停></button>
<button onclick="makeBig()"glt;大></button>
<button onclick="makeNormal()"glt;中></button>
<button onclick="makeSmall()"glt;小></button>
<video id="video1" width="420" style="margin-top:15px;">
    <source src="../../../Vedio/movie.ogg" type="video/ogg"/>
    <source src="../../../Vedio/movie3.mp4" type="video/mp4" />
    此浏览器不支持
</video>

<script type="text/javascript">

									    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;

									    } 

									</script>