HTML5 基础（3）—— HTML5音视频详解

一、音视频基础知识

a	视频	音频
说明	连续的画面、特定格式编码、媒体流	特定格式编码，媒体流
web格式	mp4、ogv 、webm	mp3、ogg、wav

早期播放视频和音频需要使用flash，HTML5后使用video/audio，
但是苹果端和移动端是不支持flash的。

二、video/audio标签及其常用属性

常用的属性前面也有提过，这里在写一下

• controls 播放控制台
• autoplay 网页加载完成后自动播放
• loop 循环播放
• source
• preload
• poster（video）视频封面图片

ps：音视频src可以使用网络资源

（一）video/audio两种写法

src中可以写网络地址
写法1：

<video src="./video/demo.mp4" width="640px" loop autoplay>
    当前浏览器不支持video标签
</video>

写法2（可以兼容多种浏览器）：

<video width="640px" loop autoplay controls poster="./img/demo.jpg">
    <source src="./video/demo.mp4" type="video/mp4"/>
    <source src="./video/demo.ogv" type="video/ogv"/>
    <source src="./video/demo.webm" type="video/webm"/>
    当前浏览器不支持video标签
</video>

三、video/audio API

（一）video/audio API事件

要绑定事件的话原生js要on+event

编号	事件	触发条件
*	当音频/视频处于加载过程中时，会依次发生以下事件
1	loadstart	开始加载视频的元数据
2	durationchange	时长改变事件
3	loadedmetadata	当浏览器已加载音频/视频的元数据时触发
4	progress	请求视频事件
5	suspend	当浏览器刻意不获取媒体数据，延迟下载事件
6	loadeddata	视频数据已经加载事件
7	canplay	文件就绪可以开始播放
8	canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
*	其他
9	emptied	当目前的播放列表为空时
10	ended	当目前的播放列表已结束时
11	error	当在音频/视频加载期间发生错误时
12	play	开始播放视频时触发
13	playing	视频正在播放中触发
14	timeupdate	视频正在播放中会不断触发，播放位置改变事件
15	pause	当音频/视频已暂停时触发
16	volumechange	当音量已更改时
17	ratechange	当音频/视频的播放速度已更改时
18	seeked	进度条定位完成时触发
19	seeking	正在拖动视频进度条触发
20	stalled	当浏览器尝试获取媒体数据，但数据不可用时
21	waiting	当视频由于需要缓冲下一帧而停止
22	abort	当音频/视频的加载已放弃时

这些事件触发顺序在网络加载和本地加载是有区别的

例子

<video width="640px" loop controls poster="./img/demo.jpg" id="myVideo">
    <source src="./video/demo.mp4" type="video/mp4"/><!--里面改成网络路径就是网络加载-->
    <source src="./video/demo.ogv" type="video/ogv"/>
    <source src="./video/demo.webm" type="video/webm"/>
</video>
<script>
    var videoEvent = [
        "abort",    
        "canplay",
        "canplaythrough",   
        "durationchange",
        "emptied",
        "ended",    
        "error",    
        "loadeddata",
        "loadedmetadata",   
        "loadstart",    
        "pause",    
        "play", 
        "playing",  
        "progress", 
        "ratechange",   
        "seeked",   
        "seeking",  
        "stalled",  
        "suspend",  
        "timeupdate",   
        "volumechange", 
        "waiting"   
    ];

    var videoEle = document.getElementById("myVideo");

    videoEvent.forEach(function(event){
    
    
        videoEle["on"+event] = function(){
    
    
            console.log(event);
        }
    });
</script>

本地加载

网络加载

网络加载会不断的请求媒体流，所以会不断触发progress和suspend事件。

（二）video.audio API常用方法

方法	说明
load()	加载
play()	播放视频
pause()	暂停视频

<video id="myVideo" width="600px">
    <source src="./video/demo1.mp4" type="video/mp4">
    <source src="./video/demo1.webm" type="video/webm">
    <source src="./video/demo1.ogg" type="video/ogg">
    当前浏览器版本过低不支持HTML5标签
</video>
<button id="start">开始</button>
<button id="stop">暂停</button>
<script type="text/javascript">
    var videoEle  =document.getElementById("myVideo");
    //视频播放按钮
    document.getElementById("start").onclick = function(){
    
    
        videoEle.play();        
    }
    //视频暂停按钮
    document.getElementById("stop").onclick = function(){
    
    
        videoEle.pause();
    }
</script>

（三）video/audio API常用属性

属性	说明
currentSrc	视频地址
duration	视频总时长（秒）
currentTime	视频当前时间（可以设置）秒
volume	当前音量（可以设置）百分比
buffered	当前缓冲量（videoObj.buffered.end(0)）
paused	是否暂停
ended	是否结束
muted	是否静音
playbackRate	视频播放速率（可以设置）

<video id="myVideo" controls width="600px">
    <source src="./video/demo1.mp4" type="video/mp4">
    <source src="./video/demo1.webm" type="video/webm">
    <source src="./video/demo1.ogg" type="video/ogg">
    当前浏览器版本过低不支持HTML5标签
</video>
<button id="start">开始</button>
<button id="stop">暂停</button>
<script type="text/javascript">
    var videoEle  =document.getElementById("myVideo");

    document.getElementById("start").onclick = function(){
        videoEle.play();        
    }
    document.getElementById("stop").onclick = function(){
        videoEle.pause();
    }

    //绑定video的相关事件
    //元数据被加载时触发
    videoEle.onloadedmetadata = function(){
        console.log