2015-02-26 30 views
5

Tôi đang cố gắng đoạn mã sau vào trang bài WordPress:YouTube API iframe và WordPress

<div id="player"></div> 

<script> 
    // 2. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 

    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // 3. This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      playerVars: { 'autoplay': 1, 'controls': 0 }, 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
     event.target.playVideo(); 
    } 

    // 5. The API calls this function when the player's state changes. 
    // The function indicates that when playing a video (state=1), 
    // the player should play for six seconds and then stop. 
    var done = false; 
    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
    } 
    function playVideo() { 
     player.playVideo(); 
    } 
    function pauseVideo() { 
     player.pauseVideo(); 
    } 
    function stopVideo() { 
     player.stopVideo(); 
    } 
    function loadVideoById(val) { 
     player.loadVideoById(val, 0, "large"); 
    } 
</script> 

Tuy nhiên, không có gì được hiển thị.

+0

Bạn có thêm này trong bài biên tập hoặc trong mã nơi nào đó? Nếu trong trình chỉnh sửa bài đăng, bạn có thể chỉ dán URL của video trên YouTube và nó sẽ tự động nhúng nó cho bạn – Rich

+0

Tôi đang thêm nó vào trình chỉnh sửa bài đăng, nhưng mục tiêu không chỉ để hiển thị video YouTube. Tôi muốn tạo một số loại ứng dụng video và muốn sử dụng API IFrame của YouTube. Mã tôi đã đăng ở trên hoạt động trong ứng dụng ASP.NET. – tesicg

Trả lời

0

Rất có thể, <p> thẻ đang được chèn khi trang/bài đăng được lưu. Hai lựa chọn:

  1. Disable wpautop
  2. Bao gồm các kịch bản nén (trên một dòng duy nhất), như thế này:

    <div id="player"></div> 
    <script>var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var player;function onYouTubeIframeAPIReady(){player=new YT.Player("player",{height:"390",width:"640",videoId:"M7lc1UVf-VE",playerVars:{autoplay:1,controls:0},events:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}})}function onPlayerReady(a){a.target.playVideo()}var done=!1;function onPlayerStateChange(a){a.data!=YT.PlayerState.PLAYING||done||(setTimeout(stopVideo,6E3),done=!0)}function playVideo(){player.playVideo()}function pauseVideo(){player.pauseVideo()}function stopVideo(){player.stopVideo()}function loadVideoById(a){player.loadVideoById(a,0,"large")};</script>` 
    
1

Đây là loại tiêm mã được thực hiện tốt hơn với một Shortcode. Thay vì document.createElement, chỉ cần sử dụng wp_enqueue_script để tải API khung nội tuyến và phần còn lại của tập lệnh được in bằng shortcode. PHP heredoc giúp dễ dàng tạo chuỗi HTML có thể định cấu hình lớn.

SHORTCODE sử dụng bên trong bài/trang sẽ là: [ytplayer id="M7lc1UVf-VE"]

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']; 
    $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': 0 }, 
        events: { 
         'onReady': onPlayerReady, 
         'onStateChange': onPlayerStateChange 
        } 
       }); 
      }  
      function onPlayerReady(event) { 
       event.target.playVideo(); 
      } 
      function onPlayerStateChange(event) { 
       if (event.data == YT.PlayerState.PLAYING && !done) { 
        setTimeout(stopVideo, 6000); 
        done = true; 
       } 
      } 
      function playVideo() { 
       player.playVideo(); 
      } 
      function pauseVideo() { 
       player.pauseVideo(); 
      } 
      function stopVideo() { 
       player.stopVideo(); 
      } 
      function loadVideoById(val) { 
       player.loadVideoById(val, 0, "large"); 
      } 
     </script> 
HTML; 
    return $html; 
} 
Các vấn đề liên quan