使用hls.js播放m3u8视频流

最新推荐文章于 2025-06-23 18:15:09 发布

Demain-

最新推荐文章于 2025-06-23 18:15:09 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_58259728/article/details/128468406

vue 专栏收录该内容

6 篇文章

订阅专栏

1.安装hls.js

npm install hls.js -S

2.使用

<template>
    <div class="video_con">
        <video controls class="video" ref="video"></video>
    </div>
</template>

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