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';
            }
        },