vue，html5 使用video视频播放 支持mp4 m3u8格式,移动端自动播放

video是html5自带的标签可以在vue中直接使用，使用的方式也很简单

//播放m3u8
<video id="videoM3u8" class="vjs-tech" controls autoplay="autoplay" width="960" height="400">
        <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL">  //m3u8 的type一定需要写成type="application/x-mpegURL"否则视频无法播放
</video>
//播放mp4
<video id="videoM3u8" class="vjs-tech" controls autoplay="autoplay" width="960" height="400" >
       <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="video/mp4">
    	<source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="video/webm">
    	<source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="video/ogg">
 </video>
       

这里有一个问题就是移动端需要自动播放 直接在video标签上面添加autoplay是不会生效的 这里应该这样写

setTimeout(() => {
        let myVid = document.getElementById("videoM3u8");
        myVid.play();
      }, 1000);

如果在苹果手机使用video会出现第一次进去播放不了等加载完成后第二次进去才可以播放 这个是苹果手机的机制问题 暂时没有更好的方法去解决这个问题

如果你是想调用视像头实现实时通信即使或者播放rtsp协议的数据流那么建议你使用websocket,因为video不是万能的 解析不了rtsp和视频直播，使用websocket前端的工作量也不多主要在于后端身上

在html页面上引入

<!-- 视频 -->
  <script src="static/gantt/js/jsmpeg.min.js"></script> 

在你需要使用的页面中 （此代码直接复制有效）

/** html标签 使用canvas*/
<button id="bottom">加载视频</button>
<button class="play">播放</button>
<button class="stop">暂停</button>
<div class="videoBox"><canvas id="video"></canvas></div>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        // 移除canvas  防止将链接多次注入一个标签出现视频闪烁显现
        var videoBox = document.getElementsByClassName("videoBox")[0];
        var canvasVideo = document.getElementById("video")
        canvasVideo.remove();
        videoBox.innerHTML = "<canvas id='video'></canvas>"
        var person=prompt("ws://xxxxxxxxxxxxxxxxxxx");
        var canvas = document.getElementById('video');
        var url = person;
        var player = new JSMpeg.Player(url, {
            canvas: canvas,
            decodeFirstFrame: true,
            disableWebAssembly: false,
            throttled: false, //这里设置为false，不然不触发onSourceCompleted事件
            chunkSize: 4 * 1024 * 1024,
            autoplay:false,
            loop:false,
            onSourceCompleted:function(){
                console.log("点击屏幕触发");
            }
              // 继续播放
              document.getElementsByClassName("play").onclick(function(){
                player.play();
              })
              // 暂停播放
                document.getElementsByClassName("stop").onclick(function(){
               player.pause();
              })
        });
    }
</script>

如果对你有帮助请你点赞收藏！