H5音视频自动播放 退出页面暂停播放 |
您所在的位置：网站首页 › html5背景音乐自动播放怎么关闭 › H5音视频自动播放 退出页面暂停播放 |
|
音视频设置autoplay后，并不能自动播放，而是需要用户与页面发生交互 解决方案： 1、在页面进入后，监听touchstart事件，用户触摸页面的任意位置后，调用audio.play()来播放音视频 //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放 document.addEventListener('touchstart', function () { function playAudio() { let audio = document.getElementById('audio'); audio.play(); } playAudio(); });2、在微信中打开页面， 引入微信插件 监听WeixinJSBridgeReady 调用 document.addEventListener("WeixinJSBridgeReady",function() { document.getElementById('audio').play(); }, false);页面后台退出，音频自动暂停，再次回来后自动播放 判断页面是否隐藏，如果页面隐藏，暂停播放 isPageLeave() { let hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange') let onVisibilityChange = () => { if (!document[hiddenProperty]) { audio.play() } else { audio.pause() } } document.addEventListener(visibilityChangeEvent, onVisibilityChange) } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |