iframe YouTube API i WordPress

Próbuję poniższy kod na stronie WordPress postu:iframe YouTube API i 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>

Jednak nic nie zostało wyświetlone.

Źródło

2015-02-26 tesicg

Czy dodanie w edytorze postu lub gdzieś w kodzie? Jeśli w edytorze postów możesz po prostu wkleić adres URL swojego filmu z YouTube'a, to automatycznie go utworzy. – Rich

Dodaję go do edytora postów, ale celem jest nie tylko wyświetlanie filmów z YouTube. Chcę utworzyć aplikację wideo i korzystać z interfejsu YouTube IFrame API. Kod, który napisałem powyżej, działa w aplikacji ASP.NET. – tesicg

Najprawdopodobniej tagi <p> są wstawiane po zapisaniu strony/wpisu. Dwie opcje:

Disable wpautop

zawierać skrypt sprężony (w jednej linii), na przykład:

<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>`

Źródło

2015-04-09 20:55:53 awbauer

Ten rodzaj iniekcji kodu jest lepiej zrobić z Shortcode. Zamiast document.createElement, po prostu użyj wp_enqueue_script, aby załadować interfejs Iframe API, a reszta skryptu zostanie wydrukowana przez krótki kod. PHP heredoc umożliwia łatwe tworzenie dużych konfigurowalnych ciągów HTML.

Wykorzystanie Krótki kod wewnątrz słupka/strona byłoby: [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; 
}

Źródło

2017-05-06 15:08:47 brasofilo

iframe YouTube API i WordPress

Odpowiedz

Powiązane problemy