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实现可滑动跳转的分页插件示例
May 08 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
详解CSS不受控制的position fixed
May 25 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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python3 replace()函数使用方法
2018/03/19 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
单位在职证明范本
2014/01/09 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL