在活动中播放嵌入式 API Youtube 视频答案

【问题标题】：Playing embedded API Youtube video on event在活动中播放嵌入式 API Youtube 视频
【发布时间】：2014-09-04 18:17:10
【问题描述】：

我正在尝试在用户使用 .focusout() 提交其 URL 后呈现 Youtube 视频

$('#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();
    }

如何调用视频以在 focusOut() 上呈现，我没有运气将 Youtube API 代码放入函数中并调用它。

这个可以吗？

谢谢

【问题讨论】：

这是什么youtubeLinkParser，你从哪里得到的？
@blex 从 url stackoverflow.com/questions/18268233/… 获取 ID

标签： javascript jquery video youtube

【解决方案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
});

【讨论】：