H5 video 开发问题及相关知识点

时间 2019-11-30

标签 h5 video 开发问题相关知识繁體版

原文原文链接

♢ video点播与直播

H5 video目前全部浏览器都支持的视频格式是MP4格式，因此mp4应当是点播web视频的首选格式。

而在直播视频上，H5 video只在移动端原生支持HLS流的直播视频(Mac safari video标签也支持， PC Chrome不支持)，其余直播流（如FLV）就须要Flash插件的支持。html

♢ video与206状态码

video播放mp4时，发的依然是get请求，但http返回206状态码，即 partial Content。有关206状态码的相关内容，能够参考下文

Http协议206状态码

♢ 终止视频下载

video.pause() 能够暂停视频播放，但并不能中止视频资源的继续加载，媒体元素会继续加载知道被垃圾回收机制回收。

要在暂停播放后当即中止，可以使用如下方法

video.pause()
video.src=''
video.removeAttribute('src');复制代码

♢ 防止iOS上默认全屏播放

ios10及之后的版本，能够经过给video标签加playsinline属性防止iOS默认全屏播放，ios9以前加 webkit-playsinline属性，若是要兼容，则把两个属性都加上。

经过客户端添加配置 UIwebview: webview.allowsInlineMediaPlayback = YES，不过仍是要求在video元素上加playsinline属性

参考：

♢ 自动播放及播放控制

在移动端，有些浏览器支持添加autoplay属性后自动播放，有些设置 autoplay 和 muted属性也能自动播放，好比IOS 10+、Chrome。

若是想控制何时播放，且并非用户触发的（如没有设置controls），那就设置muted属性，而后调用video.play()方法，隔300ms左右有后，再经过video.muted = false打开声音。

vide.muted = true;
video.play()
setTimeout(function () {
    video.muted = false
}, 300)复制代码

iOS9及以前的版本要求有用户交互才能播放，即手动点击播放按钮或者有用户触发的click、touchend、键盘等事件，而后调用video.play() 方法播放。在iOS9以前，iOS Native能够经过 UIWebView的mediaPlaybackRequiresUserAction属性来控制是否须要用户交互。

使用element.click()触发的click事件是否能够被人为是用户行为？不能

浏览器是如何知道是不是用户触发的事件？Event对象的只读属性isTrusted

<div id="test-ele">这个元素监听事件</div>
<script>
    const testEle = document.querySelector('#test-ele');
    testEle.addEventlistener('click', function (evt) {
        // 用户触发为true，script或EventTarget.dispatchEvent() 触发为false
        console.log(evt.isTrusted);
    }, false);
    testEle.click() // 这个触发，evt.isTrusted = false
</script>复制代码

有关iOS 10对safari video的放松策略能够参考： New <video> Policies for iOS

♢ video.play() 的Promise对象（可用于捕获视频播放错误）

在Chrome上，若是没有设置video.muted属性，在非用户行为下，直接使用video.play() 播放，会收到 Uncaught (in promise) DOMException 的报错，视频也没有播放。在iOS下面，可能不会有任何报错，视频也没播放，这样就没法定位问题。

video.play() 会返回一个Promise对象，若是播放失败，能够经过返回的Promise catch到相关错误信息。

const pro = video.play();
if (pro) {  // iOS9及如下版本不会返回Promise对象，作下兼容处理
   pro.catch(err=>{ console.log(err) });   
}复制代码

♢ TimeRanges 对象

在开始获取played属性的时候，觉得会返回一个已经播放的时长，实际上返回的是TimeRanges对象，并且看到TimeRanges的length一直不变，当时一脸摸不着头脑，不知道有什么用。后来在作进度控制，须要知道视频已缓冲多少时，才弄明白。

video DOM对象有三个属性会返回TimeRanges对象，分别为 video.played/ video.buffered/ video.seekable

视频开始时只有一个播放时间段，若是不进行跳跃观看，就一直只有一个时间段，即 TimeRanges.length 值为1；若是进行了跳跃观看（如从2分钟，忽然跳进到15分钟的位置），而跳跃内容并无缓冲完毕，则会出现两个时间段，这时TimeRanges的length为2。因此TimeRanges个数会随着跳跃观看未缓冲完成的内容而增长，随着缓冲的完成而减小，最少为1个，即从开头到结尾。

------------------------------------------------------

|=============| |===========| |

------------------------------------------------------

0 5 15 19 21

TimeRanges对象有一个length属性和 start()、 play()两个方法：

TimeRanges: length: 1 // 表明当前播放视频存在的播放段 play(index) // 获取指定播放段的播放（缓冲）开始时间，index从0开始取，以秒计 end(index) // 获取指定播放段的播放（缓冲）结束时间

要获取第一段的开始时间，使用 TimeRanges.start(0)，结束时间为 TimeRanges.end(0)，第二段 TimeRanges.start(1)，以此类推

参考：

Media buffering, seeking, and time ranges: developer.mozilla.org/en-US/docs/…

TimeRanges: developer.mozilla.org/en-US/docs/…

♢ video的宽高

video视区的高宽根据视频源有不一样的固定比例，但并不会出现因video标签或其容器的高宽设置比例与视频源比例不一致而出现拉伸、变形，会自动根据设置的高宽中较小的值按照自身的比例进行缩放，不足的会两边补白居中。

如视频的原始尺寸为640 * 360html5

设置video高400、宽800，高度的增加跟宽度的增加不成比例，宽度会比视宽度宽，则video会左右补白，视区居中。ios