HTML-Audio/Video

简介：

容器：不论是音频还是视频文件，实际上都是容器文件；
- 视频文件包含了音频轨道、视频轨道和其他一些元数据；
- 视频文件播放时，音频轨道和视频轨道是绑定在一起；元数据包含了该视频的封面、子标题、字幕等信息；
主流视频容器支持格式：
- Audio Video Interleave(.avi)
- Flash Video(.flv)
- MPGE4(.mp4)
- Mattroska(.mkv)
- Ogg(.ogv)
编/解码器：
- 一组算法，用来对一段特定视频或音频进行解码和编码；
- 由于一些原因，当前没有任意一种编解码器可以被所有浏览器厂商支持；
- 目前HTML5规范中并没有对编解码器做要求；

浏览器支持：

<video src='../test.webm' controls>
    <object data='videoplayer.swf' type='application/x-shockwave-flash'>
	<param name="movie" value="video.swf">
   </object>
</video>

以插件方式播放视频的代码为备选内容；不过考虑到各种浏览器，可能需要多种视频格式；

WebVTT文件： 一个WebVTT（.vtt）文件是一个简单的纯文本，里面包含了几种类型的视频信息：

字幕：关于对话的转译或者翻译。
标题：类似于标题，但是还包括音响效果和其他音频信息。
说明：预期为一个单独的文本文件，通过屏幕阅读器描述视频。
章节：旨在帮助用户浏览整个视频。
元数据：默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。

test.vtt
---------
1
00:00:01.000 --> 00:00:18.000
At the left we can see...


test.html
------------
<video src='../test.webm' controls>
    <track src="test.vtt" kind="subtitles" srclang="en" label="English" />  
</video>

理解媒体元素：

声明媒体元素：audio/video ; controls //如果不指定controls,浏览器将无法显示通用的控件，可用在如背景音乐；
source元素：用于备用声明包含来源
```
<audio controls>
    <source src = 'test.ogg'>
    <source src = 'test.mp3'>
</audio>
```
来源列表的顺序，最好按照用户由高到低或者服务器消耗由低到高；　　
媒体的控制：
- autoplay:自动播放，在不设置controls的情况下设置，如广告。//注意不是每种设备都支持自动播放，IOS就不支持；
- 常用控制函数：load()、play()、pause()、canPlayType()；
- 只读媒体特性：durationo、paused、ended、startTime、error......
- 可用脚本控制的特性值：autoplay、 loop、 muted...............

使用audio

设置背景音乐：

<body>
	<audio id='musci'>
	      <source src='test.ogg'>	
	      <source src='test.mp3'>	
	</audio>

	<button id='toggle'  onclick='toggleSound()'>Play</button>
</body>

<script type="text/javascript">
	function toggleSound() {
		var music = document.getElementById('musci');
		var toggle = document.getElementById('toggle');
		if(music.paused) {
			music.play();
			toggle.innerHTML = 'Pause';
		} else {
			music.pause();
			toggle.innerHTML = 'Play';
		}
	}
</script>

使用video

额外特征
- poster：视频加载前的内容图片url地址
- width/height:设置尺寸或读取设置的尺寸；
- videoWidth/videoHeight:返回视频固有宽高；只读

创建一个视频时序查看器：

<body>
	<video src='./test.webm' controls id='movies' autoplay oncanplay='startVideo()' onended='stopTimeline()'>
		<object data='videoplayer.swf' type='application/x-shockwave-flash'>
			<param name="movie" value="video.swf">
		</object>
	</video>

	<canvas id='timeline' width='400px' height='300px'>
		
	</canvas>
</body>

<script type="text/javascript">
//设置帧更新的间隔
	var updateInterval = 5000;

//时序中帧的尺寸	
	var frameWidth = 100;
	var frameHeight = 75;

//时序的总帧数
	var frameRows = 4;
	var frameColumns = 4;
	var frameGrid = frameRows * frameColumns;	

//当前帧
	var frameCount = 0;

//播放完后取消计时器
    var intervalId;
	var videoStarted = false;

	function startVideo() {
		//确保第一次播放才触发
		if(videoStarted) {
			return
		}
		videoStarted = true;

		updateFrame();
		intervalId = setInterval(updateFrame, updateInterval);

		var timeline = document.getElementById('timeline');
		timeline.onclick = function(evt) {
			var video = document.getElementById('movies');
            //计算出第几个，0开始计算
			var offX = evt.layerX;
			var offY = evt.layerY;
			var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
			clickedFrame += Math.floor(offX / frameWidth) ;
            
			var totalTimes = Math.floor(frameCount / 16) * 16 + clickedFrame;
			if(clickedFrame > (frameCount % 16)) {
				totalTimes -= 16;
			}
			
			video.currentTime = totalTimes * updateInterval / 1000;
		}
	}

//把帧绘制到画布上
	function updateFrame() {
		var video = document.getElementById('movies');
		var timeline = document.getElementById('timeline');
       
        var ctx = timeline.getContext('2d');
        //当前播放位置
        var framePosition = frameCount % frameGrid;
        var frameX = (framePosition % frameColumns) * frameWidth;
        var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
        //canvas的绘制程序可以将视频源当作图像绘制
        ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);

        frameCount++;
	}
	function stopTimeline() {
		clearInterval(intervalId);
	}

</script>

获取当前时间video.currentTime;
当前加载可播放事件：oncanplay;
当前播放结束事件：onended;

一些其他设置例子：

<video src='./test.webm' controls id='movies' autoplay onmouseover='this.play()'onmouseout='this,pause()'>
       <object data='videoplayer.swf' type='application/x-shockwave-flash'>
	      <param name="movie" value="video.swf">
       </object>
</video>