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

本文主要是介绍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>

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

这篇关于vue，html5 使用video视频播放 支持mp4 m3u8格式,移动端自动播放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---