Question

在我的YouTube视频结束后，我想让视频恢复到初始状态。我不喜欢最后带链接的黑屏，我也更喜欢隐藏控制栏，虽然设置为自动隐藏，但在视频停止时无法隐藏。这是否可以使用

onPlayerEnded: function(){}, // when the player returns a state of ended

和

onStop: function(){}, // after the player is stopped

请记住，这将是对象版本，而不是iframe。 Tumblr（通常）将youtube嵌入为flash，而不是iframe。

你可以在这里看到和示例：http://syndex.me，顺便说一下Tumblr通过相当漂亮的tubeplayer插件成功地完成了Tumblr的视频限制范围。现在，如果我能够美化/淡化视频的结尾呢！非常感谢。

Answer 1

您可以使用YouTube JSAPI实现此目的。而不是等待玩家完成我有一个计时器来检查玩家的时间头是否已经达到持续时间，因此视频已经完成但是在玩家开始关闭之前。然后你只需要回到0并暂停，就像这样：

var i   = setInterval( checkPlayer, 100 );

function checkPlayer()
{
    if ( player.getCurrentTime() >= player.getDuration() )
    {
        clearInterval( i );

        player.seekTo( 0 );

        player.pause();
    }
}

这是一些有效的代码：

<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
<!--
    var player;
    var int;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            int = setInterval(handleInterval, 100);
        }
    }

    function handleInterval() {
        if (player.getCurrentTime() >= player.getDuration()) {
            player.pauseVideo();

            player.seekTo(0);
        }
    }
-->
</script>

Answer 2

快速而肮脏的方法是设置一个比视频长5秒的间隔计时器，然后在间隔完成时运行onPlayerEnded。使用blur或focusOut启动间隔，基本上是人们可能会做的一些鼠标事件。

$(".video").blur(function() {
  $("#something").delay(30500).queue(function() {
    // do something..

如果您想要完全控制，那么您可以将YouTube的Javascript API与回调和事件结合使用。 http://code.google.com/apis/youtube/js_api_reference.html#SubscribingEvents

Answer 3

艾哈迈德有正确的想法。您可以通过执行以下操作使用'onPlayerEnded'方法在tubeplayer插件中复制此内容：

onPlayerEnded: function(){ jQuery("#your-tubeplayer") .tubeplayer("seek", 0) .tubeplayer("pause"); }

值得注意的是onStop方法是一个'触发器'拦截器。 onPlayer [X]方法实际上是由播放器调用的，而其他onX事件在调用tubeplayer以执行所需操作时用于挂钩。

W.r.t。隐藏控制栏：你使用showControls：false？据我所知，你只能设置是否要在实例化youtube播放器本身时显示控件（并且不能在之后动态更改它）。

我测试了上面的修复程序，当使用showControls时，控制栏仍然隐藏：false。

如何使用jquery插件“tubeplayer”在播放结束时重新预览视频帧

3 个答案: