9.Video视频
1.Video视频
1.今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
2.HTML5 规定了一种通过 video 元素来包含视频的标准方法。
3.Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素。
2.HTML5（视频）工作
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
1.<video> 元素提供了播放、暂停和音量控件来控制视频。
2.width 和 height 属性控制视频的尺寸。
3.<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
4.<video> 元素支持多个 <source> 元素。 <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
3.视频格式
1.<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。
4.使用 DOM 进行控制
1.<video> 和 <audio> 元素同样拥有方法、属性和事件。
2.<video> 和 <audio>元素的方法、属性和事件可以使用 JavaScript 进行控制。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
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>
</body>
</html>
5.<track>标签
1.<track> 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道，也就是字幕，字幕格式有 WebVTT 格式（.vtt 格式文件）。
<video width="320" height="240" controls>
<video controls
src="/video/php/friday.mp4">
<track default
kind="captions"
srclang="en"
src="/video/php/friday.vtt" />
抱歉，您的浏览器不支持嵌入视频！
</video>
</video>
①controls 属性设置或返回浏览器应当显示标准的视频控件。
当使用该属性时，它指定了显示视频控件。
视频控件包含：播放、、暂停、进度条、音量、全屏切换（供视频）、字幕（当可用时）、轨道（当可用时）。
②default ：规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
kind：规定文本轨道的文本类型。
label：规定文本轨道的标签和标题。
src：必需的。规定轨道文件的 URL。
srclang：规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”，则该属性是必需的。