H5 video 自动播放（autoplay）不生效解决方案

一、简介

有个 h5 需要加入播放器，发现在 微信浏览器中 无法自动播放，在 移动端普通浏览器中 也无法正常自动播放
- ios 浏览器中（微信或者其他浏览器），每次刷新进入网页首次需要手动点击播放，下次会自动播放。
- 安卓 在微信浏览器中是随便怎么样都不会进入自动播放，在其他浏览器中会进入自动播放。
ios 平台可以通过微信官方的 jweixin 插件来解决，之前看有些文章说这种方式无法解决安卓机的自动播放(别的文章上写的：安卓就暂时无任何办法，限制太严重，只能通过诱导用户点击屏幕进行播放。)
但是经过测试，ios 上解决了，安卓 上在微信中也自动播放了，两端在其他手机浏览器上也都正常自动播放了，所以不知道是不是微信插件优化好了这个细节。

二、解决办法

`vue` 解决

1、安装插件

$ npm i jweixin-module

2、main.js 中配置

import wxjssdk from 'jweixin-module'
Vue.prototype.$wx = wxjssdk

3、使用并解决

mounted () {// 配置this.$wx.config({debug: false,appId: 'wx123456789',timestamp: '',nonceStr: '',signature: '',jsApiList: []})// 上面配置错误也无所谓的，即使配置失败，也会走 ready 函数// 主要目的就是为了走 ready 函数this.$wx.ready(() => {// 取得播放器对象，调用播放事件this.play()})
}

`CDN` 解决

1、导入。附：微信 jweixin 官方文档地址。

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、使用

// 配置
wx.config({debug: false,appId: 'wx123456789',timestamp: '',nonceStr: '',signature: '',jsApiList: []
})
// 上面配置错误也无所谓的，即使配置失败，也会走 ready 函数
// 主要目的就是为了走 ready 函数
wx.ready(() => {// 取得播放器对象，调用播放事件this.play()
})

H5 video 自动播放（autoplay）不生效解决方案相关推荐

微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
【h5 video】播放与暂停静音与取消静音
我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止.我的代码是这样的: $('#playMovie1') ...
PC端和移动端都支持视频video自动播放的代码
需求说明今天有个朋友微信上说目前他们在做抖音短视频的内容创作,方向是国家级非物质文化遗产「汝瓷」,想在他们官方网站上增加短视频的功能,将抖音的内容页上传到网站上. 其实这个功能并不复杂,只需要开通上 ...
videojs 播放 hls 流视频自动播放(autoplay + muted)
1.它没有之前 rtmp转流视频不能隐藏标签和离开页面会报错这个不会 2.自动播放无效解决 autoplay+autoplay 代码 <!DOCTYPE html> <ht ...
解决iOS h5 audio自动播放（亲测有效）
微信H5页面,实现audio自动播放: function initMusic() {//动态创建一个audio节点var audio = document.createElement('audio') ...
video自动播放隐藏播放控制条，并且用点击 video 元素的时候控制暂停和播放...
说一下几个要求: 页面打开自动播放当不能自动播放时,第一次点击(document)就触发视频播放因为播放控制条会挡住视频内容,所以隐藏,但是点击 video 元素的时候可以控制暂停和播放以上要求 ...
如何使视频video自动播放
格式:<video src="***.mp4" ></video> 在PC端要自动播放插入两个代码即可: 把自动播放的属性加上此时PC端并没有自动播放只 ...
解决H5 audio自动播放无效问题（应用于一切环境的一切浏览器）
通过查询多个文档改了很多的script但是还是没有用的,以下方法暴力简单这个办法需要用户点击了页面才会自动播放音乐. <audio id="bgmusic" src=&qu ...
H5背景音乐自动播放和暂停
在微信里,音乐不能自动播放,为了让其自动播放,通过调用微信接口实现,代码如下: html: <audio id="yy" autoplay preload src=" ...
H5 背景音乐自动播放（兼容IOS和Android）
首先看下效果图: 要实现的效果: 1.小icon自动旋转 2.音乐自动播放一. 小icon css 自动无限旋转 <img class='musicImg' src='' /> .mus ...

H5 video 自动播放（autoplay）不生效解决方案

一、简介

二、解决办法

`vue` 解决

`CDN` 解决

H5 video 自动播放（autoplay）不生效解决方案相关推荐

最新文章

热门文章

H5 video 自动播放（autoplay）不生效解决方案

一、简介

二、解决办法

vue 解决

CDN 解决

H5 video 自动播放（autoplay）不生效解决方案相关推荐

最新文章

热门文章

`vue` 解决

`CDN` 解决