2017-06-15 1 views
0

私のページには複数のiFrameがあります。私は "演劇"と "終了"イベントのイベントを添付したいと思います。 「再生」イベントは起動されますが、「終了」イベントは起動しません。以下は、私がイベントを添付するために使用するコードです。Vimeo Player付きイベント - 終了

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="https://player.vimeo.com/api/player.js"></script> 
    <form id="form1" runat="server"> 
     <div> 
      <iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
      <iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video1" id="video1"></iframe> 
     </div> 
    </form> 
    <script> 

     $(document).ready(function() { 
      var x = document.querySelectorAll("iframe"); 
      var nodelist = x.length; 
      alert(nodelist); 

      for (i = 0; i < nodelist; i++) { 

       var player = new Vimeo.Player(x[i]); 

       player.on('play', function() { 
        console.log('played the video!'); 
       }); 

       player.on('ended', function() { 
        console.log('ended the video!'); 
       }); 
      } 
     }); 

    </script> 
</body> 
</html> 

答えて

0

ビデオは、あなたがplayer.onfinishを(使用する必要があります完了した後にイベントを発生させる) - 詳細については、以下のコードを参照してください。

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="https://player.vimeo.com/api/player.js"></script> 
    <form id="form1" runat="server"> 
     <div> 
      <%--<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>--%> 
      <iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
      <%--<iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video1" id="video1"></iframe>--%> 
      <iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1" id="video1"></iframe> 
     </div> 

     <script> 

      $(document).ready(function() { 
       var x = document.querySelectorAll("iframe"); 
       var nodelist = x.length; 
       alert(nodelist); 

       for (i = 0; i < nodelist; i++) { 

        var player = new Vimeo.Player(x[i]); 

        player.on('play', function() { 
         console.log('played the video!'); 
        }); 

        player.on('ended', function() { 
         console.log('ended the video!'); 
        }); 

        player.on('finish', function() { 
         console.log('finished the video!'); 
         player.getDuration().then(function (duration) { 
          // duration = the duration of the video in seconds 
          console.log('video length is:', duration); 
         }).catch(function (error) { 
          // an error occurred 
         }); 
        }); 

        player.on('playProgress', function() { 
         console.log('Video in progress!'); 
        }); 

        //player.getVideoTitle().then(function (title) { 
        // console.log('title:', title); 
        //}); 
       } 
      }); 

     </script> 
関連する問題