How to handle YouTube video events (started, finished, etc) in uiwebview iOS_问答_开发者

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

开发者 https://www.devze.com 2023-03-04 19:29 出处：网络

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.

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?

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
                }

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>

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

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.

you need to make use of JavaScript for that.

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