停止iframe里的视频音乐播放

本文介绍了一种在微信H5开发中,解决iframe内视频音乐无法停止播放的问题的方法。通过刷新iframe源链接的方式,有效避免了音乐持续播放及返回历史链接导致的404问题。

停止iframe里的视频音乐播放

问题描述:在做微信h5开发的时候,iframe里面引入了视频网址,当播放视频时,将iframe隐藏后,视频音乐还在播放。

问题解决:将iframe引入的视频网址刷新即可,即:

var ifr = document.getElementsByTagName("iframe")[0],
    ifrLink = ifr.getAttribute("src");
ifr.setAttribute("src", ifrLink);

问题经过:

  • 将iframe的src属性置空,发现无效,音乐还是有。
  • 将iframe的src属性改变随意值,减少请求,音乐还没有了。但是会引来另一个问题,就是当点击微信上方的返回时,会返回ifame的历史链接,也就是那个随意值,造成iframe页面404,所以只有上面的将原链接刷新,才能解决问题。
要检测 `iframe` 视频播放进度,可先获取 `iframe` 元素,再访问其内部的文档与视频元素,最后监听视频的 `timeupdate` 事件获取播放进度。以下是示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>检测iframe视频播放进度</title> </head> <body> <!-- 嵌入iframe --> <iframe id="videoIframe" src="your-video-page.html" width="640" height="360"></iframe> <script> // 获取iframe元素 const iframe = document.getElementById('videoIframe'); // 监听iframe加载完成事件 iframe.addEventListener('load', function () { // 获取iframe内部的文档 const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // 获取视频元素 const video = iframeDoc.getElementById('your-video-id'); if (video) { // 监听视频的timeupdate事件 video.addEventListener('timeupdate', function () { // 获取当前播放时间 const currentTime = video.currentTime; // 获取视频总时长 const duration = video.duration; // 计算播放进度百分比 const progress = (currentTime / duration) * 100; console.log(`当前播放进度: ${progress.toFixed(2)}%`); }); } }); </script> </body> </html> ``` 在上述代码中,首先获取 `iframe` 元素,接着监听其 `load` 事件,确保 `iframe` 加载完成。在 `load` 事件处理函数中,获取 `iframe` 内部的文档,再获取视频元素。最后,监听视频的 `timeupdate` 事件,在事件处理函数中计算并输出当前播放进度。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值