Я пишу веб-сайт с живым видео, в котором используются сторонние инструменты для воспроизведения видео.
Чтобы упростить мою проблему, я включил все компоненты видео в реальном времени на одну HTML-страницу. Похоже на это.
<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&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 для скрытия компонентов.