2014-09-01 2 views
0

Я хочу реализовать аналогичную функциональность, например, в facebook, где вы можете размещать видео. Поэтому, когда вы копируете ссылку, facebook создает какой-то снимок, а затем вы публикуете его. Я ищу вокруг google, как это сделать, но, к сожалению, не нашел ничего полезного.Как реализовать функции пост-видео, как в 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>'; 
      } 
     } 
}); 

ответ

0

Вы должны разобрать метатеги страницы. Например, если вы посмотрите исходный код страницы 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: изображение» мета-тег, который basicaly указывает на снимок видео. Таким образом, вы можете получить всю необходимую информацию. Это почти все, что вам нужно знать, чтобы реализовать эту функциональность.

Смежные вопросы