解决单页面应用微信浏览器后台加载视频

抽象磷火
• 阅读 3608

问题

单页面应用,用户使用wifi打开过一个视频后,即使销毁了video,甚至播放页面都关闭的情况下,微信浏览器仍然会在后台继续加载视频,这会浪费很多流量
最开始以为使用销毁vidoe标签后,视频即会停止加载,事实上在大部分浏览器上确实如此,但是微信内置浏览器在这方面表现不一致。
在使用流量的情况下,退出播放页面后视频确实停止加载了,但是在wifi下,视频会在后台继续下载,除非退出当前单页面应用。

解决问题

  • 1、最开始在组件 destroy 的 hook 时,dispose videojs 实例,无效,视频继续后台下载。
  • 2、后来想让videojs 加载一个空的视频资源地址欺骗微信浏览器,videojs.src(""),无效,视频还是会继续加载。
  • 3、 空的字符串不生效,加载一个无效的视频资源地址,再销毁videojs实例,成功解决视频后台下载的问题。

主要代码如下:

destroyed() {
      // 组件销毁时,用一个假的播放视频地址,欺骗微信浏览器,使其加载其他的视频,不继续加载我们的视频同时销毁videojs
      this.player.src({
        src: "http://124.160.184.108/live/5/45/3bfabc1fe16a4282b50ea095928c1f60.m3u8",
        type: 'application/x-mpegURL',
        withCredentials: false
      })
      setTimeout(()=>{
        this.player.dispose()
      },1500);
    }
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
vue video全屏播放
需求:1、视频为长方形,页面初始化打开为横屏全屏播放视频。2、微信不支持自动播放,故自动播放需求删除。方法:1、vuevideoplayer插件因需求较简单,仅要求播放本地一个视频,故未选择使用插件。2、video<divid"video_box"style"zindex:999;":cl
Easter79 Easter79
3年前
thinkcmf+jsapi 实现微信支付
首先从小程序端接收订单号、金额等参数,然后后台进行统一下单,把微信支付的订单号返回,在把订单号发送给前台,前台拉起支付,返回参数后更改支付状态。。。回调publicfunctionnotify(){$wechatDb::name('wechat')where('status',1)find();
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Stella981 Stella981
3年前
Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理
在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过JavaScript来监听获取视频的这几种状态。html页面视频标签大体如下:<video id\"video" controls\"controls
Stella981 Stella981
3年前
LayaAir使用原生Video视频播放以及Video监听事件
1.原生Video的基本属性src:视频的属性,url地址poster:视频封面,没有播放时显示的图片preload:预加载|none|metadata(部分预加载)|auto。默认为autoautoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
video 标签存在的一些坑
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:在微信浏览器内播放时,视频会自动全屏如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置高度,视频的容器在安卓手机上会被视频的封面撑大到变形<videoclass"videosource"width"10
taskbuilder taskbuilder
6个月前
前端文件和后台服务的概念
多层架构的应用系统里文件会分为前端文件和后台服务,这两类文件的具体含义如下:2.1前端文件在Web浏览器、手机APP或微信小程序等客户端软件中运行的代码(包括HTML、JavaScript和CSS等)或图片、音视频等资源文件统称为前端文件,用来填报和展示信