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

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

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

//播放m3u8

//播放mp4

       

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

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

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

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

在html页面上引入


   

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

/** html标签 使用canvas*/



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

你可能感兴趣的:(技术熟练,javascript,vue.js,html5)