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 相关文章推荐
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
PHP6 mysql连接方式说明
2009/02/09 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
医学生自我鉴定范文
2013/11/08 职场文书
费用会计岗位职责
2014/01/01 职场文书
经理助理岗位职责
2014/03/05 职场文书
家长给学校的建议书
2014/05/15 职场文书
小学生读书活动总结
2014/06/30 职场文书
相亲活动方案
2014/08/26 职场文书
公司离职证明标准格式
2014/11/18 职场文书
简历自我评价优缺点
2015/03/11 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL