首页 > 其他分享 >解决微信浏览器video视频自动播放的问题

解决微信浏览器video视频自动播放的问题

时间:2022-08-27 15:00:08浏览次数:69  
标签:浏览器 微信 video 自动播放 true x5

<video controls="controls" src="" id="video" 
x5-video-player-type="h5"
preload="metadata"
playsinline="true" webkit-playsinline="true"
x-webkit-airplay="true"
x5-video-orientation="portraint"
x5-video-player-fullscreen="true">
</video>

1.playsinline="true" webkit-playsinline="true 解决ios自动播放全屏问题

2.x5-video-player-type="h5" x5-video-player-fullscreen="true" 解决安卓同层级播放

3.ios微信下通过 WeixinJSBridgeReady 事件进行自动播放,这个方法在安卓微信浏览器不生效

  //引入链接
  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 
 
  //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
     document.getElementById('video').play();
    }, false)

4.最后安卓微信浏览器解决方法是触摸播放:

(这样ios还是自动播放,只有在安卓端微信浏览器是触摸播放)

  //判断是否是Android端打开链接
  if (navigator.userAgent.indexOf("Android") > 0) {
     //如果是Android的话,在判断是否是微信端打开链接
    function is_weixn(){  
   var ua = navigator.userAgent.toLowerCase();  
    if(ua.match(/MicroMessenger/i)=="micromessenger") {  
        return true;  
    } else {  
        return false;  
    }  
}  
//如果是在Android端微信打开 触摸播放
if( is_weixn() ) {
   document.addEventListener('touchstart', function() {
   document.getElementById('bgVid').play()
     })
} else {
}

 

 

标签:浏览器,微信,video,自动播放,true,x5
From: https://www.cnblogs.com/angel648/p/16630562.html

相关文章

  • 微信测试号推送
    进入测试号页面扫码登录点我进入然后我们先把下图两个东西保存去github【国际最大的开源仓库】不会用没事注册账号就行了QQ邮箱注册即可然后登录登录好后如下图......
  • 关于微信小程序的使用
    首先第一步是下载微信开发者工具,这点可在官网看有详细介绍.一.创建项目在这里使用的是javascript-基础模板 二.小程序入口app.json重点介绍下文件的......
  • python实现推送消息到微信公众号
    使用到库:Requests实现方式:微信已开放了对应的接口,直接通过python的requests库,发起请求,实现推送消息到公众号微信公众号准备:1、没有注册微信公众号,可以使用微信提供的......
  • vue-video-player 断点续播的实现
    1.安装插件npminstallvue-video-player--save2.Main.js引入组件importVideoPlayerfrom'vue-video-player'require('video.js/dist/video-js.css')require('......
  • hbulider 运行微信开发者工具 Enable IDE Service (y/N) 
    问题:hbulider运行微信开发者工具出现如下页面,没有输入y的交互界面  解决办法:先安装微信开发者工具,然后打开微信开发者工具  再次运行:   ......
  • AE三维模型插件Video Copilot Element 3D mac
    Element3DMac破解版主要用于创建运动设计和视觉FX,VideoCopilotElement3Dformac破解版提供组对称创建模式、动态组文件夹反射、哑光反射模式等强大的功能,新版本的ele......
  • 微信小程序day02-
    一、template模板1.定义模板(其他wxml文件中) <templatename="模板名"></template>2.使用模板(当前wxml文件中) <templateis="模板名"></template>3.传递参数(......
  • 微信每日天气推送
    一、注册微信测试账号,编辑推送模板    二、springboot后台目录结构: 1.依赖1<properties>2<java.version>1.8</java.version>3......
  • 微信公众平台开发 - 接入公众号(.NetCore+WebApi)
    1.使用WebApi来配置公众号服务器地址,get用于签名,post用于接口,需要注意路由的定义  namespaceTzj.WeiXinSite.Controllers.Api{[Route("api/[controller]")]......
  • 创建企业微信教程
    企业微信应用消息配置说明优点:一次配置,持续使用配置好以后,只需要微信就能收消息,不再需要安装企业微信客户端PS:消息接口无需认证即可使用,个人用微信就可以注册具体操......