动态播放 youtube 视频

Question

我正在尝试通过单击 div 来加载 YouTube 视频。这个想法是动态地将视频 ID 传递给播放器对象，并将视频加载到帧中。我正在关注 API，我看到他们在 dom 中传递，然后加载 JS。在我的情况下，这是不可能的。

这是我的 JS

callMain ();

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

function backgroundOverlay(state){

    var pageHeight = $( document ).height();
    var overlay = '';
    var wrapperHTML = ''
        + '<div class="videoplayer-wrapper">'
            + '<div id="player"></div>'
            + '<div class="videoplayer-close videoplayer-toggle">Close</div>'
        + '</div>';

    if(state){
        overlay = $('body').append('<div class="video-overlay-background" style="height:'+pageHeight+'px;"></div>').append(wrapperHTML);
    }else{
        overlay = $('.video-overlay-background').remove();
    }

    return overlay;
}


function callMain () //$(function(){
    {
    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 inputVid = '';
    $('.videoplayer-toggle').on('click', function(){
        inputVid = $(this).attr('data-youtubeid');
        backgroundOverlay(true);
        playerApp(inputVid)

        $('.videoplayer-close').on('click', function(){
            backgroundOverlay(false);
            $('.videoplayer-wrapper').remove()
        })

    });
}

这是我的fiddle。任何帮助将不胜感激

http://jsfiddle.net/sghoush1/zmqj6h1b/1/

Answer 1

问题是 onYouTubeIframeAPIReady 从未被触发。您可以完全省略它，因为您是在 playerApp 内动态设置播放器。请尝试以下操作：

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

动态播放 youtube 视频

dynamically play the youtbe video

javascript

jquery

youtube-api