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制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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的图形函数中显示汉字
2006/10/09 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
基于Python pip用国内镜像下载的方法
2018/06/12 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
python计算n的阶乘的方法代码
2019/10/25 Python
基于python实现对文件进行切分行
2020/04/26 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
Linux机考试题
2015/07/17 面试题
药学专业个人自我评价
2013/11/11 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
工作表现评语
2014/01/19 职场文书
家长学校实施方案
2014/03/15 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
win10安装配置nginx的过程
2021/03/31 Servers