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的方法
Aug 29 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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 远程关机操作的代码
2008/12/05 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
JS中的三个循环小结
2017/06/20 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
详解JS函数防抖
2020/06/05 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python与C/C++的相互调用案例
2021/03/04 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
公司岗位说明书
2015/10/08 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript