web端原生video标签播放视频的一些坑

在页面中插入一段视频，我们首先想到的是video标签，只要指定src属性设置为视频的地址就完事了。但是真正用的时候，很多兼容性问题就暴露出来了如下是我在做视频项目中遇到的一些坑：

1. 谷歌浏览器支持mp4播放格式，但是MP4的视频格式可以使用DivX也可使用H264，Chrome只支持H264。
2. 常用视频格式mp4,mov,avi，谷歌浏览器仅支持mp4中H264视频格式，safari支持mov，mp4但avi不支持，发现web端浏览器对这些支持并不好，相比较而言移动端还可以
3. 视频比较大，直接在加载整个页面显然不是最好的选择，于是想到了m3u8流媒体，将一个大的媒体文件进行分片直接用播放器进行在线播放

m3u8是HLS协议的部分内容，由苹果公司提出的基于http的流媒体网络传输协议，实现的基本原理是将一个大的媒体文件进行分片，可以理解为m3u8为一个视频播放列表。移动端大都支持，但是在pc端除了safari需要引入相应的库来实现

具体实现步骤

• 安装hls.js依赖：npm install hls.js –save
• 代码实现

const Hls = require("hls.js");
mounted(){
    const video = document.getElementById('m3u8video');
    if(!video) return false;
    const videoSrc = video.src
    if (video&&video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
    } else if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
    }
}
复制代码

• 看效果

发现在谷歌浏览器播放缓存引起了跨域问题，于是想到了最快的解决办法就是就是加时间戳解决缓存问题const videoSrc = video.src+’?time=’+(new Date().getTime());效果如下

可以在视频播放时通过调试查看Network里的xhr请求，会发现一个m3u8文件，和每隔一段时间请求几个ts文件。

最后

视频这块，深入探讨还是蛮深的，本文主要就开发过程中遇到的一些坑及对应的解决方案做个总结，如果有错误和疏漏欢迎大家一起探讨和指出，我将及时修正，谢谢！