vue+tcplyer播放flv视频基础使用

最新推荐文章于 2024-04-11 02:08:47 发布

诺小D

最新推荐文章于 2024-04-11 02:08:47 发布

阅读量1k

点赞数

文章标签： vue.js 音视频 javascript

本文链接：https://blog.csdn.net/weixin_46352558/article/details/127986852

版权

dispose方法会摧毁dom 所以调用了之后需要自己去生成一个dom，

<template>
    <div class="player">
        <div ref="video-outer" v-show="enableFlag" class="video-player-page">
            <!-- <video id="videoDom" class="video"></video> -->
        </div>
        <img v-show="!enableFlag" src="../../../../public/images/no-single.png" alt="">
    </div>

</template>
<script>
    export default {
        props: ['src','enableFlag'],
        data() {
            return {
                player: null,
            }
        },
        created() {
            //  this.initPlayer();
        },
        mounted() {
            
        },
        watch:{
            enableFlag:{
                handler:function(){
                    if(this.enableFlag === 1){
                        this.$nextTick(()=>this.initPlayer())
                    }
                    else{
                        this.$nextTick(()=>this.player && this.player.pause())
                    }
                },
                immediate:true,
            }
        },
        // beforeDestroy(){
        //      this.player.destroy();
        // },
        destroyed() {
            // 页面销毁，同时也销毁 TcPlayer
            this.player.dispose();
        },
        methods: {
            initPlayer() {
                let that=this;
                if(this.player){
                     this.player.dispose();  
                }
                this.domId = `video${Math.floor(Math.random()*(99999-10000+1))+parseInt(10000)}`
                let dom = document.createElement('video')
                dom.setAttribute('class', 'video')
                dom.setAttribute('id', this.domId)
                this.$refs['video-outer'].appendChild(dom)
                this.player = TCPlayer(this.domId, {
                    sources: [{ src: this.src, type: 'video/flv' }],
                    autoplay: true, // 是否自动播放
                    controls: true,
                    muted: true,
                    controlBar: {
                        playbackRateMenuButton: false, //是否显示播放速率选择按钮。
                        volumePanel: false,
                        durationDisplay: false,
                        currentTimeDisplay: false,
                        timeDivider: false,
                        volumePanel: false,
                        progressControl: false,
                    },
                });
                    this.player.on('canplay', function(event) {
                    // 从回调参数 event 中获取事件状态码及相关数据
                    //    console.log(event)
                    that.$emit('loadDone',false)
                    // const emit=defineEmits(['loadDone'])
                 
                    // emit('loadDone',false)
                    });
            }
        }
    }
</script>
<style lang="less" scoped>

 .video-player-page{position: relative; width: 100%; height: 100%; overflow: hidden;
        /deep/.video{
                width:100% !important; height: 100% !important;
            }
    }
.player{height: calc((100vh - 350px)/3); position: relative; 
   
    img{width: 100%;height: 100%;}
    span{ position:absolute; top:50%; left: 50%;transform:translate(-50%,-50%); color: white;}
    .noneBox{
        display: flex;
        align-items:center;
        background: #07348a;
        color: #fff;
        line-height: 1em;
        text-align: center;
        position: absolute;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }
    .called{
        z-index: 3;
    }
}

</style>