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>

vue的生命周期钩子也是很重要的

vue 中使用百度cyberplayer播放器遇到的坑相关推荐

网页中嵌入百度影音播放器的代码
@{ //假如传入1,播放 http://localhost:5578/Upload/[电影天堂心战HD中字.mkv //传入2,播放 http://localhost:5578/Upload ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
百度影视播放器官方版
百度影视播放器 v4.1.1 官方版软件大小:25.5MB 软件语言:简体中文软件类别:影音播放软件授权:官方版更新时间:2014-12-30 应用平台:/Win8/Win7/WinXP 百度 ...
计算机弹音乐百度,百度音乐播放器电脑版怎么制作歌曲歌词？
现在很多朋友都在使用百度音乐播放器,那么在使用百度音乐播放器播放音乐的时候.音乐没有歌词应该怎么办呢?可以使用百度音乐播放器来制作歌词哦,但是很多人都不知道百度音乐播放器电脑版怎么制作歌曲歌词?下面小 ...
百度音乐播放器2015 v9.1.7 官方版
百度音乐播放器2015 v9.1.7 官方版软件大小:8.26MB 软件语言:简体中文软件类别:影音播放软件授权:官方版更新时间:2015-02-06 应用平台:/Win8/Win7/WinX ...
微信中H5同层Video播放器接入教程
微信中H5同层Video播放器接入教程 x5-video-player-type 启用H5同层播放器通过video属性"x5-video-player-type"声明启用同层H5 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
电脑上的计算机里的音乐播放器怎么更改,win10系统电脑中默认的音乐播放器如何修改...
win10系统电脑中默认的音乐播放器如何修改今天给大家介绍一下win10系统电脑中默认的音乐播放器如何修改的具体操作步骤. 1. 打开电脑,进入桌面,在左下角的"开始"图标处,右 ...
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...

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

用了有几种办法解决

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

vue 中使用百度cyberplayer播放器遇到的坑相关推荐

最新文章

热门文章