video 事件及 WebVTT 字轨

[TOC]

定义一个video, 用于播放视频
#####示例
```html
video src="source/mov_bbb.mp4" poster="source/rabbit.png" loop>
	
	<source type="video/mp4" src="./source/mov_bbb.mp4" />
	
	<track type="text/vtt" kind="subtitles" src="./source/rabbit_subtrack.vtt" default  >
video>

<div class="ctl">
	<input type="button" value="播放" />
	<input type="button" value="快进x1" />
	<input type="button" value="静音" />
</div>
```
```CSS
<style>
	video::cue {
		background:transparent;    /* 背景透明 */
		text-shadow:1px 1px 4px #000; /* 阴影 */
		color: red;
		font-size: 20px;
	}
</style>
```
```javascript
<script>
	var vd = document.querySelector('video')

// 获取播放器的所有控制按钮
	var btns = document.querySelectorAll(".ctl input")

// 为'播放'按钮添加点击事件
	btns[0].onclick = function () {
		if (vd.paused) {
			vd.play()
			this.value = '暂停'
		} else {
			vd.pause()
			this.value = '播放'
		}
	}

// 为'快进'按钮添加点击事件
	btns[1].onclick = function () {
		if (vd.playbackRate >= 8) {
			vd.playbackRate = 1
		} else {
			vd.playbackRate *= 2
		}
		this.value = '快进(x' + vd.playbackRate + ')'
	}

// 为'静音'按钮添加点击事件
	btns[2].onclick = function () {
		vd.muted = !vd.muted
		console.log('muted:' + vd.muted)
		this.value = vd.muted ? '取消静音' : '静音'
	}
</script>
```
    注:
        字幕显示需要在服务器中运行页面,用文件路径播放不会显示字幕
    
#####1.事件
        事件名称            功   能
        abord               当视频加载被异常终止时产生该事件
        canplay             当浏览器可以开始播放该音视频时产生该事件
        canplaythrough      当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
        durationcahnge      当媒体的总时长改变是产生该事件
        emptied             当播放列表为空时产生该事件
        ended               当播放列表结束时产生该事件
        error               当加载媒体发生错误时产生该事件
        loadeddata          当加载媒体数据时产生该事件
        loadedmetadata      当收到总时长,分辨率和字轨等metadata时产生该事件
        loadstart           当开始查找媒体数据时产生该事件
        pause               当媒体暂停时产生该事件
        play                当媒体播放时产生该事件
        playing             当媒体从因缓冲而引起的暂停和停止,恢复到播放时产生该事件
        progress            当获取到媒体数据时产生该事件
        ratechange          当播放倍数改变时产生该事件
        seeked              当用户完成转跳时产生该事件
        seeking             当用户正在执行跳转时产生该事件
        stalled             当试图获取媒体数据, 但数据还不可用时产生该事件
        suspend             当获取不到到媒体数据时产生该事件
        timeupdate          当前播放位置发生改变时时产生该事件
        valumechange        当前音量发生改变时时产生该事件
        vaiting             当视频因缓冲下一帧而停止时产生该事件

#####2. WEBVTT 字幕(web video text tracks)网络视频文本轨道
(<a target='_blank' herf="http://dev.w3.org/html5/webvtt">http://dev.w3.org/html5/webvtt</a>)
        
        例: test.vtt
        -------------------------------
        WEBVTT

Cue-1
        00:00:00.000 --> 00:00:05.000
        这里显示0-5秒的视频字幕

Cue-2
        00:00:06.000 --> 00:00:10.000
        这里显示6-10秒的视频字幕
        -------------------------------

WEBVTT与html5的 track 标签配合,可以给音频或视频等媒体资源添加字幕,标题和其它描述信息.

文件中长以"WEBVTT"开后(也可以添加直接顺序标记), 紧接着是一个空行, 然后是文件主题内容.
WEBVTT 文件的主题内容被称为"Cues", 一个 WEBVTT 文件包含一个或多个"Cue",

Cue语法:

01 [idstring]
	02 [hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms
	03 Test string

每个Cue都有唯一的ID, ID为可选,对事件的设置,必须严格遵守语法规范,时分秒都是两位数字, 不足的前边加"0"补充,毫秒必须为三位数字.
代码第三行为内容部分,可以为一行或多行

为WebVTT设置样式:
```css
/* 设置字幕样式 */
video::cue {
	background::transparten;    /* 背景透明 */
	text-shadow:0px 0px 2px #fff; /* 阴影 */
	color: white;
	font-size: 20px;
}
```
[END]

video 事件 及 WebVTT 字轨

video 事件及 WebVTT 字轨