html5笔记3 音频和视频

1、容器

不论是音频文件还是视频文件，实际上都是一个容器文件（类似于zip文件）。容器中包含了音频轨道、视频轨道（针对视频）和一些元数据。视频播放的时候，音频轨道和视频轨道是绑定在一起的；元数据包含了视频的封面、标题、子标题和字幕等相关信息。

2、解码器

音频和视频的编码/解码器是一组算法，用来对一段特定音频或视频流进行编码解码的。编码是为了压缩文件体积，解码是把编码过的数据重组为原始的媒体数据。

3、html5的局限性

1）不支持流失音频和视频。html5视频规范中还没有比特率切换标准，因此对视频的支持只限于加载的全部媒体文件。
2）html5的媒体受到HTTP跨域资源共享的限制。
3）全屏视频无法通过脚本控制。从安全性将，脚本控制全屏操作是不合适的。

4、跨域资源共享（CORS）

跨域资源共享是一种网络浏览器的技术规范，为web服务器定义了一种允许网页从不同的域访问其资源，但这种访问时被同源策略所禁止的。CORS定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求，更加的灵活。CORS就是为了让AJAX可以实现可控的跨域访问而生的。

以往的解决方案：可以使用JSONP、Flash或者服务器中转的方式来实现。
1、JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS

5、浏览器支持检测

1）直接用脚本动态创建视频元素，然后检测特定函数是否存在

var hasVideo = !!(document.createElment('video').canPlayType);

2）可以再audio或者video元素中放入备选内容，浏览器不支持的话，就在元素对应的位置上显示备选内容；或者直接把flash插件方式播放视频的代码作为备选内容。

<video src="movie.ogg" width="320" height="240" controls="controls">
   Your browser does not support the video tag.
</video>

6、createElment方法

document.createElment()方法是js的固有的方法，可以创建任何一个web标签。

<script type="text/javascript">
    var board = document.getElementById("board");
    var e = document.createElement("input");
    e.type = "button";
    e.value = "这是测试加载的小例子";
    var object = board.appendChild(e);
</script>

<script type="text/javascript">
    var board = document.getElementById("board");
    var e2 = document.createElement("select");
    e2.options[0] = new Option("加载项1", "");
    e2.options[1] = new Option("加载项2", "");
    e2.size = "2";
    var object = board.appendChild(e2);
</script>

<script type="text/javascript">
    var board = document.getElementById("board");           
    var e3 = document.createElement("input");
    e3.setAttribute("type", "text");
    e3.setAttribute("name", "q");
    e3.setAttribute("value", "使用setAttribute");
    e3.setAttribute("onclick", "javascript:alert('This is a test!');");           
    var object = board.appendChild(e3);
</script>

可以通过加载对象的属性来设置，参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。

7、audio

source元素：可以声明多个媒体文件数据源。让浏览器根据自身播放能力自动选择，挑选最佳的来源进行播放。
对于来源，浏览器会按照声明顺序判断，如果有多种，会选择支持的第一个来源。

还有一种暗示浏览器应该使用哪种媒体来源的方式—type特性，如果源文件和type特性中指定的类型不匹配，浏览器就会拒绝播放。

<audio controls>
    <source src="johann_sebastian_bach_air.ogg" type="audio/ogg; codecs=vorbis">
    <source src="johann_sebastian_bach_air.mp3" type="audio/mpeg">
    An audio clip from Johann Sebastian Bach.
  </audio>

autoplay：不需要任何用户交互，音频视频文件就会在加载完成后自动播放。

如果内置的控件不适应用户界面的布局，或者希望使用默认控件中没有的条件或者动作来控制音频或视频文件，可以使用内置的javaScript函数和特性。

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

<script type="text/javascript">
    function toggleSound() {
        var music = document.getElementById("clickSound");
        var toggle = document.getElementById("toggle");

        if (music.paused) {
           music.play();
           toggle.innerHTML = "Pause";
        } else {
           music.pause();
           toggle.innerHTML ="Play";
        }
    }
</script>

8、video

video元素时可以被canvas函数调用的（这个特性是audio所没有的）。

video和canvas结合的实例：

function updateFrame() {
   var frameWidth = 100;
   var frameHeight = 75;
   var frameRows = 4;
   var frameColumns = 4;
   var frameGrid = frameRows * frameColumns;
   var frameCount = 0;

   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;
   ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);

   frameCount++;
}

鼠标悬停播放视频：

<video id="movies" οnmοuseοver="this.play()" οnmοuseοut="this.pause()" autobuffer="true" width="400px" height="300px">
    <source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>