使用hls.js播放m3u8视频流(示例代码)

欢先森o 2021-03-20

栏目: js ·

来源: 欢先森o

作者:欢先森o

简介  这篇文章主要介绍了使用hls.js播放m3u8视频流(示例代码)以及相关的经验技巧,文章约3833字,浏览量479,点赞数3,值得参考!


<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 原文地址:https://www.cnblogs.com/troublehuan/p/12096691.html

相关文章

[JavaScript] HTML5 播放hls流媒体视频流

uni-app video标签打包H5Android上支持播放.m3u8 hls直播流

使用ffmpeg转码m3u8并播放(示例代码)

【公开课预告】:六款开源LL-HLS/LL-DASH播放器评测

【今晚7点半】:六款开源LL-HLS/LL-DASH播放器评测

Chrome无法播放m3u8格式的直播视频流的问题解决

libvlc播放m3u8流 无法获得视频长度问题[记录]

[视频播放] HLS协议之M3U8、TS流详解