Youtube Play Pause API function

I have a hype Dokument with a HTML Widget. In this widget i put the Youtube API Code:

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

Now i like to put a Button on the Hype Scene and Control the YouTube Player in the HTML (iFrame)

I try this:

    hypeDocument.YT.Player.next();
hypeDocument.getElementById('Musik').innerHTML.player.next();
window.parent.document.getElementById('Musik').player.next();
player.next();

nothing work. What am I doing wrong?

Since an HTML widget is within an iframe, you would need to run that function as a script within that iframe -- it cannot be run outside of it. Otherwise, you can use a regular rectangle element to place your <div id="player"></div>, and then run the 'script' portion of the above code as an 'on scene load' JavaScript function.

Yeaahhh … that was the problem . Many thanks

Sorry, I have now again the same Problem.

The Problem is:
Either , I got it in the widget iframe. Then I can not press Play and Pause . Or I got it in the Rectangle and I’ve problems with the scenes . And load as an “on scene load” didn´t work :frowning:

Did you have a tip for me?

OK i Think I know now my Problem. I have the YouTube API in a Rectangle with Variable. When i jump to a second Scene the Variable´s didn´t change. When i make a iFrame it works…but I a can´t jump to next or previews Videos.

The important think is, that i didn´t want to reload the page. Is this possible?

It might be useful if you could post a zip of your current .hype document to take a look; there’s a lot of different ways this might be accomplished so we could provide guidance knowing what you are presently doing.

Here are a testcode. i hope someone can help me with my Problem

testcode.hype.zip (32.5 KB)

I believe what is happening is this:

  • you are using a persistent symbol which means the youtube element will be the same across scenes
  • in the first scene, the code is successfully loading the video that you request
  • when you change scenes, the player is already created since it is a persistent symbol. Thus the code that sets the video id isn’t called, since this is in the onYouTubeIframeAPIReady() handler, and it is already loaded.
  • The youtube video is simply reloaded by virtue on how persistent symbols move across scenes (I’d say this isn’t desired behavior, but there’s not much we can do about it).

What you’ll want to do instead is call a youtube API to change the video of the player, or simply don’t use persistent symbols and instead have a different video for each scene.

Hi, may I direct you to the following resource. It may help. A few links there to some documents that show the youtube API at work.

You may want to look at using [player].loadVideoById(id, startseconds, endseconds, quality) ([player] is referring to your element that holds the video) when you want to load in a new video.

This is also quite useful as a wrapper for youtube (and other) videos that may make it easier

1 Like

The tip was good, and it works for one ID. But I work with Playlists, and the loadVideoByiD didn´t work with that. Is it possible to only restart the YouTube API. or Kill the player… i try it with player.destroy()