Iframe остановился, когда скрыт

Я пишу веб-сайт с живым видео, в котором используются сторонние инструменты для воспроизведения видео.

Чтобы упростить мою проблему, я включил все компоненты видео в реальном времени на одну HTML-страницу. Похоже на это.

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

Всего 3 ответа


Скрыть iFrame

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

Или отодвиньте его с экрана


Это должно быть проблема с бэкэнд, поэтому было бы здорово обновить вопрос с содержимым 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> 


Наконец, я решаю свою проблему с помощью уродливого подхода.

Iframe отлично работает, когда была установлена visibility='hidden' стиля visibility='hidden' . Поэтому я просто переписываю el-tab-pane в элементе-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-видимый был включен в пакет 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 на мою el-tab-pane DIY, добавив props именем fly чтобы указать, следует ли использовать v-show или v-visible для скрытия компонентов.


Есть идеи?

10000