Javascript 如何实现Facebook中的后期视频功能

Javascript 如何实现Facebook中的后期视频功能,javascript,jquery,Javascript,Jquery,我想实现类似的功能,比如在facebook上发布视频。因此,当你复制链接时,facebook会创建某种快照,然后你发布它。我在谷歌搜索如何做到这一点,但不幸的是没有找到任何有用的东西 我想知道是否有一些已经实现的插件或教程来执行这样的操作 我发现的唯一一个示例类似于下面使用的带标记的jQuery库。除了这个还有什么更优雅的吗 marked.setOptions({ gfm: true, pedantic: false, sanitize: true, highli

我想实现类似的功能,比如在facebook上发布视频。因此,当你复制链接时,facebook会创建某种快照,然后你发布它。我在谷歌搜索如何做到这一点,但不幸的是没有找到任何有用的东西

我想知道是否有一些已经实现的插件或教程来执行这样的操作

我发现的唯一一个示例类似于下面使用的带标记的jQuery库。除了这个还有什么更优雅的吗

marked.setOptions({
    gfm: true,
    pedantic: false,
    sanitize: true,
    highlight: null,
    urls: {
        youtube : function(text, url) {
            var cap;
            if((cap = /(youtu\.be\/|youtube\.com\/(watch\?(.*&)?v=|(embed|v)\/))([^\?&"'>]+)/.exec(url))) {
                return '<iframe width="420" height="315" src="https://www.youtube.com/embed/' + cap[5] + '" frameborder="0" allowfullscreen</iframe>';
            }
        },
        vimeo : function(text, url) {
            var cap;
            if((cap = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/.exec(url))) {
                return '<iframe src="https://player.vimeo.com/video/' + cap[5] +'" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
            }
        },
        dailymotion : function(text, url) {
            var cap;
            if((cap = /^.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/.exec(url))) {
                return '<iframe frameborder="0" width="480" height="271" src="https://www.dailymotion.com/embed/video/' + cap[2] +'"></iframe>';
            }
        }
});
marked.setOptions({
gfm:没错,
学究:错,
净化:是的,
突出显示:空,
网址:{
youtube:函数(文本、url){
var上限;
如果((cap=/(youtu\.be\/|youtube\.com\/(watch\?(.*&)v=|(embed | v)\/)([^?&“'>]+)/.exec(url))){

return“您应该解析页面的元标记。例如,如果您查看youtube页面的源代码,您将发现这些标记,它们是定义的标准

<meta property="og:site_name" content="YouTube">
  <meta property="og:url" content="http://www.youtube.com/watch?v=lB6a-iD6ZOY">
<meta property="og:title" content="Sting - Fragile">
<meta property="og:image" content="http://i.ytimg.com/vi/lB6a-iD6ZOY/maxresdefault.jpg">

  <meta property="og:description" content="Music video by Sting performing Fragile. YouTube view counts pre-VEVO: 1,794,143. (C) 1991 A&amp;M Records">

<meta property="al:ios:app_store_id" content="544007664">
<meta property="al:ios:app_name" content="YouTube">
  <meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=lB6a-iD6ZOY&amp;feature=applinks">
<meta property="al:android:url" content="http://www.youtube.com/watch?v=lB6a-iD6ZOY&amp;feature=applinks">
<meta property="al:android:app_name" content="YouTube">
<meta property="al:android:package" content="com.google.android.youtube">
<meta property="al:web:url" content="http://www.youtube.com/watch?v=lB6a-iD6ZOY&amp;feature=applinks">

<meta property="og:type" content="video">
    <meta property="og:video" content="http://www.youtube.com/v/lB6a-iD6ZOY?autohide=1&amp;version=3">
    <meta property="og:video:secure_url" content="https://www.youtube.com/v/lB6a-iD6ZOY?autohide=1&amp;version=3">
  <meta property="og:video:type" content="application/x-shockwave-flash">
  <meta property="og:video:width" content="853">
  <meta property="og:video:height" content="480">

    <meta property="og:video:tag" content="Sting">
    <meta property="og:video:tag" content="A&amp;M">
    <meta property="og:video:tag" content="Rock">

你可以看到例如“og:image”元标记,它基本上指向视频的快照。因此,通过这种方式你可以获得所有需要的信息。这几乎是实现该功能所需要知道的所有信息。

我发现了这个

看起来非常优雅的解决方案