video开发中要注意的细节

789 阅读1分钟

一、浏览器对video请求有限制

浏览器对同域名请求会有一个最大并发数量的限制,如图(图片来自知乎):

image.png

比如,目前谷歌浏览器的最大并发数是6,第6个请求之后的视频,都需要排队,如果等待太久,会导致video加载失败

二、video暂停或者卸载标签并不会中断请求

背景

video挂载后会发起请求获取视频片段,在请求时立刻暂停视频。会发现 CAUTION: request is not finished yet!,可以确定视频暂停后请求未停止。 等待一段时间后,可以看到视频片段content download的时间变长了不少,如图: image.png

image.png

方案

想中断视频请求,可以置空video.src属性

三、video的play陷阱

背景

执行video.play()方法的时候要特别注意!!!确保video在play异步执行期间,没有其他video行为导致跟play冲突,比如以下行为:

  1. play调用后立刻调用pause暂停视频
  2. play调用后改变video.src
  3. play调用后video被干掉 等等

方案

如果不能保证play异步期间绝对不会出错,建议加个video.play()?.catch(()=>{}),这样play异步执行导致的内部报错就会被捕获不抛出也不处理,目前自测是感觉play导致的内部报错不影响video的正常表现,如果有大佬了解,请教一下哈。