播放嵌入式API的Youtube視頻事件

Question

我試圖呈現一個YouTube視頻的用戶已經提交了其URL與.focusout（）

$('#page_video').focusout(function(){ 
    var video_url = $(this).val(); 
    var video_id = youtubeLinkParser(video_url); 

    renderVideo(video_id); // This is where I'd like to load video 
}); 

我使用YouTube API和代碼推薦here（後也見下文）

// 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); 

    // This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 

    var player; 
    function onYouTubeIframeAPIReady(video_id) { 
     player = new YT.Player('player', { 
     height: $(window).height(), 
     width: $(window).width(), 
     videoId: video_id, 
     playerVars: { 
      'autoplay': 0, 
      'controls': 0, 
      'loop': 1, 
      'showinfo': 0, 
      'modestbranding': 1 
     }, 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     } 
     }); 
    } 

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

    // 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) { 
    } 

    function stopVideo() { 
     player.stopVideo(); 
    } 

如何調用視頻上呈現事件的內容（），我沒有任何運氣把Youtube的API代碼的函數和調用它。

可以這樣做嗎？

感謝

Answer 1

這個工作對我來說：

// 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); 

// This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 

var player; 
function onYouTubeIframeAPIReady(video_id) { 
    player = new YT.Player('player', { 
    height: $(window).height(), 
    width: $(window).width(), 
    videoId: video_id, 
    playerVars: { 
     'autoplay': 0, 
     'controls': 0, 
     'loop': 1, 
     'showinfo': 0, 
     'modestbranding': 1 
    } 
    }); 
} 

function stopVideo() { 
    player.stopVideo(); 
} 

function youtubeLinkParser(string){ 
    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; 
    return (string.match(p)) ? RegExp.$1 : false ; 
} 

function renderVideo(id){ 
    player.loadVideoById(id); 
} 

$('#page_video').focusout(function(){ 
    var video_url = $(this).val(); 
    var video_id = youtubeLinkParser(video_url); 

    renderVideo(video_id); // This is where I'd like to load video 
});