The iframe stopped when hidden
Question
I'm writing a live video website, which use a third-party tools to play the video.
To simplify my problem, I embedded all the live video components into a single HTML page. It looks like this.
<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&vid=254084" id="haha"></iframe>
When the page was loaded, it played video normally. However, I write following commands in Chrome console.
a = document.getElementById('haha')
a.hidden = true;//or a.style.display = 'none'
Not only the video window disappeared (as I wish), the audio disappeared (that is not I want). I don't know how It stopped, and if there is any way can still run the video in the background.
Update :
Change the size of iframe into 0px * 0px is a way to move the iframe into background. However it does not fit my situation.
I was using vue.js & element-ui. The iframe was inside a el-tabs components, which means all the hidden operations was automatically done after the tab change. I don't know how to prevent such default operation.
Backend iframe code :
(() => { 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>
This bug will not happen when iframe embed a MP4 file, or a normal web page. Only happens on my own page. (that strange, because I don't understand how the functions INSIDE the iframe was trigger by the hidden style OUTSIDE iframe ).
I solve this problem by modifying the element-ui components to avoid using v-show when hiding components. Details show in the solution posted by myself.
Thanks for all people answering my problem :)
3 answers
solution1
1 2018-11-08 13:41:51
Hide the iFrame
.hiddeniFrame{
width:0px;
height:0px;
}
Or move it away off the screen
solution2
0 2018-11-08 14:10:33
It should be backend issue, so it will be great to update question with iframe content. I've reproduce your situation audio still playing after hiding iframe
setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )
<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>
solution3
0 ACCPTED 2018-11-09 02:39:04
At last, I solve my own problem by an ugly approach.
The iframe works fine when style visibility='hidden' was set. So I just rewrite the el-tab-pane in the element-ui.
The initial version of el-tab-pane was:
<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 did a little modification as follow (the v-visible was contained by 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>
In my own code, I replaced the el-tab-pane to my DIY TabPane , adding a props named fly to indicate whether to use v-show or the v-visible to hide the components.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.