昆禾头条

浏览器自动播放 怎么取消浏览器自动播放视频

日期:2019-12-01 来源:浏览器自动播放 评论:

[摘要]有很多的网站都有自动播放视频的功能有时候很烦。所以怎么办呢01020301第一步点击点击浏览器右上角的“工具”再次点击“选项”02进入之后就会出现设置再次点击“高级设置”之后再次点击“网页内容高级设置”03最后一步就是选择插件选择点击运行之...……

有很多的网站都有自动播放视频的功能有时候很烦。所以怎么办呢

第一步点击点击浏览器右上角的“工具”再次点击“选项”

进入之后就会出现设置再次点击“高级设置”之后再次点击“网页内容高级设置”

最后一步就是选择插件选择点击运行之后就可以让浏览器不自动播放视频了。希望这个能帮助到大家http://www.lovelinxi.cn看完可以点个赞哦

本页搜狗指南内容仅代表作者本人意见,若因此产生任何纠纷由作者本人负责,概与搜狗公司无关。本页搜狗指南内容仅供参考,请您根据自身实际情况谨慎操作。尤其涉及您或第三方利益等事项,请咨询专业人士处理。

搜狗浏览器视频怎么独立播放 如何窗口播放视频

搜狗浏览器自动刷新怎么取消

浏览器自动播放 怎么取消浏览器自动播放视频

function getSrc(tvid) { sleep(3.99) return new Promise(function (resolve, reject) { console.log(albumData[tvid]) resolve(albumData[tvid]) }) } async function playVideo(tvid){ //立即调用play try{ $('video')[0].play() $('video')[0].pause() } catch(e){ console.log(e) } await getSrc(tvid).then((data)=>{ video = $('video')[0] video.src = data['src'] video.poster = data['img'] video.play() $('#num').text('playing'); }) }真正解决手机视频自动播放问题

为了确定具体的时间限制。在demo代码中有一个sleep函数,可以控制从点击到调play()方法的时间,在各个浏览器上实验后,统计如下:

最后发现部分移动端浏览器对于视频的播放有如下限制条件:

ios 10以下的safari/chrome/百度/手百: 1000ms

方法二:依赖微信的ready事件进行,可以解决ios微信的问题

function playVideo(tvid) { var count = 20 //单位ms var intervalTime = 10 //每隔多久执行一次 $('#num').text(count); var inter = setInterval(function intervalFunc() { count = count - intervalTime ; $('#num').text(count); if (count == 0) { //只有第一次就走到这分支才能播放 clearInterval(inter); video = $('#video')[0] video.play() video.pause() video.src = albumData[tvid]['src'] video.poster = albumData[tvid]['img'] //setTimeout(() => video.play(),0) video.play() $('#num').text('playing'); } }, intervalTime); }

预期结果应该是可以正常加载第二集视频并播放的。但是如果你进入播放页后,先点击第一集的播放按钮,等待视频播放后,再切第二集,又是可以正常播放的。

详细文档参考:http://fqk.io/issues-of-audio-video-in-webview/

qq没有问题,safari、百度、手百有问题

大概意思就是,绑定点击事件的函数,不要使用async异步写法,否则会失去之后允许视频播放的用户行为token,也就是会被浏览器认定为非人为操作导致无法播放。

document.addEventListener('touchstart', function(){ audio.play();}, false);

在小米6上测试,发现使用async也是没问题的,只有在超过1s才会播放失败。

http://h5.flyfinger.com/2016/tencentfun/

http://campaign.wandoujia.com/market/ifly/index.html?ch_src_share=pp_aty_wechatshare

发现这个问题纯属巧合,至今也没明白为什么在setInterval函数里调用play()会失败。

android4.2也引入了与ios类似的方案,由mediaPlaybackRequiresUserAction参数控制,默认是YES,所以必须由用户触发的行为,调用play()方法才有效,而onload事件是没法播放的,这也就是为什么手机浏览器无法通过js控制自动播放。

iphone6 safari浏览器打开爱奇艺电视剧播放页,如你好,旧时光,然后直接点第二集,播放器一直显示loading浮层,如下图所示

为了模拟以上几种场景,写了一个简单的页面进行模拟。demo非常简单,就是一个播放器,加几个基本的按钮,可以实现视频的播放、暂停与切换。

在写demo的时候,本想用setInterval实现一个倒计时的功能,setInterval会每隔一定时间调用某个固定函数intervalFunc,最后发现只有在第一次调用的intervalFunc函数里执行video.play()才有效,后面再调用的都无法播放视频,即使设置的时间很短也不行,代码如下:

2.打开播放页,点击封面图的播放按钮,播放后,再切点击第二集

我们对比一下操作场景1和场景3的区别,场景1在点击按钮时,video标签的src属性已经赋上,而场景3点击剧集,需要调用一个后台接口拿到播放链接,然后赋值到src,调用play(),所以两者的区别应该是多了一次请求鉴权的过程,这个请求需要一定的时间,所以我们猜想,是不是这个时间太长导致。

上面代码大概意思是从20ms开始倒计时,每隔10ms递减一次,每次减10ms,等到为0时,执行play(),但是失败了,20ms如果是放在同步执行的代码里,是没有问题的。

In Safari on iOS (for all devices, including iPad), where the user maybe on a cellular network and be charged per data unit, preload andautoplay are disabled. No data is loaded until the user initiates it.This means the JavaScript play() and load() methods are also inactiveuntil the user initiates playback, unless the play() or load() methodis triggered by user action. In other words, a user-initiated Playbutton works, but an onLoad="play()" event does not.

function getSrc(tvid) { sleep(1.9) return new Promise(function (resolve, reject) { console.log(albumData[tvid]) resolve(albumData[tvid]) }) } function playVideo(tvid){ getSrc(tvid).then((data)=>{ video = $('video')[0] video.src = data['src'] video.poster = data['img'] video.play() }) }

function getSrc(tvid) { sleep(3.99) return new Promise(function (resolve, reject) { console.log(albumData[tvid]) resolve(albumData[tvid]) }) } async function playVideo(tvid){ await getSrc(tvid).then((data)=>{ video = $('video')[0] video.src = data['src'] video.poster = data['img'] video.play() $('#num').text('playing'); }) }

然后在stackflow发现这样一篇文章,play-request-was-interrupted,里面说

video兼容性测试 #num { width: 100%; height: 100%; text-align: center; font-size: 48px; font-weight: bold; } 不支持video标签显示这段文字 播放 暂停 第一集 第二集 第三集 albumData = { 'video1': { 'src' : 'http://qamp.qiyi.domain/static/01.mp4', 'img' : 'http://qamp.qiyi.domain/static/01.jpg' }, 'video2': { 'src' : 'http://qamp.qiyi.domain/static/02.mp4', 'img' : 'http://qamp.qiyi.domain/static/02.jpg' }, 'video3': { 'src' : 'http://qamp.qiyi.domain/static/03.mp4', 'img' : 'http://qamp.qiyi.domain/static/03.jpg' } } function sleep(d){ for(var t = Date.now();Date.now() - t video.play(),0) video.play() $('#num').text('playing'); }

http://m.creatby.com/v2/manage/book/bcz2jo/

qq、小米浏览器没有问题,chrome、百度、手百有问题

怎么取消浏览器自动保存密码功能

浏览器无法播放视频怎么办?

怎么取消IE浏览器自动保存密码?

浏览器不能播放视频怎么办?

万达广场开门时间 万达广场开业筹备期

http://levisft.beats-digital.com

1. 方法一:监听touchstart事件,用户触摸屏幕后会自动播放

打开页面的过程中,js会提前发送鉴权请求拿到播放的url地址(这是为了缩短用户开播时间而做的优化),然后将url赋值给video标签的src属性,所以打开页面后,video标签其实已经赋上第一集的播放地址了。然后我们点击封面图的播放按钮,执行点击事件的函数,最终调用video对象的play()方法,从而正常播放视频。所以这一步,没有请求接口拿播放地址的操作。

猜想可能是因为后面执行的intervalFunc被认为是非用户触发的,所以被play请求被拦截了。

ios11以上safari/chrome/百度/手百:无限制

https://lieyu.qq.com/cp/a20170213ane/index-wx.html?

注:如果成功播放视频后,之后的操作就没有时间限制了,所以当进入页面后先播放第一集,然后再切第二集,就不会一直loading了

qq没有问题,safari、百度、手百有问题

在看H5站源代码时候,里面发送请求的代码都用了promise异步写法,于是改造了一下demo,如下:

前面的操作是一样的,来看看点击第二集的操作过程,其实比较类似,点击后需要先发鉴权请求拿到第二集的播放url,然后将url地址赋值到video的src属性,最终调用video的play()方法播放视频。到现在为止,一切还都正常, 符合我们的预期,接下来看看第三种操作。

https://yq.aliyun.com/mk/01/index.php

目前很多H5活动页面都会带有背景音乐,但音频也有类似的问题,具体的表现是在大多数安卓机上是可以自动播放,但是在ios上会有限制,那该如何解决呢?

这是一个兼容性问题,因为用iphone6 qq浏览器无法复现。因此我首先作了一个统计,看哪些浏览器可以复现,针对ios和andorid各选了几款机型,统计如下:

如果产品非得要求做到自动播放,该如何做呢?答案是在点击后立即调用play()方法,如果video原本有src的话,会播放之前视频,所以要立马调用pause()方法,但有可能会报Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(),这个错倒不要紧,无关紧要,参考play() request was interrupted,要暂停视频,也可以先将video的src清空,这样也是可以的。

改完后在小米6测试,发现用promise的写法是没问题的,结果一致,只有sleep超过1s才会出现问题。

于是统计了下爱奇艺电视剧播放页,切换剧集时,从点击到开播广告,大概是1200ms左右,所以超过了1s的时间限制,导致play()被浏览器视为非用户行为,所以无法播放。

qq没有问题,chrome、百度、手百、系统自带浏览器有问题

这大概要从手机流量说起,我记得在上大学那会,2008年左右,那时候还是PC时代,智能机还不怎么流行,流量也是非常昂贵,5块钱大概才30M,所以为了用户着想,浏览器禁止了autoplay和js的加载播放,防止流量偷跑的现象,而且在移动流量下播放视频,即使是手动触发视频播放,浏览器也会再次弹窗让用户确认,确认后才放行操作。但随着流量越来越便宜,苹果在IOS11版本取消了该限制。

https://segmentfault.com/a/1190000007864808

从以上来看,安卓chrome、百度、手百以及ios10以下的safari、百度和手百均是有问题的,QQ浏览器比较特殊,在android和ios均表现正常。

https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

于是我将点击函数改为async异步模式,代码如下:

我们先分析下播放视频的流程,首先会先向后台发送鉴权请求,其实就是根据你的用户信息,判断是否播广告、试看6分钟或是否要用券等等信息,比较复杂,但最终而言,都是为了拿到一个视频的播放链接(如果是鉴权后无法播放的,那就需要显示播放器的提示浮层了,暂不考虑这种情况)。然后再分析以下几种操作场景的区别:

document.addEventListener("WeixinJSBridgeReady", function () { audio.play();}, false);参考文献:

这一次,我们没有先播放第一集,而是直接想播放第二集视频,结果就GG了,播放器一直显示loading浮层。对于loading浮层的显示逻辑,应该是点击切换剧集就会显示,然后待拿到播放url,赋值src属性,调用play()播放视频后就应该隐藏的,实现方式就是监听播放器的playing事件,一般播放器发送playing事件就表示视频第一帧已经播放了。所以,loading浮层不消失的原因应该是播放器没有触发playing事件,或者说视频没有正常播放。

http://jzsg.lxustudio.cn/

http://nigg.treedom.cn/?dskid=ccc003

chrome/百度/手百/360极速: 1000ms

您至少需要输入5个字

相关内容

编辑精选

copyright © 2017 https://www.kunhecar.com 昆禾头条 版权所有