热门标签 | HotTags
当前位置:  开发笔记 > 开放平台 > 正文

H5页面音视频自动播放

现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那怎么实现自动播放呢?
纯H5页面在手机端中是无法实现自动播放,移动端浏览器大部分是禁用video和audio的autoplay功能
并且,很多移动浏览器也不支持首次js调用play方法进行播放(只有用户手动点播放后暂停,然后用代码进行play可以)。
这样做主要是为了防止不必要的自动播放浪费流量。

以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放

function autoPlayMusic() {
    /* 自动播放音乐效果,解决浏览器或者APP自动播放问题 */
    function musicInBrowserHandler() {
        musicPlay(true);
        document.body.removeEventListener('touchstart', musicInBrowserHandler);
    }
    document.body.addEventListener('touchstart', musicInBrowserHandler);
    /* 自动播放音乐效果,解决微信自动播放问题 */
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
    var media = document.getElementById('myMusic');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}

推荐阅读
  • 微信H5分享配置详解
    本文详细介绍了如何在微信H5中配置分享功能,包括域名配置、引入JS文件、配置信息和调用微信JS-SDK接口等步骤。 ... [详细]
  • 使用 Jupyter Notebook 实现 Markdown 编写与代码运行
    Jupyter Notebook 是一个开源的基于网页的应用程序,允许用户在同一文档中编写 Markdown 文本和运行多种编程语言的代码,并实时查看运行结果。 ... [详细]
  • 专业人士如何做自媒体 ... [详细]
  • 本文介绍了一种在React应用中,如何在不刷新页面的情况下清除URL中的查询参数的方法,特别是在微信授权登录后,URL中会带有授权码等参数,这些参数可能会带来安全风险。 ... [详细]
  • 本文介绍了实现人工智能的多种方法,并重点探讨了当前最热门的技术——通过深度学习训练神经网络。文章通过具体实例详细解释了神经网络的基本原理及其应用。 ... [详细]
  • 如何发送微信语音口令红包
    微信不仅支持传统的文字口令红包,还新增了语音口令红包功能。用户可以通过语音口令来领取红包,增加了趣味性和互动性。本文将详细介绍如何发送微信语音口令红包。 ... [详细]
  • 近期,微信公众平台上的HTML5游戏引起了广泛讨论,预示着HTML5游戏将迎来新的发展机遇。磊友科技的赵霏,作为一名HTML5技术的倡导者,分享了他在微信平台上开发HTML5游戏的经验和见解。 ... [详细]
  • 浅析python实现布隆过滤器及Redis中的缓存穿透原理_python
    本文带你了解了位图的实现,布隆过滤器的原理及Python中的使用,以及布隆过滤器如何应对Redis中的缓存穿透,相信你对布隆过滤 ... [详细]
  • 本文详细介绍了Java反射机制的基本概念、获取Class对象的方法、反射的主要功能及其在实际开发中的应用。通过具体示例,帮助读者更好地理解和使用Java反射。 ... [详细]
  • 本文详细介绍了 Python 中 thread 和 threading 模块的使用方法,并提供了丰富的示例和解释。文章首发于 HURUWO 的博客小站,本平台进行同步备份发布。如遇图片加载失败或有任何疑问,欢迎前往原博客留言。 ... [详细]
  • 长期坚持软文创作的几点心得与体会
    深夜,我喜欢这种宁静的氛围,它让人能够专注于自己想做的事情。每晚听着《半夜听》节目,喝一杯热牛奶,感受内心的平静。在这样的环境中,我常常思考坚持写作的意义。 ... [详细]
  • 最新发布:100000个限量版微信红包封面等你来领!
    随着虎年的临近,各大品牌纷纷推出了独特的微信红包封面,为用户的新年增添更多趣味。本文将详细介绍如何快速获取这些限量版红包封面。 ... [详细]
  • 根据经济日报的报道,截至3月15日,包括抖音、今日头条、微信、淘宝、百度、大众点评、微博和小红书在内的多个主流App已经上线了算法关闭功能,用户可以在后台一键关闭“个性化推荐”。 ... [详细]
  • MATLAB实现Sobel边缘检测算法
    图像边缘是指图像中灰度值发生显著变化的区域。Sobel算子是一种常用的边缘检测方法,通过计算图像灰度值的梯度来检测边缘。本文介绍了Sobel算子的基本原理,并提供了基于MATLAB的实现代码。 ... [详细]
  • 拼多多的崛起之路
    随着4G通信技术的发展,互联网产品从PC端转向移动端,图像传输速度更快、更清晰,智能设备的应用提升了用户体验。移动互联网的普及为拼多多的崛起提供了时代背景。 ... [详细]
author-avatar
semb
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有