我正在编写一个直播视频网站，它使用第三方工具来播放视频。
为了简化我的问题，我将所有实时视频组件嵌入到一个 HTML 页面中。看起来像这样。
<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&vid=254084" id="haha"></iframe>页面加载后，视频正常播放。不过，我在 Chrome 控制台中编写了以下命令。
a = document.getElementById('haha')
a.hidden = true;//or a.style.display = 'none'
不仅视频窗口消失了(如我所愿)，音频也消失了(这不是我想要的)。我不知道它是怎么停止的，如果有什么办法仍然可以在后台运行视频。
<小时/>更新:
将 iframe 的大小更改为 0px * 0px 是将 iframe 移至背景的一种方法。但这不适合我的情况。
我正在使用 vue.js 和 element-ui。 iframe 位于 el-tabs 组件内，这意味着所有隐藏操作都会在选项卡更改后自动完成。我不知道如何防止这种默认操作。
后端 iframe 代码:
(() => {
window.onload = function() {
let ctx = document.getElementById('player');
let uid = ctx.getAttribute('uid');
let vid = ctx.getAttribute('vid');
let cfg = {
uid: uid,
vid: vid,
height: 500,
width: 800,
};
console.log(">>>",cfg);
player = polyvObject('#player').
livePlayer(cfg);
}
})();<!DOCTYPE html>
<html>
<head>
<script src="http://player.polyv.net/script/player.js"></script>
<script src="http://player.polyv.net/livescript/liveplayer.js"></script>
<script src="/backend/js/live.js"></script>
<link rel="stylesheet" href="/backend/css/live.css">
</head>
<body>
<div id="player" uid="#{uid}" vid="#{vid}"></div>
</body>
</html>当iframe嵌入MP4文件或普通网页时，不会发生此错误。只发生在我自己的页面上。 (这很奇怪，因为我不明白 iframe 内部的函数是如何由外部 iframe 外部的隐藏样式触发的)。
我通过修改 element-ui 组件解决了这个问题，以避免在隐藏组件时使用 v-show。详细信息见我自己发布的解决方案。
感谢所有回答我问题的人:)
最佳答案
隐藏 iFrame
.hiddeniFrame{
width:0px;
height:0px;
}
或者将其移离屏幕
关于javascript - iframe 隐藏时停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53208742/