jquery - 动态嵌入 youtube 视频

Question

<分区>

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(' http://gdata.youtube.com/feeds/api/videos/ '+videoID+'?v=2&alt=jsonc',function(data,status,xhr){ 警报(数据。数据。标题)； }).error(function() { alert("error"); });

由 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 key。如何获得它你可以阅读here .并阅读 this关于安全。

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/