Question

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

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

match (qr:Questionnaire{QuestionnaireReturnID:186406})<-[:IN]-(ftr:FreeTextResponse)<-[:IN]-(w:WordGraph_Word)
WITH COLLECT(w) as wordList, count(w) as allWordsInSourceCount
UNWIND(wordList) as words
WITH words, allWordsInSourceCount
MATCH (words)-[relIn:IN]->(ftr2:FreeTextResponse)-[:IN]->(qr2:Questionnaire) WHERE qr2.QuestionnaireReturnID <> 186406
WITH qr2, count(distinct words) as matchFrequency, allWordsInSourceCount
WITH qr2, matchFrequency, allWordsInSourceCount, (toFloat(matchFrequency) / toFloat(allWordsInSourceCount)) * 100 as percentageMatch
WITH qr2, matchFrequency, allWordsInSourceCount, percentageMatch order by percentageMatch desc where percentageMatch > 30
RETURN qr2.QuestionnaireReturnID, matchFrequency, allWordsInSourceCount, percentageMatch

加载页面后，它可以正常播放视频。但是，我在Chrome控制台中编写了以下命令。

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;vid=254084" id="haha"></iframe>

不仅视频窗口消失了（如我所愿），音频也消失了（那不是我想要的）。我不知道它是如何停止的，如果有任何方法仍然可以在后台运行视频。

更新：

将iframe的大小更改为0px * 0px是将iframe移入背景的一种方式。但是，这不适合我的情况。

我正在使用vue.js和element-ui。 iframe位于a = document.getElementById('haha') a.hidden = true;//or a.style.display = 'none'组件内部，这意味着在更改标签后，所有隐藏的操作都是自动完成的。我不知道如何防止这种默认操作。

后端iframe代码：

el-tabs

(() => {
        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>嵌入MP4文件或普通网页时不会发生此错误。仅发生在我自己的页面上。（这很奇怪，因为我不知道iframe内的函数是如何由隐藏样式iframe触发的。）

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

感谢所有人回答我的问题：）

Answer 1

隐藏iFrame

.hiddeniFrame{
    width:0px;
    height:0px;
}

或将其移出屏幕

Answer 2

这应该是后端问题，因此使用iframe内容更新问题将非常有用。隐藏iframe

后，我已重现您的情况音频仍在播放

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

Answer 3

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

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

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可见区包含在npm vue-visible package中）[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，并添加了一个名为props的{{1}}来指示是否使用fly或v-show隐藏组件。

隐藏后iframe停止

3 个答案: