2015-10-03 130 views
1

我试图想出一种方法,在当前帖子中的YouTube视频已停止播放时,自动转到WordPress上的下一篇文章。 youtube视频没有嵌入youtube API,而是使用iframe嵌入。YouTube视频结束

有没有人有任何想法如何做到这一点?

+0

这个问题帮我实现类似的东西:http://stackoverflow.com/questions/10580388/youtube-嵌入式视频开始 - 停止事件 –

+0

看起来不错,但我看到YT视频ID已经指定,因为我有很多视频已经嵌入在单独的帖子,这将如何工作? – TSurF

回答

0

我正在从适合该答案YouTube iframe API and WordPress改编的代码。您必须重写您的帖子才能使用短代码或将您的想法改编为您当前的配置。

使用指向YT ID的短代码嵌入视频:[ytplayer id="M7lc1UVf-VE"],播放使用YT iFrame API
我们使用get_next_post()(可能是get_previous_post())检查下一篇文章链接,并将其传递给JavaScript代码。当视频结束,如果我们有一个实际的下一篇文章,它会跳转到链接:

add_shortcode('ytplayer', 'print_yt_player'); 

function print_yt_player($atts) { 
    wp_enqueue_script('yt-iframe', 'https://www.youtube.com/iframe_api'); 
    $yt_id = $atts['id']; 
    $next_post = get_next_post(); 
    $go_next = 'false'; 
    if (!empty($next_post)) { 
     $next_post = get_permalink($next_post); 
     $go_next = 'true'; 
    } else { 
     $next_post = ''; 
    } 

    $html = <<<HTML 
     <div id="player"></div> 
     <script> 
      var player, done = false; 
      function onYouTubeIframeAPIReady() { 
       player = new YT.Player('player', { 
        height: '390', 
        width: '640', 
        videoId: '$yt_id', 
        playerVars: { 'autoplay': 1, 'controls': 1 }, 
        events: { 
         'onReady': onPlayerReady, 
         'onStateChange': onPlayerStateChange 
        } 
       }); 
      }  
      function onPlayerReady(event) { 
       event.target.playVideo(); 
      } 
      function onPlayerStateChange(event) { 
       if(event.data == YT.PlayerState.ENDED && $go_next) 
        window.location.href = '$next_post'; 
      } 
     </script> 
HTML; 
    # It's important that the previous line doesn't have ANY whitespace before of after HTML; 
    return $html; 
}