iframe 隐藏时停止

debugcn 发表于 Dev

毛托比

我正在编写一个实时视频网站，它使用第三方工具来播放视频。

为了简化我的问题，我将所有实时视频组件嵌入到一个 HTML 页面中。它看起来像这样。

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;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 文件或普通网页时不会发生此错误。只发生在我自己的页面上。（这很奇怪，因为我不明白 INSIDE 的函数iframe是如何被隐藏的样式 OUTSIDE 触发的iframe）。

我通过修改element-ui组件以避免v-show在隐藏组件时使用来解决这个问题。详细信息显示在我自己发布的解决方案中。

感谢所有回答我问题的人:)

毛托比

最后，我用丑陋的方法解决了我自己的问题。

visibility='hidden'设置样式后，iframe 工作正常。所以我只是el-tab-pane在 element-ui 中重写了。

最初的版本el-tab-pane是：

<template>
  <div
    class="el-tab-pane"
    v-if="(!lazy || loaded) || active"
    v-show="active"
    role="tabpanel"
    :aria-hidden="!active"
    :id="`pane-${paneName}`"
    :aria-labelledby="`tab-${paneName}`"
  >
    <slot></slot>
  </div>
</template>

A 做了一点修改如下（v-visible 包含在npm vue-visible 包中）[ TabPane]

<template>
  <div
    class="el-tab-pane"
    v-if="(!lazy || loaded) || active"
    v-show="active || fly"
    v-visible="active || !fly"
    role="tabpanel"
    :aria-hidden="!active"
    :id="`pane-${paneName}`"
    :aria-labelledby="`tab-${paneName}`"
  >
    <slot></slot>
  </div>
</template>

在我自己的代码中，我将替换el-tab-pane为我的 DIY TabPane，添加了一个propsnamedfly来指示是使用v-show还是v-visible隐藏组件。