动态播放 youtube 视频答案

【问题标题】：dynamically play the youtbe video动态播放 youtube 视频
【发布时间】：2015-11-16 02:29:05
【问题描述】：

我正在尝试通过单击 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()
        })

    });
}

这是我的小提琴。任何帮助将不胜感激

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

【问题讨论】：

标签： javascript jquery youtube-api

【解决方案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() {
    //...
}

【讨论】：