CODEWITHSUNDEEP
javascripthtmldomiframevue.js
Toby Mao
Toby Mao

Reputation: 115

The iframe stopped when hidden

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&amp;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.

A demo of my project

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 :)

Upvotes: 0

Views: 2297

Answers (3)

Toby Mao
Toby Mao

Reputation: 115

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.

Upvotes: 1

Dim_K
Dim_K

Reputation: 571

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>

Upvotes: 0

Gabriel Lopez
Gabriel Lopez

Reputation: 452

Hide the iFrame

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

Or move it away off the screen

Upvotes: 1

Related Questions