从零开始的HTML5之旅（二）

什么是HTML5？

---

  HTML5是W3C和WHATWG合作的结果，它将成为HTML、XHTML和HTML DOM的新标准。HTML5尚在完善，但是大部分现代浏览器已经支持HTML5了。

HTML5的一些规则

---

• 新特性基于HTML、CSS、DOM和JavaScript
• 更优秀的错误处理
• 更多取代脚本的标记
• HTML5独立于设备
• 开发进程对公众透明
• 减少对外部插件的需求

HTML5视频

---

  HTML5规定了一种Video元素，以此显示视频。

视频格式

  Video目前仅支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	—	3.5+	10.5+	5.0+	—
MPEG4	9.0+	—	—	5.0+	3.0+
WebM	—	4.0+	10.6+	6.0+	—

<video src="xxx.格式" controls="controls">此处写的内容供不支持video元素的浏览器显示</video>

  其中"controls"属性供添加播放、暂停和音量空间。

  你还可以在代码中添加宽度和高度属性。

  "src"属性中填写的是文件的地址。

  Video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器只会识别第一个可识别的格式。如果你的第一个source元素浏览器无法识别，那么浏览器将会继续识别第二个source元素，直到可识别。

<video width="200" height="200" controls="controls">
<source src="xx.ogg" type="video/ogg">
<source src="xx.MPEG4" type="video/MPEG4">
<source src="xx.WebM" type="video/WebM">
</video>

< video>标签的属性

---

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

用DOM控制video标签

---

  video标签同样拥有方法、属性和事件。

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canplayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

属性	描述
audioTracks	返回表示可用音轨的 AudioTrackList 对象
autoplay	设置或返回音频/视频中的当前播放位置（以秒计）
buffered	返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller	返回表示音频/视频当前媒体控制器的 MediaController 对象
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频/视频的 CORS 设置
currentSrc	返回当前音频/视频的 URL
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频/视频默认是否静音
defaultPlaybackRate	设置或返回音频/视频的默认播放速度
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的 MediaError 对象
loop	设置或返回音频/视频是否应在结束时重新播放
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted	设置或返回音频/视频是否静音
networkState	返回音频/视频的当前网络状态
paused	设置或返回音频/视频是否暂停
playbackRate	设置或返回音频/视频播放的速度
played	返回表示音频/视频已播放部分的 TimeRanges 对象
preload	设置或返回音频/视频是否应该在页面加载后进行加载
readyState	返回音频/视频当前的就绪状态
seekable	返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频/视频中进行查找
src	设置或返回音频/视频元素的当前来源
startDate	返回表示当前时间偏移的 Date 对象
textTracks	返回表示可用文本轨道的 TextTrackList 对象
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象
volume	设置或返回音频/视频的音量

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载音频/视频的当前帧时
loadedmetadata	当浏览器已加载音频/视频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时
waiting	当视频由于需要缓冲下一帧而停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>
            <button onclick="Play()">开始</button>
            <button onclick="Pause()">暂停</button>
            <button onclick="Big()">大</button>
            <button onclick="Normal()">中</button>
            <button onclick="Small()">小</button>
        </div>
        <br>
        <video id="video1" height="200" width="200">
            <source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
            无法显示
        </video>
    </div>
</body>
</html>
<script type="text/javascript">
    var id = document.getElementById("video1");

    function Play() {
        if (!id.Play) {
            id.play();
        }
    }

    function Pause() {
        if (!id.Pause) {
            id.pause();
        }
    }

    function Big() {
        id.width = 400;
    }

    function Small() {
        id.width = 200;
    }

    function Normal() {
        id.width = 300;
    }

</script>