动态添加/控制 vimeo 嵌入

Posted 2023-03-13

【中文标题】动态添加/控制 vimeo 嵌入

【英文标题】：dynamically adding/controlling vimeo embeds

【发布时间】：2013-03-15 06:40:57

【问题描述】：

我被困住了，真的需要一些帮助。

我正在尝试在页面上动态添加 vimeo 嵌入。页面加载视频的静止画面，当单击静止帧时，它会淡出并开始播放嵌入的视频。这只是一种简单的方法来制作我们自己想要的播放按钮，而不需要 vimeo 加载栏和位于其顶部的按钮。第一次做到这一点不是问题。

但是，视频下方有一个缩略图列表，当用户点击缩略图时，页面顶部的视频和静止帧必须换出并替换为新的视频和帧。它必须具有相同的功能。因此，当用户单击该帧时，它会淡出并在其后面播放新视频。

每次单击缩略图时，我都会尝试动态执行此操作。我将视频 ID 作为缩略图的attr。我可以把所有东西都换掉，但是当点击静止帧时我不能让它们播放。所以我相信它与 vimeo 的 api 有关，但我似乎无法弄清楚。

看看这里的代码，如果你发现问题出在哪里，请告诉我...

/*Load videos into top container when thumbnail is clicked....*/
        $('.thumb').click(function()
            theID = $(this).attr('id');
            $('#topImage').attr('src','<? echo site_url();?>/video_still_frame.jpg');
            $('#topImage').show();
            $('#embedContainer').html("<iframe id='player_"+theID+"' src='http://player.vimeo.com/video/"+theID+"?autoplay=0&api=1&player_id=player_"+theID+"' width='833' height='474' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>");
            clearPlayer();
            createPlayer(theID);
            $('#embedContainer').hide();

        );


    function clearPlayer()
        iframe='';
        player='';
        status='';  
    

    /*VIMEO API*/
    function createPlayer(idToUse)
        alert(idToUse);
        var iframe = $('#player_'+idToUse)[0],
            player = $f(iframe),
            status = $('.status');
            alert('playerCreated');

        // When the player is ready, add listeners for pause, finish, and playProgress
        player.addEvent('ready', function() 
            status.text('ready');
            player.addEvent('pause', onPause);
            player.addEvent('finish', onFinish);
            player.addEvent('playProgress', onPlayProgress);
            alert('add listeners');
        );

        // Call the API when a button is pressed    
        $('#topImage, #play').click(function()
            player.api('play'); 
            alert('play video');
        );

        function onPause(id) 
            status.text('paused');
        

        function onFinish(id) 
            status.text('finished');
        

        function onPlayProgress(data, id) 
            status.text(data.seconds + 's played');
        

   

    /*Run once on page load */
    createPlayer('123456789');  

【问题讨论】：

+1 我正在寻找类似的东西。

【参考方案1】：

我不是专家，但可能是这样的：http://jsfiddle.net/MAhE6/？

var player = $f(document.getElementById('player'));
  player.addEvent('ready', function()  
  player.api('play');
);


$("#1").click(function() 
  $iframeSRC = "http://player.vimeo.com/video/65520135?api=1&player_id=player";  
  $("#player").attr("src",$iframeSRC);
);

$("#2").click(function() 
  $iframeSRC = "http://player.vimeo.com/video/65511705?api=1&player_id=player";  
  $("#player").attr("src",$iframeSRC);
);

$("#3").click(function() 
  $iframeSRC = "http://player.vimeo.com/video/65448540?api=1&player_id=player";  
  $("#player").attr("src",$iframeSRC);
);