【问题标题】:Vimeo CallBack function - Click the button when the video endsVimeo CallBack 功能 - 视频结束时单击按钮
【发布时间】:2016-03-15 21:11:02
【问题描述】:

我有很多我正在制作的视频。目前,用户必须单击“按钮”以确保他们已经观看了视频,然后才能继续观看下一个视频。我想更改此功能,以便每当用户观看视频时,“按钮”都会自动点击并上传下一个视频。单击按钮对于保存用户数据很重要。

现在这是我已经实现的(测试代码):

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<p style="text-align: center;"><iframe id="player1" src="https://player.vimeo.com/video/156873237?title=0" width="500" height="281" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

<button type="button" onclick= "showMsg();">Click Me!</button>  
<script>
     function showMsg(){
           alert('you clicked');
     }
</script>

<script>
    var $ = jQuery.noConflict(); 
$(function() { 
    var iframe = $('#player1')[0];
    player = $f(iframe);
    player.addEvent('ready', function() {
    player.addEvent('finish', onFinish);
  });

 $('button').bind('click', function() {
      player.api($(this).onFinish());
   });

 function onFinish() {
        alert('finished');
      }
 });

使用它,每当视频结束时,它都不会给出任何响应。有什么我遗漏或做错了什么。

【问题讨论】:

    标签: jquery vimeo


    【解决方案1】:

    根据他们的文档here,您应该在启用 API 的嵌入 url api=1&player_id=player1 上添加更多参数并指示 playerId

    <p style="text-align: center;"><iframe id="player1" src="https://player.vimeo.com/video/156873237?title=0&api=1&player_id=player1" width="500" height="281" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
    
    <button type="button" onclick= "showMsg();">Click Me!</button>
    
    
    <script>
        function showMsg(){
            alert('you clicked');
        }
    
        $(function() { 
            var iframe = $('#player1')[0];
            player = $f(iframe);
            player.addEvent('ready', function() {       
                player.addEvent('finish', onFinish);
            });
    
         function onFinish(id) {
                alert('finished');
              }
         });
    </script>
    

    http://jsfiddle.net/vy9kf0w5/49/

    【讨论】:

      猜你喜欢
      • 2020-08-29
      • 2021-08-14
      • 1970-01-01
      • 2020-04-25
      • 1970-01-01
      • 2021-10-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多