How to handle YouTube video events (started, finished, etc) in uiwebview iOS

ios events iframe uiwebview youtube

27,461

Solution 1

Have you tried (from the documentation) to assign an integer to the event of a movie ending?:

onStateChange This event fires whenever the player's state changes. The data property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible data values are:

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).

When the player first loads a video, it will broadcast an unstarted (-1) event. When a video is cued and ready to play, the player will broadcast a video cued (5) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:

YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED

So, something like:

if(event.data==YT.PlayerState.ENDED){ 
//do stuff here
                }

Solution 2

To detect when the video ends then the video has the state of 0 or YT.PlayerState.ENDED

Here's a link to jsfiddle a link!

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Page 1</title>
  </head>

  <body>

    <h1>Video page</h1>
    <br>


    <!-- 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: 'ussCHoQttyQ',
          playerVars: {
            'autoplay': 0,
            'controls': 0,
            'showinfo': 0,
            'rel': 0
          },
          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),
      // -1 unstarted 
      // 0 ended 
      // 1 playing
      // 2 paused
      // 3 buffering
      // 5 video cued
      var done = false;

      function onPlayerStateChange(event) {
        console.log(event);
        if (event.data == YT.PlayerState.ENDED) {
          alert(1);
        }
      }

    </script>




  </body>

</html>

27,461

Author by

Admin

Updated on February 12, 2020

Comments

Admin over 4 years

Currently I'm using the new iframe API to embed a YouTube video inside the uiwebview on the iPad and I've been able to make it auto play without user interactions. In the iframe API it is described how to use the onstatechange event but in my application it doesn't seem to work and unfortunately I can't see any debug in uiwebview.

I just want to able able to detect when the video ends, have you got any advice on it? Has anyone got it to work?