2014-09-01 5 views
0

Je souhaite implémenter des fonctionnalités similaires à celles de facebook où vous pouvez publier des vidéos. Donc, lorsque vous copiez le lien, facebook crée une sorte d'instantané, puis vous l'affichez. Je cherche autour de google comment faire ceci mais malheureusement n'ai rien trouvé utile.Comment mettre en œuvre des fonctionnalités de post-vidéo comme sur Facebook

Je veux savoir s'il existe déjà quelque chose de plugin implémenté ou un tutoriel pour effectuer une telle action.

Le seul exemple que j'ai trouvé est quelque chose comme le suivi de la bibliothèque jQuery marquée. Y a-t-il quelque chose de plus élégant à côté de cela?

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

Répondre

0

Vous devez analyser les balises META de la page. Par exemple, si vous regardez le code source de la page youtube, vous trouverez ces balises, qui sont des normes définies.

<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"> 

Vous pouvez Seet qu'il ya par exemple « og: l'image » balise meta, qui pointe basiquement à l'instantané de la vidéo. Donc, de cette façon, vous pouvez obtenir toutes les informations nécessaires. C'est à peu près tout ce que vous devez savoir pour implémenter cette fonctionnalité.

Questions connexes