微信公众号网页 H5 video 标签自动播放

环境：微信公众号网页
需求：H5 video 标签自动播放视频

video 标签：

<videoclass="video-el"mutedcontrolsautoplay:src="videoUrl":poster="posterUrl"
>对不起，您的浏览器不支持嵌入式视频！
</video>

方案一：

document.addEventListener('touchstart',(() => {const videoEl = document.querySelector('.video-el')videoEl.play()})()
)

方案二：
WeixinJSBridge 方法引自 weixin-js-sdk 包

if (window.WeixinJSBridge) {videoPlay()
} else {document.addEventListener('WeixinJSBridgeReady',() => {videoPlay()},false)
}

function videoPlay() {WeixinJSBridge.invoke('getNetworkType', {}, function() {const videoEl = document.querySelector('.video-el')videoEl.play()})
}

问题描述

在项目中不管使用方案一还是方案二，都出现了兼容性问题，初步预估为个人代码习惯导致 (refs 在 ios 端使用问题)。

解决方案

由于时间问题，索性在 Android 端使用方案一，ios 端使用方案二。

判断方式如下：

const u = navigator.userAgent
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios端

微信公众号网页 H5 video 标签自动播放相关推荐

微信公众号网页H5跳转微信小程序
https://www.jianshu.com/p/5bc4589dd034 wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要 ...
关于微信公众号搭建H5网页时网页授权域名配置问题
问题出现: 在搭建微信公众号网页时(框架:thinkphp) 出现如下报错 invalid appsecret rid: 61ab2ec3-328bb682-28f44296 即微信公众号搭建H5网页 ...
公众号分享页面php,微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...
前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
微信公众号网页授权思路解析及具体代码
微信公众号网页授权思路解析及具体代码微信开发文档实现方式也是两种: 1.静默授权登录授权登录以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静 ...
vue3+vant开发微信公众号网页爬坑不完全指北
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...
通过微信公众号实现H5登录授权
通过微信公众号实现H5登录授权一.相关配置 1.配置参数测试公众平台信息(测试号相关配置示例) 2.配置JS接口安全域名 3.扫码关注公众号 4.添加网页授权地址这里是指微信授权回调页面,同时发现 ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...

微信公众号网页 H5 video 标签自动播放

目录

微信公众号网页 H5 video 标签自动播放

问题描述

解决方案

微信公众号网页 H5 video 标签自动播放相关推荐

最新文章

热门文章