HTML5页面音视频在微信和app下自动播放的实现方法


Posted in HTML / CSS onOctober 20, 2016

现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那怎么实现自动播放呢?

纯H5页面在手机端中是无法实现自动播放,移动端浏览器大部分是禁用video和audio的autoplay功能并且,很多移动浏览器也不支持首次js调用play方法进行播放(只有用户手动点播放后暂停,然后用代码进行play可以)。

这样做主要是为了防止不必要的自动播放浪费流量。

以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放

XML/HTML Code复制内容到剪贴板
  1. function autoPlayMusic() {   
  2.     /* 自动播放音乐效果,解决浏览器或者APP自动播放问题 */   
  3.     function musicInBrowserHandler() {   
  4.         musicPlay(true);   
  5.         document.body.removeEventListener('touchstart', musicInBrowserHandler);   
  6.     }   
  7.     document.body.addEventListener('touchstart', musicInBrowserHandler);   
  8.     /* 自动播放音乐效果,解决微信自动播放问题 */   
  9.     function musicInWeixinHandler() {   
  10.         musicPlay(true);   
  11.         document.addEventListener("WeixinJSBridgeReady", function () {   
  12.             musicPlay(true);   
  13.         }, false);   
  14.         document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);   
  15.     }   
  16.     document.addEventListener('DOMContentLoaded', musicInWeixinHandler);   
  17. }   
  18. function musicPlay(isPlay) {   
  19.     var media = document.getElementById('myMusic');   
  20.     if (isPlay && media.paused) {   
  21.         media.play();   
  22.     }   
  23.     if (!isPlay && !media.paused) {   
  24.         media.pause();   
  25.     }   
  26. }  

以上所述是小编给大家介绍的HTML5页面音视频在微信和app下自动播放的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 #HTML / CSS
html5中的一些标签学习(心得)
Oct 18 #HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 #HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 #HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 #HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 #HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 #HTML / CSS
You might like
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python处理中文编码和判断编码示例
2014/02/26 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
什么是事务?为什么需要事务?
2012/01/09 面试题
J2EE包括哪些技术
2016/11/25 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
2014年学生工作总结
2014/11/20 职场文书
2014年就业工作总结
2014/11/26 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
鸦片战争观后感
2015/06/09 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Python中的嵌套循环详情
2022/03/23 Python