使用hls.js播放m3u8视频流

 ̄綄美尐妖づ 提交于 2020-08-17 18:27:48

<template> <div class="video_con"> <video controls class="video" ref="video"></video> </div> </template> <script>
   // npm install hls.js -S let Hls = require('hls.js'); export default { data() { return { hls: null } }, mounted() { this.getStream('url') }, methods: { getStream(source) { if (Hls.isSupported()) { this.hls = new Hls(); this.hls.loadSource(source); this.hls.attachMedia(this.$refs.video); this.hls.on(Hls.Events.MANIFEST_PARSED, () => { console.log("加载成功"); this.$refs.video.play(); }); this.hls.on(Hls.Events.ERROR, (event, data) => { // console.log(event, data); // 监听出错事件 console.log("加载失败"); }); } else if (this.$refs.video.canPlayType('application/vnd.apple.mpegurl')) { this.$refs.video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'; this.$refs.video.addEventListener('loadedmetadata',function() { this.$refs.video.play(); }); } }, // 停止流 videoPause() { if (this.hls) { this.$refs.video.pause(); this.hls.destroy(); this.hls = null; } } } } </script>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!