vue 中使用百度cyberplayer播放器遇到的坑

上次用了百度cyberplayer播放器也做了一些介绍，在使用的过程中遇到了一些问题。播放器和vue都有一点写法的问题

1、频繁点击视频进入播放页面后再返回首页，会出现上个视频的音频和当前视屏音频都有播放。

2、开始还以为是播放器的问题，但是后面试了一下和播放器的关系不大。

用了有几种办法解决

1、修改不放弃的方法不用var声明，直接把播放器的方法保存在data()全局里面
2、利用vue的生命周期钩子在实例销毁之前销毁data()里的播放器方法
3、再次进入播放页面的时候首先调用一次播放器方法，数据全部传空的，是播放器空放，但是这个持续不了多久
4、获取到数据在从新调用播放器方法，使视频文件能正常播放

现在简单的看一下修改的地方

<script>
    export default {
        data() {
            player: Function,
        },
        methods: {
            // 百度解析视频播放方法
            baiduMp4(mp4Url, imgUrl) {
                // 这里前面是用var声明的player，现在把player直接存在data()里面
                this.player = cyberplayer("playercontainer").setup({
                width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有)
                height: 568, // 高度，也可以支持百分比
                title: "基本功能", // 标题
                file: mp4Url, // 播放地址
                image: imgUrl, // 预览图
                autostart: true, // 是否自动播放
                stretching: "uniform", // 拉伸设置
                repeat: false, // 是否重复播放
                volume: 100, // 音量
                controls: true, // controlbar是否显示
                starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播
                logo: { // logo设置
                    linktarget: "_blank",
                    margin: 8,
                    hide: false,
                    position: "top-right", // 位置
                    file: "./img/logo.png", // 图片地址
                },
                ak: "***", // 公有云平台注册即可获得accessKey
                });
                this.playComplete();
            },
        },
        // 实例销毁之前清除player方法，停止播放
        beforeDestroy() {
          this.player.remove();
        },
        // 实例销毁之后移除所有的监听器和完全销毁这些实例，清除它与其它实例的连接，解绑全部指令及监视器
        destroyed() {
          this.$off();
          this.$destroy();
        },
    }
</script>

转载于:https://www.cnblogs.com/WRS7/p/9798391.html