动态嵌入YouTube视频

Question

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

我认为这可以用jquery完成,我最不知道.所以请相应地帮助我.任何精心设计的帮助都非常感谢.

Answer 1

1.我们必须在停止输入后知道触发事件

在我停止输入/写入后如何在输入文本中触发事件？

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

通过/sf/users/158830311/回答:

2.我们必须知道YouTube视频是否存在

如何在客户端检查YouTube上是否存在视频

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

通过/sf/users/262409101/回答

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密钥.如何获得它你可以在这里阅读.和阅读此有关的安全性.

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/