更新（v3）

Question

我想在我的网页上添加动态YouTube视频嵌入功能，即用户在文本框中输入youtube网址后，如果网址有效，则视频会自动嵌入输入框下方。

我认为这可以通过jquery完成，我最不知道。所以请相应地帮助我。非常感谢任何精心设计的帮助。

Answer 1

<强> 1 即可。我们必须知道停止输入后触发事件

How to trigger an event in input text after I stop typing/writing?

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
 };
})();

$('input').keyup(function() {
  delay(function(){
    // Here check if video exists
    // if video exist show it 
  }, 1000 );
});

由https://stackoverflow.com/users/2269004/ata-ul-mustafa回答：

2 。我们必须知道 youtube视频是否存在

How do I check if a video exists on YouTube, in client side

$的getJSON（＆＃39; http://gdata.youtube.com/feeds/api/videos/＆＃39 + VIDEOID +＆＃39; V = 2及ALT = jsonc＆＃39;，功能（数据，状态，XHR）{ 警报（data.data.title）; }）。error（function（）{alert（＆＃34; error＆＃34;）;}）;

~~由https://stackoverflow.com/users/3748701/innomanik~~

回答

第3 即可。如果存在视频（在iframe中）：

<iframe id="myIframe" width="300" height="200"></iframe>

使用 jQuery 动态设置 iframe的 src属性的内容：

 var url = "https://www.youtube.com/embed/" + videoID;
 $('#myIframe').attr('src', url)

更新（v3）

因此您需要 api密钥。如何获得它你可以阅读here。并阅读有关安全性的this。

＆＃13;

var delay = (function() {
  var timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

$('#youtubeId').keyup(function() {
  delay(function() {
    var videoID = $('#youtubeId').val();
    var videos = "https://www.googleapis.com/youtube/v3/videos";
    var apiKey = "AIzaSyAzYHm1iwMocB9pW2uZrz_6Sqte5t_bXGo"; // Insert here your api key
    var fieldsTitle = "fields=items(snippet(title))";
    var fieldsEmpty = "";
    var part = "part=snippet";

    function getUrl(fields) {
      var url = videos + "?" + "key=" + apiKey + "&" + "id=" + videoID + "&" + fields + "&" + part;
      return url;
    }

    $.get(getUrl(fieldsEmpty), function(response) {
      var status = response.pageInfo.totalResults;
      var title;
      if (status) {
        $.get(getUrl(fieldsTitle), function(response) {
          title = response.items[0].snippet.title;
          $('#info').text(title);
          var url = "https://www.youtube.com/embed/" + videoID;
          $('#myIframe').attr('src', url)
        })
      } else {
        title = "Video doesn't exist";
        $('#info').text(title);
        $('#myIframe').attr('src', "");
      }
    });
  }, 1000);
});

＆＃13;

演示：https://embed.plnkr.co/ixAFtU/

动态嵌入YouTube视频

1 个答案:

更新（v3）