2015-10-03 126 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; 
}