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

    

原文：https://www.cnblogs.com/douge/p/12492663.html