<template> <div> <video controls 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>

使用hls.js播放m3u8视频流