How to handle YouTube video events (started, finis

2019-03-15 01:24发布

站内问答 / iOS
362 5 6

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?

5条回答
The star\"
2楼-- · 2019-03-15 01:47

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.

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
3楼-- · 2019-03-15 01:50

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
                }
查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
4楼-- · 2019-03-15 01:57

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>
查看更多
0人赞 添加讨论(0) 举报
beautiful°
5楼-- · 2019-03-15 02:00

you need to make use of JavaScript for that.

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)