1、安装hls.js
npm i hls
2、使用
<el-dialogtitle="监控"top="5vh":visible.sync="dialogVisible"width="30%"><video id="video" style="width:100%;height:300px" controls><sourcetype="application/x-mpegURL"></video><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">关闭</el-button></span></el-dialog>
import Hls from "hls.js";palyVideo(url){setTimeout(() => {var video = document.getElementById("video");if (Hls.isSupported()) {var hls = new Hls();hls.attachMedia(video);hls.on(Hls.Events.MEDIA_ATTACHED, () => {hls.loadSource(url)})hls.on(Hls.Events.MANIFEST_PARSED, ()=> {video.play();console.log("加载成功");});hls.on(Hls.Events.ERROR, (event, data) => {console.log("加载失败");});} else if (video.canPlayType("application/vnd.apple.mpegurl")) {video.src = url;video.addEventListener("loadedmetadata", () =>{video.play();});}}, 2000)},
3、遇到问题（H265改H264）
)
)
