Я пишу веб-сайт с живым видео, в котором используются сторонние инструменты для воспроизведения видео.
Чтобы упростить мою проблему, я включил все компоненты видео в реальном времени на одну 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
для скрытия компонентов.