动态嵌入 youtube 视频

Question

我想在我的网页中添加动态 youtube 视频嵌入功能，即一旦用户在文本框中输入完 youtube url，视频就会自动嵌入到输入框下方，如果 url当然有效。

我认为这可以用 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://whosebug.com/users/2269004/ata-ul-mustafa 回答：

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

$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+videoID+'?v=2&alt=jsonc',function(data,status,xhr){ 警报（data.data.title）； }).error(function() { alert("error"); });

https://whosebug.com/users/3748701/innomanik

回答

3。如果视频存在，请显示它（在 iframe 中）：

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

用jQuery[=63动态设置iframe的src属性的内容=]:

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

---

更新 (v3)

因此你需要一个api密钥。如何获取它您可以阅读 here. And read 关于安全性的内容。

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

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