vue中引入播放器（百度播放器和腾讯云播放器）

Z时代
2024-01-10
分类：综合

vue

百度云播放器

引入cyberplayer.js

创建播放

/*
 *  视频播放器
 *  @params {String} 播放器容器的id名
 *  @params {Number} 播放器的视频地址
 *  @params {String} 播放器的封面图片
 */
function cyberPlayer(idname, video_url, pic) {
    const player = cyberplayer(idname).setup({
        width: \'100%\',
        height: \'100%\',
        backcolor: \'#FFFFFF\',
        stretching: \'uniform\',
        file: video_url,
        image: pic, 
        ak: \'9db5423bf41349d6a98a4ba5a1c4e17f\',
        autoStart: false,
        repeat: false,
        volume: 100,
        controls: true
    });
    return player;
}
export default cyberPlayer;
vue全局引用方法

    //创建播放器
    this.radioPlayer = this.cyberPlayer(\'id名称\'，视频地址，视频封皮图片 );

播放5分钟后暂停


        playTimeHandler(){
            let that = this;
            this.radioPlayer.onTime(function(...rest){
            if(rest[0].position > 300){
                that.radioPlayer.seek(0);
                that.radioPlayer.remove();
                that.radioPlayer = null;
               // that.showMask = true;
                }
            })
        },

重新播放

        newRadioPlayer(){
            this.radioPlayer = this.cyberPlayer(\'playercontainer\', this.video_url, \'\');
            this.radioPlayer.seek(0);
            this.radioPlayer.play();
            if(this.shareData.audition_time > 0){
                this.playTimeHandler();
            }else{
                let that = this;
                //侦听视频播放结束
                this.radioPlayer.onBeforeComplete(function() {
                    that.radioPlayer.remove();
                    that.radioPlayer = null;
                    //that.showMask = true;
                });
            }

腾讯云播放器

    //引入js
    <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js"></script>

function Tcplayer(idname, video_url, pic) {
    // console.log(\'创建播放\', video_url);
    var player = new TcPlayer(idname, {
        m3u8: video_url, //请替换成实际可用的播放地址
        // autoplay : false,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        // poster : pic,
        width :  \'100%\',//视频的显示宽度，请尽量使用视频分辨率宽度
        height : \'100%\'//视频的显示高度，请尽量使用视频分辨率高度
        });
    return player;
}
export default Tcplayer;

重新播放

        newRadioPlayer(){
            this.radioPlayer = this.Tcplayer(\'playercontainer\', this.video_url);
            this.radioPlayer.currentTime(0)
            this.showMask = false;
            this.videoPlayerHandler();
            this.videoOverHandler();
            this.videoPauseHandler();
        }

侦听视频播放结束

        videoOverHandler(){
            let that = this;
            this.radioPlayer.video.el.addEventListener(\'ended\',()=>{
                that.radioPlayer.destroy();  
                that.radioPlayer = null;
                that.showMask = true;     //重新播放的遮罩显示
                that.videoPlayerStatus = false;  //暂停按钮不显示
                this.videoImgStatus = false;   //视频播放结束后图片展示
            })
        },

侦听视频播放暂停

     videoPauseHandler(){
            this.radioPlayer.video.el.addEventListener(\'pause\',()=>{
                // 视频暂停后暂停按钮的显示，图片不显示
                this.videoPlayerStatus = true;
                this.videoImgStatus = true; 
            })
        }

音频audio

-播放音频

        summaryAudioClick() {
            this.shareData.active = !this.shareData.active;   //播放按钮的状态
            this.mySummaryAudio = this.$refs.mySummaryAudio;
            //全局侦听是否暂停，暂停后改变状态
            this.mySummaryAudio.addEventListener("pause",()=>{
                this.summaryAudioStatus = \'pause\';
                this.shareData.active = false;
                this.mySummaryAudio.pause();
            });
                this.audioPlayHandler();
           },
        audioPlayHandler() {
            let that = this;
            if (this.summaryAudioStatus == \'pause\') {
                this.$refs.mySummaryAudio.play();
                this.summaryAudioStatus = \'play\'; //当前播放状态,记得修改图片
                //侦听播放是否结束
                this.$refs.mySummaryAudio.addEventListener(\'ended\', function() {
                    that.summaryAudioStatus = \'pause\';
                    that.$refs.mySummaryAudio.pause();
                    that.is_trial_flag = false;
                });
            } else {
                this.$refs.mySummaryAudio.pause();
                this.summaryAudioStatus = \'pause\';
            }
        },

重新播放

        newPlayerHandler() {
            this.mySummaryAudio.currentTime = 0;
            this.is_trial_flag = true;
            this.shareData.active = true;
            if (this.summaryAudioStatus == \'pause\') {
                this.mySummaryAudio.play();
                this.summaryAudioStatus = \'play\';
            } else {
                this.mySummaryAudio.pause();
                this.summaryAudioStatus = \'pause\';
            }
        },