关于javascript：使用html和jquery将网址粘贴到textarea中后，如何显示youtube视频数据详细信息，就像whatsapp一样？


How to display youtube video data details after pasting url in textarea using html and jquery, exactly like whatsapp does?

enter

相关讨论

您可以使用oEmbed界面检索视频的元数据。查看此答案以获取有关此信息的更多信息。

现在这里是该界面的问题，YouTube没有提供Access-Control-Allow-Origin标头，这使得其他网络服务很难向其发出请求。您的浏览器将阻止您尝试向YouTube发出的所有http请求

我们可以通过两种方式处理此问题：

第一个方法是在oembed接口周围创建一种package器。您使用后端服务创建一些端点，该端点向Youtube发出实际的http请求，然后您的应用程序向该端点发出ajax请求。看看我在上面链接的答案，以了解如何进行设置

第二种方法是肮脏的方法。我们将使用名为CorsAnywhere的代理服务来处理我们之前讨论的问题。

所以首先这是标记，我们将需要布置所有内容

1
2
3
4
      <img id="video-thumbnail">
    <h4 id="video-title"></h4>
 
  <textarea id="link" rows="8"></textarea>

标记的一些样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html, body {
  padding: 0;
  margin: 0;
  width: 100%
}

#video-thumbnail {
  height: 100%;
  width: auto;
}

#video-link {
  display: inline-block;
  vertical-align: top;
}
.video-meta {
  display: block;
  height: 0;
  transition: height 150ms ease;
}

.video-meta.open {
  height: 150px;
}

.application {
  width: 500px;
  margin: auto;
}

.video-meta {
  width: 100%;
}

textarea {
  width: 100%;
}

最后是将推动整个事情发展的JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
    // Prefilter to auto-magically prepend cors anywhere domain to
jQuery.ajaxPrefilter(function(options) {
    if (options.crossDomain && jQuery.support.cors) {
        options.url = 'https://cors-anywhere.herokuapp.com/' + options.url;
      // Host local instance maybe?
    }
});

// Function that will retrieve the data for a particular video
function getVideoData(url) {
      var base = 'https://www.youtube.com/oembed?url={link}&format=json';

     var link = base.replace('{link}', url);
     var result = null;

      $.ajax({
          url: link,
          type: 'get',
          dataType: 'json',
          async: false, // Probably not the best thing. Just for demo purposes.
          success: function(data) {
              result = data;
          }
       });

     return result;
}

// Event handler for keyup event
$('#link').on('keyup', function() {
   $('.video-meta').removeClass('open');
   var link = $(this).val();

  // Check URL's maybe

   var data = getVideoData(link);

  // Check if we go valid response
    if(!data) {
      alert("Something went wrong");
      return;
    }

    // Set values
    $('#video-thumbnail').attr('src', data.thumbnail_url);
    $('#video-link').attr('href', link);
    $('#video-title').text(data.title);

    $('.video-meta').addClass('open');
});

这是一个正在工作的小提琴。希望对您有所帮助！

相关讨论