uniapp 直播拉流播放m3u8 视频-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 直播拉流播放m3u8 视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在百度中找啦n多个方法没有解决啦巨气人

发现hls.js hls.js不需要任何播放器，它可以直接在标准HTML 元素上运行。

安装第三方库

npm install hls.js -S

在uniapp页面显示

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

如果想要应用在自己的页面中直接c v 就ok啦

要是有人问推流为啥没有

不要问问就是不会！！！文章来源地址https://www.toymoban.com/news/detail-523385.html

到了这里，关于uniapp 直播拉流播放m3u8 视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！