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

问题:动态创建多个video实例后,切换其他页面后在切换回来,无法播放,控制台报警告id被占用!

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

代码:

 beforeDestroy(){ //(第三步)在销毁之前拿到video实例
    for(let i=0;i<this.playlist.length;i++){
     this.playlist[i].dispose(); //(第四步)dispose()是官方的销毁函数
    }
  },
  mounted() {
    setTimeout(_ => {
      let lang=this.videolist.pageData.length   //(第一步)这是多个视频地址数组的长度
      for(let i=0;i<lang;i++){
      var player=  videojs("my-video"+i, {   //播放的事件
              textTrackDisplay: false,
              posterImage: true,
              errorDisplay: false,
              controlBar: true,
              hls: {
                withCredentials: true
              }
            }, function () {
              // this.play()   //取消自动播放
            })
              this.playlist.push(player)  //(第二步)palylist是定义的空数组,存放多个视频实例
      }
    }, 1000);
  },

接上上篇博客《在vue项目中播放m3u8格式的视频》

博客地址:https://www.cnblogs.com/cb1490838281/p/12331262.html

原文地址:https://www.cnblogs.com/cb1490838281/p/12424892.html

时间: 2024-10-10 08:48:47

使用video.js踩坑。单页切换后无法播放的相关文章

【转载】[JS]让表单提交返回后保持在原来提交的位置上

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了.代码如下:<script type="text/javascript"> function Trim(strValue) { //return strValue.repla

mobilebone.js 移动web APP单页切换骨架

轻便体积小 原生无依赖 插件可扩展 设计无限制 动效可定制 动静两相宜 能进亦能退 桌面也兼修 一句话功能简介跟传统网页浏览的差别仅仅在于无刷新! 例如,我们浏览首页,首页上有个如下HTML链接: <a href="mocamoca.html">摩擦摩擦</a> 在传统页面,页面会刷新跳转至mocamoca.html, 但是,引入mobilebone.js后,就是无属性滑动到mocamoca.html页面. 二.mobilebone.js项目.资源以及八卦 Mo

react js踩坑之路(一)

讲真如果让我选个主流的mvvm框架做项目,我会果断选择vue,写起来不要太方便哦.但是,pc端要兼容ie8这个坑货,所以pc端只好选用react了啦~移动端果断用vue咯 再来讲讲构建工具,还是基于webpack 和 gulp,然后将react和vue 分开打包相关配置如下 webpack会依次将公用的打包到vendors.js .react的打包到react中,vue相关的打包到vue中,最后剩下的部分打包到load.js中. 下面直接用react实现一个后台页面的container组件吧,这

layui的引用js踩坑

前言: 今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.css就可以直接使用了,但是在我使用的时候,却一直提示找不到我use的那个模块,因为这个问题折腾了一下午,终于找到原因,特此记录 出现这个问题的原因,主要是因为没有从头开始看文档,一开始接触的时候,直接去百度搜用法,但是其他地方的各种博客什么的,只是告诉你引入layui.js和layui.css这个步骤

ionic 最简单的路由形式,头部固定,下面tab切换-------一个简单的单页切换起飞了

<ion-header-bar class="bar-dark" align-title="left"> <h1 class="title" >微信 </h1> <span class="button button-clear"> <i class="icon ion-plus padding-right"></i> <i cla

mobilebone.js-mobile移动web APP单页切换骨架

昨天看到张鑫旭前辈发了一条微博,便互动了下,是他的一个开源移动端框架,没事看看,这是效果

nuxt.js踩坑之 - SSR 与 CSR 显示不一致问题

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside<p>, or missing <tbody>. Bailing hydration and perfor

浅谈单页应用和多页应用——Vue.js向

浅谈单页应用和多页应用--Vue.js向 多页面 多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用. 在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写. 页面跳转=>返回HTML,优点:首屏时间快,SEO效果好,缺点是页面切换慢. 首屏时间快?访问页面,服务器只需要返回一个HTML文件,这个过程就经历了一个HTTP请求,请求响应回来,页面就能被展示出来. SEO(搜索引擎排名)效果好?搜索引擎能识别HTML的内容,根据内容进行排名. 页面切换慢:每一次切换

HTML5单页框架View.js介绍

什么是单页应用单页应用,是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用. 换句话来讲,用户视觉效果,与技术实现的载体,并不是一定要一一对应的.采取哪种技术方案,取决于产品设计.技术组成以及方案之间的优劣平衡.放到 Web 前端环境中,这个承载了多个视觉效果的载体,就是 html 文件(或 asp,jsp 等). 为便于描述,本文将使用多个术语.其名称及对应的含义如下所示: 页面:技术上的一个html文件:视图:视觉上的一页内容:初步实现单页应用直观效果的单页应用,其实现过程其实并不复