最新|解决前端微信浏览器中video标签不能自动播放视频问题

最近前端有一个需求要求在网页中自动播放视频，PC端没有问题，移动端是有问题的，移动端为了避免浪费用户的流量，默认video是不能够自动播放的，即使加了autoplay属性，也只能实现在PC端自动播放，在移动端依旧不能自动播放。

网上有很多解决方案，都不能真正的解决问题，于是自己尝试了一下。

//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效document.addEventListener("WeixinJSBridgeReady", function () {document.getElementById('video').play();}, false);

（发现一个奇葩问题，有一些Android部分手机生效，部分手机不生效）

总结自动播放需要满足几个条件所有移动端手机都可以自动播放：

1.必须要有用户点击事件
2.用户点击事件调用video标签play方法时，video标签要存在（废话）
3.接收点击事件的标签和video标签不能是父子关系(就是body接收的点击事件调用video的play方法，播放器也是不会播放视频的)
4.接收点击时候后，要立刻调用play()方法，网络请求后调用play()方法可能会无效

解决方案

思路

在页面初始化话的时候写一个video标签，这个video标签在可见区域之外，video标签和需要点击事件控件不是父子关系，当用户点击播放按钮时，立刻调用play()方法。设置video标签的样式到可见区域内，通过z-index控制层级关系，就能实现自动播放。

代码

这里已vue项目为例

<!DOCTYPE html>
<html lang="en"><head></head><body><div id="index_Box" style="position: fixed;top: -50%;transform: translateY(-50%);max-height: 300px;width:100%;z-index: 30000"><video id="index_realScreenVideo" autoplay="autoplay" loop style="height: 100%;width: 100%;z-index: 30000"x5-video-player-type="h5-page" x5-video-player-fullscreen="true" class="video" preload="auto" type="application/x-mpegURL"poster="http://static-cos.xbov.cn/promotion_img/video_poster.gif" :src="realScreenUrl" playsinline=""webkit-inline="" webkit-playsinline="" x-webkit-airplay="allow"></video></div><div id="app"></div><script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script></body>
</html>

vue项目#app为项目根目录。给他添加点击事件。
#app与#index_Box下面的video标签不是父子关系

onclicked(i) {//用户点击时间播放视频let video = document.getElementById('realScreenVideo');this.realScreenUrl = "";  //这里不知道播放链接可以先播放空链接，video.play();//这次播放事件触发完成之后，可以随意调用play方法都是生效的。getPlayUrl();//网络请求获取播放链接，然后调用play方法。}

同一个播放器事件触发完成之后，可以随意调用play方法都是生效的。

需要关闭时暂停播放，将video播放器控件移出可视区域外。（不是清除设个控件）

这个方法可以适用于所有的移动端手机，但是有一个弊端就是至少要点击一次。

解决前端微信浏览器中video标签不能自动播放视频问题相关推荐

使用html5 video标签不自动播放视频问题（静音播放）
谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放.但是问题是没有声音. ...
微信小程序 video标签 ios不能播放视频或视频黑屏
首先用ios的浏览器打开视频的链接,看通过浏览器是否可以播放,如果可以则说明视频没问题. 注意视频的编码格式,再有就是,如果视频是直接存放在服务器上的,注意给出的视频路径不要存在中文,存在中文在ios ...
解决安卓微信浏览器中location.reload 或者 location.href失效的问题
解决安卓微信浏览器中location.reload 或者 location.href失效的问题参考文章: (1)解决安卓微信浏览器中location.reload 或者 location.href失 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信播放在服务器视频无法播放音乐,解决ios微信浏览器中audio和video音乐视频无法自动播放等问题...
产生问题的原因参考网址:点击对于自动播放的局限性,没有变通方案.正如前面所提及的,音频流只能从用户触摸事件加载.当针对移动版 Safari 进行开发时,重要的一点是要在必要时调整您的工作流,以适应 ...
安卓浏览器中video组件会显示播放按钮
安卓浏览器中video组件会显示大的播放按钮方法一: *::-webkit-media-controls-start-playback-button{display: none;-webkit-ap ...
video标签不能自动播放的原因
复习一下video标签重要的属性吧~文章来源站点https://www.yii666.com/ src 要播放的视频的 URL. autoplay 如果出现该属性,则视频在就绪后马上播放. contr ...
vue中使用TcPlayer，自动播放视频，以及下一个视频
前提是已经知道如何使用腾讯的TcPlayer. 腾讯云点播超级播放器开发:https://cloud.tencent.com/document/product/266/14603 一.自动播放视频. ...
h5 video 手机显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...
这里我们先来描述一下问题,页面中使用了video标签,按照video标签的官方介绍下图介绍: 没有设置poster的情况下在浏览器中我们可以看到视频的第一帧,页面效果如下图左图所示:但是嵌入App后, ...
Android浏览器自动播放视频,HTML 5自动播放谷歌浏览器Android不播放
我试图在用户在浏览器中打开网页时自动播放视频.在我的笔记本电脑上,自动播放适用于所有浏览器,但在Android上,它不适用于谷歌浏览器,在iphone中,它不适用于Safari浏览器.我已经做了一个搜 ...

解决前端微信浏览器中video标签不能自动播放视频问题

最新|解决前端微信浏览器中video标签不能自动播放视频问题

解决方案

思路

代码

解决前端微信浏览器中video标签不能自动播放视频问题相关推荐

最新文章

热门文章