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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 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
信用卡效验程序
2006/10/09 PHP
利用 window_onload 实现select默认选择
2006/10/09 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
分享10段PHP常用代码
2015/11/11 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
python里将list中元素依次向前移动一位
2014/09/12 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
日语专业毕业生自荐信
2013/11/11 职场文书
采购求职信
2014/03/17 职场文书
法院信息化建设方案
2014/05/21 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python