Vue中video.js踩坑日记单页切换后视频无法播放

使用video.js踩坑。单页切换后视频无法播放

切换页面以后正常显示效果

但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了？？

解决思路

在生命周期beforeDestroy函数中销毁创建的video实例。

html代码

<div class="videoListBox"><ul class="videoList"><li v-for="(item,i) in videoList":key="i"style="margin-bottom: 30px"><div id="video-title">{{item.video_title}}</div><video:id="'myVideo'+item.id"class="video-js vjs-default-skin vjs-big-play-centered" style="width:100%;"><!--vjs-big-play-centered 类名调节播放按钮居中显示--><source:src="item.video_url"type="video/mp4"></video></li></ul></div>

js代码如下：

<script>export default {data () {return {videoList: [],page: 1,playlist:[]}},mounted(){this.videos();},methods: {videos () {this.$api.Post('videos', { page: this.page}).then(res => {if (res.status == 1) {this.videoList = res.result.videos;this.initVideo()}})},initVideo () {this.$nextTick(()=>{this.videoList.map((item,i)=>{let w = document.getElementById('video-title').offsetWidth;let noAutoPlay = false //默认视频列表的第一个自动播放if(item.id == this.videoList.length){noAutoPlay = 'muted'}let myPlayer = this.$video('myVideo'+item.id, {//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。controls: true,//自动播放属性,muted:静音播放autoplay: noAutoPlay,//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。preload: "auto",//设置视频播放器的显示宽度（以像素为单位）width: w || '380px',//设置视频播放器的显示高度（以像素为单位）height: "200px",});this.playlist.push(myPlayer)})})},},beforeDestroy(){ //（第三步）在销毁之前拿到video实例for(let i=0;i<this.playlist.length;i++){this.playlist[i].dispose(); //（第四步）dispose()是官方的销毁函数}},
}
</script>

Vue中video.js踩坑日记单页切换后视频无法播放相关推荐

ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
vue中使用bootstrap4踩坑之旅
bootstrapvue官网 bootstrap4中文官网以下文章记录本人的踩坑过程,最后已亲测有效,但不保证是最简便的方法,最好的建议是去bootstrapvue官网看文档直接尝试. 一.引入jq ...
浅谈cesium在vue2中的使用---踩坑日记（一）
vue2+cesium,我的踩坑记录许久不见,我又诈尸更博了.最近刚刚忙完项目,继续研究cesium,为以后做准备.也遇到了好多好多的坑,查了很多资料,好在最终是解决了. 在此分享下我的经验,顺便记 ...
vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
Antd Pro V4 protable详解（ps:踩坑日记）
Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...
vue 地图使用navigator_weex踩坑之旅第五弹 ~ 使用navigator内置模块实现导航
目前,我个人认为在weex中实现页面跳转的方式有两种,一种是通过weex提供的navigator模块,一种是通过vue-router之类的第三方插件.这两种方式在开发过程中都需要.那么什么时候采用na ...
全志哪吒D1-H Tina Linux Ubuntu 22.04入门踩坑日记
哪吒D1-H Tina Linux入门踩坑日记系统环境源码编译 mklibs-readelf的C++标准问题 m4的SIGSTKSZ问题 libfakeroot的_STAT_VER问题 read_ ...
Win11 + Ubuntu18.04 双系统踩坑日记
Win11 + Ubuntu18.04 双系统踩坑日记前言准备工作硬件配置镜像下载 Win11镜像下载 Ubuntu镜像下载启动盘准备 Win11启动盘 Ubuntu启动盘 Win11安装 ...

Vue中video.js踩坑日记单页切换后视频无法播放

使用video.js踩坑。单页切换后视频无法播放

解决思路

Vue中video.js踩坑日记单页切换后视频无法播放相关推荐

最新文章

热门文章

Vue中video.js踩坑日记 单页切换后视频无法播放

使用video.js踩坑。单页切换后视频无法播放

解决思路

Vue中video.js踩坑日记 单页切换后视频无法播放相关推荐

最新文章

热门文章

Vue中video.js踩坑日记单页切换后视频无法播放

Vue中video.js踩坑日记单页切换后视频无法播放相关推荐