CODEWITHSUNDEEP
javascriptvideoyoutube
Amonnn
Amonnn

Reputation: 301

Youtube video stop on pause event

I have several youtube iframes with TV channels on my website page. 

<div>
<iframe id="ytplayer"  src="https://www.youtube.com/embed/ntBxGznOML0?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer"  src="https://www.youtube.com/embed/zl4aeAfhdro?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer"  src="https://www.youtube.com/embed/URD4UWm-edg?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer"  src="https://www.youtube.com/embed/75j9l956bVs?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>

I'm trying to use one java script to play video muted and to stop it on pause event but it doesnt work for me. The script is following 

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
            
        }
    });
}
function onPlayerStateChange(event){
     player.stopVideo(0);
         
  }
   

}
function onPlayerReady(event) {
    player.mute();
    player.playVideo();
}

I need to full stop video on pause event, because it is live tv channel, so if I press pause now, in 10 minutes I will get a record but not a live stream. How can I make my script work?

Upvotes: 1

Views: 3948

Answers (1)

zer00ne
zer00ne

Reputation: 43853

UPDATE

OP has multiple players and uses plain JavaScript, the following changes are:

  1. Multiple players shared the same id, now each player has a unique id.
  2. Added a <button class='stop' data-id='yt*'>STOP</button> for each player.
    • Each button has a data-id. It's value corresponds to it's player's id.
  3. Wrapped <section id='videoChannels'></section> around everything.
    • Added the eventListener to #videoChannels so when a button is clicked #videoChannels is referred to as the target.currentTarget which can be compared to the event.target to determine the button that was clicked (i.e. event.target).
    • After the capture eventPhase the event chain reaches event.target (the button that was clicked) and the function ytCommand() is called on the player that corresponds to the button (see step 2.)

Working Demo

PLUNKER

Stopping YouTube Player

  1. Access the iframe by using contentWindow method
  2. Next cross-domain communication through an iframe is possible with the postMessage API.
  3. Next post commands from YouTube iFrame API

Relevant Code

$('#stop').on('click', function() {

  $('#ytPlayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

Working Demo

FIDDLE

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Stop YTPlayer</title>
</head>

<body>
  <section id="videoChannels">
    <div>
      <iframe id="yt0" class="player" src="https://www.youtube.com/embed/8IzxdjVr5ZI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      <button class='stop' data-id='yt0'>STOP</button>
    </div>

    <div>
      <iframe id="yt1" class="player" src="https://www.youtube.com/embed/AhenpCh6BO4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      <button class='stop' data-id='yt1'>STOP</button>
    </div>

    <div>
      <iframe id="yt2" class="player" src="https://www.youtube.com/embed/HrmF-mPLybw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      <button class='stop' data-id='yt2'>STOP</button>
    </div>

    <div>
      <iframe id="yt3" class="player" src="https://www.youtube.com/embed/6KouSwLP_2o?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      <button class='stop' data-id='yt3'>STOP</button>
    </div>
  </section>
  <script>
    var vidCh = document.getElementById('videoChannels');

    vidCh.addEventListener('click', ytCommand, false);

    function ytCommand(event) {
      if (event.target != event.currentTarget) {
        var btn = event.target.getAttribute('data-id');
        var ytp = document.getElementById(btn);
        ytp.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
      }
    }
  </script>
</body>

</html>

Upvotes: 2

Related Questions