CODEWITHSUNDEEP
ioseventsiframeuiwebviewyoutube
Pierpaolo
Pierpaolo

Reputation: 211

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

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?

Upvotes: 21

Views: 31981

Answers (5)

Vaksus
Vaksus

Reputation: 11

It may be connected with autoplay-policy in your browser (it's disabled by default in mobile browsers).

If your browser is chrome you can start it with additional commandline flag --autoplay-policy=no-user-gesture-required - it worked for me.

Upvotes: 1

Gth lala
Gth lala

Reputation: 322

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>

Upvotes: 3

Nagaraj
Nagaraj

Reputation: 802

you need to make use of JavaScript for that.

Refer this link : https://developers.google.com/youtube/js_api_reference

Upvotes: -2

Elegant Microweb
Elegant Microweb

Reputation: 476

May this http://code.google.com/apis/youtube/js_api_reference.html#SubscribingEvents can help you

Upvotes: 0

CodaFi
CodaFi

Reputation: 43330

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
                }

Upvotes: 17

Related Questions