HTML5 _ HTML 视频

HTML 视频

使用 <video> 元素来播放视频

在HTML5以前，网页中播放视频大多是通过浏览器插件（如Adobe Flash Player）的方式来播放。而 HTML5 的<video>元素则定义了一种新的标准方式来向网页中插入视频。

HTML5的<video>的方式，是当今以及未来的主流。

浏览器兼容性

video元素的浏览器兼容性很好，不支持video元素的浏览器可以去死了；下表是每种浏览器支持video元素的最低版本：

元素
<video>	4.0	9.0	3.5	4.0	10.5

HTML <video> 元素

<video>元素中可能会有不只1个<source>元素，source元素可指出流媒体的来源、格式等信息，浏览器则会以video元素中可以被兼容识别读取的第1个source元素为准，其他的都会忽略。如下例所示：

<video width="192" height="144" controls>
  <source src="https://logo.zhuanfou.com/zhuan.mp4" type="video/mp4">
  <source src="https://logo.zhuanfou.com/zhuan.ogg" type="video/ogg">
  小贼，你的浏览器太落后了，该换浏览器啦 —_—
</video>

运行一下

要点1：video元素如果添加controls属性，视频则会带有播放、暂停、音量这些控制按钮；
要点2：通常情况下，video元素应该被设置好width和height属性；
要点3：如果浏览器不兼容video元素，则会显示出video元素内预设的提示文字；（对于用过时浏览器，我们要包容，与委婉劝解，千万别上去就骂“侬脑子瓦特啦”）

HTML <video> 自动播放

给<video>元素添加上autoplay属性，视频即可自动播放。
备注：移动设备上autoplay属性是没用的，如iphone和ipad上autoplay属性是失效的。

<video width="192" height="144" autoplay>
  <source src="https://logo.zhuanfou.com/zhuan.mp4" type="video/mp4">
  <source src="https://logo.zhuanfou.com/zhuan.ogg" type="video/ogg">
  小贼，你的浏览器太落后了，该换浏览器啦 —_—
</video>

运行一下

HTML视频 - 浏览器兼容性

在HTML5中，有三种被支持的视频格式，分别是：MP4、WebM、Ogg
不同的浏览器对不同的视频格式的支持如下：

浏览器	MP4	WebM	Ogg
IE	支持	不支持	不支持
Chrome	支持	支持	支持
FireFox	支持	支持	支持
Safari	支持	不支持	不支持
Opera	支持（从Opera 25开始）	支持	支持

HTML视频 - Media Type（媒体类型）

Media Type(媒体类型)在一些协议的消息投中被称作“Content-Type”；HTML视频的媒体类型如下表所示：

视频格式	媒体类型（消息头）
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML <video> - 方法、属性和事件

HTML5为<video>元素设计很多独具特色的方法、属性和事件。比如可以控制视频的加载、播放、暂停、调节音量等。如下例所示：

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大窗口</button>
  <button onclick="makeSmall()">缩小窗口</button>
  <button onclick="makeNormal()">正常大小</button>
  <br><br>
  <video id="video-zhuan" width="192">
    <source src="https://logo.zhuanfou.com/zhuan.mp4" type="video/mp4">
    <source src="https://logo.zhuanfou.com/zhuan.ogg" type="video/ogg">
    小贼，你的浏览器太落后了，该换浏览器啦 —_—
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video-zhuan"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 384; 
} 

function makeSmall() { 
    myVideo.width = 100; 
} 

function makeNormal() { 
    myVideo.width = 192; 
} 
</script> 

</body> 
</html>

运行一下

了解更多<video>属性，请查看HTML5 Audio/Video DOM参考手册(待续)。

HTML5 视频标签

标签	描述
`<video>`	定义一个视频元素
`<source>`	当作媒体元素audio和video的子元素来使用，用来定义媒体源文件信息
`<track>`	当作媒体元素audio和video的子元素来使用，用来定义字幕

HTML 视频

推广