【小结】HTML5音视频video和audio

video标签是HTML5新增的用于定义视频的标签
在标签之间放置文本内容，这样老的浏览器就在访问时就会显示文本内容。

支持格式

mp4、webm、ogv

• safari浏览器和IE9以上浏览器只支持mp4
• IE8以下不支持
• IE9以上浏览器可以使用source标签支持解决兼容性

如果播放失败会继续下一个，全都不行则提示文本

• WebM由Google提出，是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matroska（即 MKV）容器格式为基础开发的新容器格式，里面包括了VP8影片轨和 Ogg Vorbis 音轨，其中Google将其拥有的VP8视频编码技术以类似BSD授权开源，Ogg Vorbis 本来就是开放格式。
  关于webm格式详细
• Ogg是一个自由且开放标准的容器格式，由Xiph Org 基金会所维护。Ogg格式并不受到软体专利的限制，并设计用於有效率地串流媒体和处理高品质的数位多媒体。
  「Ogg」意指一种档案格式，可以纳入各式各样自由和开放原始码的编解码器，包含音效、视讯、文字（像字幕）与後设资料的处理。
  关于ogv格式详细

属性

width宽度/height高度

• 单独设定width、hight可以直接改变播放器的宽度、高度，如果同事设定，播放器会拉伸，但是内容一个拉伸，始终在最中心

autoplay自动播放

• 在谷歌下会有个小bug，还是要点，但是如果有muted属性就可以自动播放了

loop循环播放

poster视频未播放时显示的图片

muted视频输出时默认被静音

其他

谷歌浏览器虽然不支持直接自动播放，但是支持7秒内视频宽高比较小的视频自动播放

---

video API 事件

play()/pause()

var myVideo=document.getElementById("video1");
function playVid()
  {
  myVideo.play();
  }
function pauseVid()
  {
  myVideo.pause();
  }

使video标签播放，但是在谷歌浏览器下不允许自动播放
duration
返回当前视频的长度，以秒计

var myVideo = document.getElementById('myVideo');
    var min =parseInt(myVideo.duration/60);
    var sec =parseInt(myVideo.duration%60);

以上代码可以将视频长度转化为分秒
currentTime
能返回当前视频的一个播放长度，并且可以设定值

myVideo.currentTime = 30;//从30s的地方开始播放
    test.onclick = function(){ 
        myVideo.currentTime = myVideo.currentTime += 3;
        //给test按钮绑定事件，按一次就快进3秒
    }

src
设置/返回当前视频路径
myVideo.src = 'data/test.mp4';
volume
设置/返回当前音量，0-1相当于0~100%
myVideo.volume = 1;
小案例：声音控制条
先在body里定义一个range类型的input作为拖动控件

然后在script里面绑定事件

range.oninput = function(){
        myVideo.volume = this.value/100;//value值可以在mix和max上修改
    }

control
是否显示控制控件（播放暂停音量等）
myVideo.control = true;

• 设置后video会自动添加control属性

muted
手动设置静音
myVideo.muted = true;

• 设置后video标签上不会自动添加muted属性

networkState
返回视频的当前网络状态（state）
返回的网络状态（state）码：
0：未初始化
1：视频资源已获取，但是未使用
2：浏览器正则下载资源
3：未找到资源（有可能在加载）

• 视频并不是瞬间加载的，加载时网络状态是3（找不到）延时几秒后获取会变成1（已找到资源）

currentSrc
返回当前音频的URL，无法改变URL只能返回URL
myVideo.currentSrc = 'data/test.mp4';

• 与src不同的是，只能返回可以读取的资源路径，例如视频还没加载出来的时候返回空

ended
可以返回视频是否播放结束的结果，如果播放结束返回true，没有则false，可以进行事件监听
小案例：监听ended事件

myVideo.addEventListener('ended',function(){ //监听ended事件
        console.log('视频播放结束了')
        myVideo.play();//重新播放
    })

loop
设置或返回视频是否在结束时重新播放，默认是false，如果在script中设置了loop为true，那么会自动添加loop在video标签属性中
小案例：循环开关

 test.onclick = function () {
        if (myVideo.loop = false){//因为默认是false
            this.innerHTML = '循环';
            myVideo.loop = true;
        }else {
            this.innerHTML = '不循环';
            myVideo.loop = false;
        }

playbackRate
设置或返回视频的播放速度，默认是1，小于1则是慢速
myVideo.playbackRate = '2';//两倍速播放

readyState
属性返回挡墙的就绪状态
返回参数：
0： 没有关于视频就绪的信息
1：有数据，快不够播放了
2：当前有数据可以用，但是下一帧没有了
3：数据正在缓冲，当前和至少下一帧可以用了
4：可用数据足以开始播放了
timeupdate
当目前的播放位置更改时，可用监听到视频目前播放的状态
小案例：timeupdate+duration+currentTime制作简易播放状态栏

myVideo.addEventListener('timeupdate',function () {
        let allTime = parseInt(myVideo.duration/60)+':'+parseInt(myVideo.duration%60);
        let nowTime = parseInt(myVideo.currentTime/60)+':'+parseInt(myVideo.currentTime%60);
    timeNode.innerHTML = nowTime+ '/' +allTime //输出当前时间、总时间;
    })

seeked
当用户对视频的进度条并且已经完成操作时会触发的事件，使用时必须用on
如：
myVideo.onseeked = function () {}

seeking
当用户开始移动/跳跃视频中的新位置的时候，使用时必须用on
myVideo.onseeked = function () {}

• seeking的频率比seeked高
  小案例：比较seeked和seeking触发频率
  在body定义两个span标签

    seeked
    seeking

在script中比较seeked和seeking触发频率

 var seekedNum = seekingNum = 0;
    myVideo.onseeked = function () {
        seekedNum ++;
        testSeeked.innerHTML = seekedNum;
    }
    myVideo.onseeking = function () {
        testSeeking.innerHTML = seekingNum;
    }

volumechange
音量已更改时，使用时必须用on
myVideo.onvolumechange = function () { }
通用API：requestFullscreen
全屏显示，但是必须在用户事件上调用
小案例：兼容谷歌和火狐的全品显示

test.onclick = function () {
        if (myVideo.webkitRequestFullscreen) {
            myVideo.webkitRequestFullscreen();
        }else if (myVideo.mozRequestFullscreen) {
            myVideo.mozRequestFullScreen();
        }
    }

• 注意火狐的mozRequestFullScreen是大写S，谷歌的是小写
  load
  强制重新加载视频资源
  test.onclick = function () {myVideo.load();}
• 一般在更新视频url后重新加载
  canplay
  视频已经准备好开始播放，可以用于事件监听

test.onclick = function () {myVideo.load();}
    myVideo.addEventListener('canplay',function () {
        console.log('可以开始播放了')
    })

---

音频audio

音频audio的属性与api与视频的video的很多都差不多，但是有一些区别

• audio 定义音频 格式：mp3 wav ogg
  mp3所有浏览器兼容
  ogg 只safari不支持

属性：
src音频的资源地址
controls 播放控件
autoplay 自动播放
loop 循环播放
muted 静音

• wav 都支持
  js 能帮助生成audio对象 new Audio(); 等同于HTML上面写上audio标签
  chrom和Opera都不能直接播放 需要页面上元素交互

API：
play 音频播放
pause 音频暂停
duration 返回当前音频长度
currentTime 设置或返回当前音频的长度
src 设置/返回当前音频的来源
volume 设置/返回当前的音频音量
control 设置音频是否显示控件
muted 设置静音
networkState 返回音频的当前网络状态
currentSrc 返回当前音视频的URL
ended 返回音视频的播放位置是否已经结束
loop 设置是否循环播放
playbackRate 设置或返回音视频的播放速度
readyState 属性返回音频当前的就绪状态
timeupdate 当目前的音放位置已更改时
seeked 当用户已移动/跳跃到视频中的新位置时
seeking 当用户开始移动/跳跃到视频中的新位置时
volumechange 当音量已更改时
requestFullscreen 全屏
load 重新加载音频资源
canplay 音频已经准备好开始播放

• autoplay chrom和Opera不会自动播放
  muted 静音 loop循环播放
  width/height属性不起作用 需要css样式中进行设置

• currentSrc只能获取，不能设置

• seeked seeking 在audio中触发频率相同
  timeupdate 播放时触发的事件
  volumechange 当音量改变的时候触发
  requestFullscreen 全屏 必须使用audio标签 js生成的audio对象不支持
  load 重新加载的函数 重新给个src也会重新加载
  canplay 准备好的时候出发的事件