YouTube IFrame Player API? How to?

Good day,
How can I get the following code to work?

It is sample code from the Youtube IFrame Player API documentation (Getting started).
YouTube Player API Reference for iframe Embeds (google.com)

I have tried the following, which did not work:

  1. Adding a WebHTMLContainer component to form

  2. Ser it's ElementID to 'player'.

  3. Entered code between tags to the Forms.OnShow event.

Did not work. :frowning:

How can I show the YouTube videos and control them via the API's Events?


Getting started

The sample HTML page below creates an embedded player that will load a video, play it for six seconds, and then stop the playback. The numbered comments in the HTML are explained in the list below the example.

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

We have the TWebYouTube component for this. All you need to do is set the YouTube video ID.
There is a demo under Demo\Web\Embedding

Yes, I tried that component also, but only saw the Video ID and I believe autoplay setting. There are several other variables available as well as the handling of events.

The code I included in my initial post indicates how to use the Stop Event for example.

This is what I need to do, enter any variable as well as work worth events.

NOTE: I do not want to be limited to only YouTube, but need to use Vimeo as well as any such video companies html/js api.

..................

We have not worked with these additional functionalities or with Vimeo, so also for us, this means we will need to study additional particular capabilities.

As there can be so many different scenarios, I accept having to include company specific Javascript code in an 'asm' block.

I just don't know why when I include it in the form's OnShow event it is not seeing the ElementID = 'player' of the WebHTMLContainer. :frowning:

As I mentioned, this is something specific to your wish and in order to investigate that, we would have to allocate time to investigate something that is outside the scope of the TMS WEB Core framework itself.
I recommend to do console.log() of the HTML elements you want to check and see what is happening with them.

I understand.

I'll figure out out. Would be able to work with the asm block.

Please do not allocate any time as it is outside of the scope of the framework. When I get it to work I'll post on this thread. :)

..............................

Thanks!

Got it to work.

What I did was place the Javascript in the Project.html file, before the 'rtl.run();' code and it works.

Regards.

1 Like