Question

我正在尝试在用户使用.focusout（）

提交其网址后呈现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代码放入函数并调用它。

可以这样做吗？

由于

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

在事件上播放嵌入式API Youtube视频

1 个答案: