【小结】HTML5视频video

video标签是HTML5新增的用于定义视频的标签
在标签之间放置文本内容，这样老的浏览器就在访问时就会显示文本内容。
<video scr=data/test.mp4"">您的浏览器版本过低不能访问，请升级</video>

支持格式

mp4、webm、ogv

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

<video src="data/test.webm">
    <source src="data/test.ogv">
    <source src="data/test.mp4">
您的浏览器版本过低不能访问，请升级
</video>

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

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

属性

width宽度/height高度
<video controls src="data/test.mp4" width="400"></video>
<video controls src="data/test.mp4" height="400"></video>

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

autoplay自动播放
<video controls src="data/test.mp4" autoplay></video>

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

loop循环播放
<video controls src="data/test.mp4" loop></video>
poster视频未播放时显示的图片
<video controls src="data/test.mp4" poster="data/test.jpg"></video>
muted视频输出时默认被静音
<video controls src="data/test.mp4" muted></video>

其他

谷歌浏览器虽然不支持直接自动播放，但是支持7秒内视频宽高比较小的视频自动播放
标签支持 HTML 5 中的全局属性。
标签支持 HTML 5 中的事件属性。

---

#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作为拖动控件
<input type="range" min="0" max="100" value="50" id="range">
然后在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标签

<div>
    <span id="testSeeked">seeked</span>
    <span id="testSeeking">seeking</span>
</div>

在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('可以开始播放了')
    })

本人简书传送门：https://www.jianshu.com/p/498fb66ddce5