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实现Material Design效果
Mar 09 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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.ini 中文版
2006/10/28 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP chr()函数讲解
2019/02/11 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
python的help函数如何使用
2020/06/11 Python
Python学习之time模块的基本使用
2021/01/17 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
自我评价是什么
2014/01/04 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2014年绿化工作总结
2014/12/09 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL