Vue2使用video标签 + hls.js实现播放m3u8视频流

9.13分

已于 2024-01-27 17:39:18 修改

阅读量710

点赞数 6

文章标签： javascript elementui vue.js

于 2024-01-27 15:05:15 首次发布

本文链接：https://blog.csdn.net/qq_67512625/article/details/135882667

版权

本案例使用el-dialog对话框实现视频播放,无需弹框自行删除即可。
1.首先安装：npm install hls.js --save

2.引入：import hlsjs from 'hls.js'

3.补充data中的videoUrl--播放地址

HTML代码：

<template>
	<div>
		<!-- 播放器 -->
		<el-dialog title="视频播放" 
           :visible="dialogPlay" 
           @opened="openWebRtc()" 
           width="60%" 
           @close="closeDialog">

			<div id="app-container" class="video-box">
				<video ref="videoAug" 
                   :src="videoUrl" 
                   id="videoAug" 
                   controls muted
				   style="width: 100%; height: 100%; 
                   object-fit: fill">
                </video>
			</div>

		</el-dialog>

		<el-button @click="dialogPlay = true">打开弹窗</el-button>
	</div>
</template>

<script>
    import hlsjs from 'hls.js'
    export default {
        data(){
            return{
                videoUrl:"",//视频流地址
                dialogPlay: false, //dialog弹窗开启
                video:'' 
            }
        },
        /* 如果无法播放，可以在Dom元素挂载后执行一次↓*/
        
        // mounted() {
        //     this.videoPlay()
        // },
        
        /* 如果无法播放，可以在Dom元素挂载后执行一次 ↑*/
        
        methods:{
            // Dialog打开动画结束后回调,执行播放
            openWebRtc(){
                setTimeout(() => {
                    this.videoPlay(true)
                }, 0)
            },
            //开始播放
            videoPlay(flag){ 
                this.video = await this.$refs.videoAug; //定义挂载
                if (hlsjs.isSupported()) {
                    this.hlsjs = await new hlsjs();
                    this.hlsjs.loadSource(this.videoUrl); //加载播放地址
                    this.hlsjs.attachMedia(this.video); //解析到video标签上
                    if (flag) {
                        this.dialogPlay = true
                    }
                    this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                        this.video.play(); //开始播放
                        console.log("加载成功");
                    });
                    this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                        // 监听出错事件
                        console.log("加载失败");
                    });
                } else {
                    console.log("不支持的格式");
                    return;
                }    
            },
            //关闭弹层
            closeDialog() {
                this.closeVideo()
                this.dialogPlay = false
            },
            //停止播放
            closeVideo() {
                if (this.hlsjs) {
                    this.$refs.videoAug.pause();
                    this.video.pause();
                    this.hlsjs.destroy();
                    this.hlsjs = null;
                }
            }
        }
        
    }
</script>

<style>
</style>