前端使用video标签+flvjs播放flv格式视频全屏后点击播放按钮不播放问题解决

最新推荐文章于 2024-10-11 08:07:00 发布

原创最新推荐文章于 2024-10-11 08:07:00 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #音视频

video 专栏收录该内容

4 篇文章

订阅专栏

文章描述了一个HTML模板中如何使用Vue.js和flv.js库来处理错误文件URL，当文件类型为902时，实现自动播放视频并管理播放结束后的逻辑。

html

            <template slot-scope="{row,index}" slot="errFileUrl">
                <el-image style="width: 60px; height: 60px" v-if="row.errFileUrl&&row.errCode!='902'" :src="getImageUrl(row.errFileUrl)"
                    :preview-src-list="getImageUrl(row.errFileUrl, 1)" z-index="9999"></el-image>
                <span v-if="!row.errFileUrl">无图片</span>
                <video :id="'videoElement'+index" v-if="row.errFileUrl&&row.errCode=='902'" controls autoplay muted  disablePictureInPicture width="100px" height="100px">
                </video>
                <el-button type="primary" size="mini" v-if="row.errFileUrl&&row.errCode=='902'"
                    @click="VideoPlayerHandler(row.errFileUrl,index)">播放视频</el-button>
            </template>

         VideoPlayerHandler(audioFilePath,index) {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement'+index);
                var url=`${this.baseUrl}${audioFilePath}`
                console.log(url,'url');
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: false,
                    hasAudio: true,
                    url:url
                });
                this.flvPlayer.attachMediaElement(videoElement);
                this.flvPlayer.load();
                this.flvPlayer.play();
                this.flvPlayer.on('ended', function () {
                     console.log('视频播放结束，可以在这里执行结束后的操作');
                    // 在这里可以做清理工作，比如停止播放器
                    this.flvPlayer.destroy();
                    let that=this
                    videoElement.addEventListener('play', function() {
                        console.log("点击播放了");
                        that.flvPlayer = flvjs.createPlayer({
                             type: 'flv',
                             isLive: false,
                             hasAudio: true,
                             url:url
                    });
                        that.flvPlayer.attachMediaElement(videoElement);
                        that.flvPlayer.load();
                        that.flvPlayer.play();
                    }); 
                });   
            }
        },