文档章节

html5 video微信浏览器视频不能自动播放

郁极风
 郁极风
发布于 2017/05/07 13:44
字数 345
阅读 97
收藏 1

html5 video微信浏览器视频不能自动播放

一.微信浏览器(x5内核):

1.不能自动播放

2.全屏

3.最顶层(z层的最顶层)

二.ios系统解决方案:(无phone手机未测试)

<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio> 
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> 
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> 
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> 
      <p>Your user agent does not support the HTML5 Video element.</p> 
</video> 
<!-- 必须加在微信api资源 --> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
     //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 
     document.getElementById('car_audio').play(); 
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('car_audio').play(); 
        document.getElementById('video').play(); 
    }, false); 
</script>

三.android系统中解决方案:


误区:(无效的解决方案)

1.设置video属性autoplay;

2.通过js调用play();

3.通过js来触发click事件;

4.使用插件videojs;

5.通过js调用load()然后再调用play();

6.设置video属性webkit-playsinline="true";

7.touchstart监听;

8.stalled事件处理;

9.canplaythrogh事件处理;

10.readyState大于2的处理;

11.DOMContentLoaded监听;

12.微信js api中WeixinJSBridgeReady;

13.微信js api中getNetworkType;

14.白名单;

本文转载自:http://www.cnblogs.com/zlp520/p/6410739.html

共有 人打赏支持
郁极风
粉丝 8
博文 30
码字总数 8787
作品 0
长沙
程序员
私信 提问
H5视频兼容安卓、IOS踩坑相关

1.视频暂停和播放 将JQ对象转换为原生JS对象 有遮罩层的视频播放和暂停 2.音乐开关 3.视频切换+音量播放 pug js 4.微信不能够自动播放 5.页面强制横屏问题 6.H5--移动端视频video的android兼...

谭瞎
07/28
0
0
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
08/07
0
3
zymedia的在使用中碰到的问题

记笔记,免忘记!最近用到了视频插件zyMedia。这个插件的简介地址:https://github.com/ireaderlab/zyMedia 问题一: 首先视频的上方显示的标题,实例是这样写的data-config='{"mediaTitle":...

zilvzsy
05/12
0
0
HTML5 视频转换软件 Freemake Video Converter

HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播放器也越来越多,但问题是每个浏览器所支持的视频格式不同,想在各大浏览...

海纳百川
2013/01/14
0
1
91.HTML5 视频播放 及 声音播放

1.视频播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div align="center"> <video width="820" height="540" controls autoplay> <source sr......

Lucky_Me
02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【实践】如何获得Rinkeby网络的测试以太币

当把智能合约部署到Rinkeby Test Network时,需要获得测试以太币。其网络获取测试以太币的方法同Ropsten Test Network有些不同,本文详细讲解一下。 1 访问网站 访问rinkeby网络(https://w...

HiBlock
29分钟前
1
0
Logback中如何自定义灵活的日志过滤规则

当我们需要对日志的打印要做一些范围的控制的时候,通常都是通过为各个Appender设置不同的Filter配置来实现。在Logback中自带了两个过滤器实现:ch.qos.logback.classic.filter.LevelFilter...

程序猿DD
36分钟前
2
0
ES6中let 和 const 的新特性

在javascript中,我们都知道使用var来声明变量。javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量。 ECMAScript 6 是 JavaScript 语言教程,全面介绍 EC...

peakedness丶
43分钟前
2
0
Springboot中Jackson的操作

欢迎工作一到八年的Java工程师朋友们加入Java高级交流:854630135 本群提供免费的学习指导 架构资料 以及免费的解答 不懂得问题都可以在本群提出来 之后还会有直播平台和讲师直接交流噢 表数...

编程SHA
45分钟前
4
0
自定义Maven插件功能

自定义maven插件 创建一个maven 项目 通过上述方式创建,会自动引入maven-plugin-api 依赖和打包方式;如下 <packaging>maven-plugin</packaging><dependency> <groupId>org.apache.mave......

春哥大魔王的博客
56分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部