Я пишу веб-сайт с живым видео, в котором для воспроизведения видео используются сторонние инструменты.
Чтобы упростить мою проблему, я встроил все компоненты живого видео в одну HTML-страницу. Похоже на это.
<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&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 или обычную веб-страницу. Это происходит только на моей странице. (это странно, потому что я не понимаю, как функции ВНУТРИ iframe были вызваны скрытым стилем ВНЕ iframe).
Я решаю эту проблему, изменяя компоненты element-ui, чтобы избежать использования v-show при скрытии компонентов. Подробности показывают в решении, размещенном мной.
Спасибо всем, кто ответил на мою проблему:)