Ceci est une mise à jour de l'article que j'avais publié en 2016 : Convertir une url Youtube, Dailymotion, Vimeo en lecteur HTML avec PHP.
Dans cet article je vais vous présenter quelques fonctions PHP pour utiliser des vidéos sur votre site.
- Obtenir l'identifiant d'une vidéo d'après son URL
- Obtenir la vignette d'une vidéo d'après son URL
- Obtenir le titre d'une vidéo d'après son URL
- Obtenir un lecteur HTML d'une vidéo d'après son URL
- Aller plus loin avec les API Youtube, Vimeo et Dailymotion
Obtenir l'identifiant d'une vidéo d'après son URL
La fonction VidProviderUrl2VideoID renvoie l'identifiant et le type d'une vidéo d'après une URL. Elle n'attend qu'un paramètre :
- $aUrl : l'adresse de la vidéo.
La fonction renvoie 0 en cas d'erreur ou un array à deux paramètres :
- videoId : identifiant de la vidéo
- type : le type de service (youtube, vimeo ou dailymotion
La fonction utilise strpos pour chercher rapidement l'origine de la vidéo. Elle utilise ensuite une expression régulière pour extraire l'identifiant.
L'URL peut avoir des paramètres comme une liste de lecture ou un démarrage à XX secondes, ça ne pertubera pas la recherche de l'identifiant.
// renvoi l'id et le type de vidéo d'après une URL
function VidProviderUrl2VideoID($aUrl){
$vid = '';
$type = 0;
if(strpos($aUrl, 'youtube') !== false){
// youtube
if(preg_match('/(.+)youtube\.com\/watch\?v=([\w-]+)/', $aUrl, $vid)){
$vid = $vid[2];
$type = 'youtube';
}
}elseif(strpos($aUrl, 'youtu.be') !== false){
// youtu.be
$d = strpos($aUrl, 'youtu.be/');
if(preg_match('/(.+)youtu.be\/([\w-]+)/', $aUrl, $vid)){
$vid = $vid[2];
$type = 'youtube';
}
}elseif(strpos($aUrl, 'vimeo') !== false){
// vimeo
if(preg_match('/https:\/\/vimeo.com\/([\w-]+)/', $aUrl, $vid)){
$vid = $vid[1];
$type = 'vimeo';
}
}elseif(strpos($aUrl, 'dailymotion') !== false){
// dailymotion
if(preg_match('/(.+)dailymotion.com\/video\/([\w-]+)/', $aUrl, $vid)){
$vid = $vid[2];
$type = 'dailymotion';
}
}elseif(strpos($aUrl, 'dai.ly') !== false){
// dailymotion
if(preg_match('/(.+)dai.ly\/([\w-]+)/', $aUrl, $vid)){
$vid = $vid[2];
$type = 'dailymotion';
}
}
return empty($type) ? 0 : ['type'=>$type, 'videoId'=>$vid];
}
Utilisation
VidProviderUrl2VideoID('https://www.youtube.com/watch?v=Ra7zZTlC_T0');
// Array ( [type] => youtube [videoId] => Ra7zZTlC_T0 )
VidProviderUrl2VideoID('https://youtu.be/7yh9i0PAjck?t=6');
// Array ( [type] => youtube [videoId] => 7yh9i0PAjck )
VidProviderUrl2VideoID('https://www.dailymotion.com/video/x8cycx?playlist=x3e13x');
// Array ( [type] => dailymotion [videoId] => x8cycx )
VidProviderUrl2VideoID('https://vimeo.com/30856494');
// Array ( [type] => vimeo [videoId] => 30856494 )
Obtenir la vignette d'une vidéo d'après son URL
Une fois que vous avez obtenu l'identifiant et le type de la vidéo vous pouvez facilement charger sa vignette.
La fonction VidProviderUrl2Thumbnail renvoie un lien vers l'image de pré-visualisation d'une vidéo d'après son URL.
Pour les vidéos Youtube, elle utilise un lien direct, pour les vidéos Vimeo et Dailymotion, elle utilise les API. Je vous conseille d'utiliser l'API pour obtenir le lien de l'image et enregistrer ensuite ce lien.
La fonction renvoie 0 ou le lien vers l'image.
// renvoi un lien vers une image de preview d'après l'url
function VidProviderUrl2Thumbnail($aUrl){
$v = VidProviderUrl2VideoID($aUrl);
if(empty($v['videoId'])) return 0;
$h = 0;
switch($v['type']){
case'youtube' :
$h = 'https://img.youtube.com/vi/'.$v['videoId'].'/mqdefault.jpg';
break;
case 'vimeo' :
$h = json_decode(@file_get_contents('https://vimeo.com/api/v2/video/'.$v['videoId'].'.json'));
if(!empty($h)) $h = $h[0]->thumbnail_medium;
break;
case 'dailymotion' :
$h = json_decode(@file_get_contents('https://api.dailymotion.com/video/'.$v['videoId'].'?fields=thumbnail_240_url'));
if(!empty($h)) $h = $h->thumbnail_240_url;
break;
}
return $h;
}
Veuillez noter que si la fonction récupère des formats d'images moyennes, mais vous pouvez facilement choisir le format que vous préférez.
Voici les formats de vignette existant (en Mai 2019).
| Service | Format de la fonction | Autres formats |
|---|---|---|
| Youtube | mqdefault.jpg (320 x 180) | default.jpg (120 x 90) hqdefault.jpg (480 x 360) sddefault.jpg (640 x 480) maxresdefault.jpg (dépand de la vidéo) |
| Vimeo | thumbnail_medium (100 x 75) | thumbnail_small (200 x 150) thumbnail_large (640 x 360) |
| Dailymotion | urlthumbnail_240_url (240 pixels de haut) | urlthumbnail_60_url (60 pixels de haut) urlthumbnail_120_url (120 pixels de haut) urlthumbnail_180_url (180 pixels de haut) urlthumbnail_240_url (240 pixels de haut) urlthumbnail_360_url (360 pixels de haut) urlthumbnail_480_url (480 pixels de haut) urlthumbnail_720_url (720 pixels de haut) urlthumbnail_1080_url (1080 pixels de haut) |
Obtenir le titre d'une vidéo d'après son URL
L'idée de cette fonction est la même que pour récupérer la vignette. Une fois l'identifiant de la vidéo trouvé, on utilise soit un fichier JSON (Youtube), soit les API.
La fonction renvoie 0 ou le titre trouvé.
// renvoi le titre d'une vidéo d'après l'URL
function VidProviderUrl2Title($aUrl){
$v = VidProviderUrl2VideoID($aUrl);
if(empty($v)) return 0;
$h = 0;
switch($v['type']){
case'youtube' :
$v = json_decode(@file_get_contents('https://www.youtube.com/oembed?url='.$aUrl.'&format=json'), true);
$h = $v['title'];
break;
case 'vimeo' :
$h = json_decode(@file_get_contents('https://vimeo.com/api/v2/video/'.$v['videoId'].'.json'));
if(!empty($h)) $h = $h[0]->title;
break;
case 'dailymotion' :
$h = json_decode(@file_get_contents('https://api.dailymotion.com/video/'.$v['videoId'].'?fields=title'));
if(!empty($h)) $h = $h->title;
break;
}
return $h;
}
Obtenir le lecteur HTML d'une vidéo d'après son URL
Pour finir cet article, je vous propose la fonction VidProviderUrl2Player renvoi le code HTML pour un lecteur vidéo basique. Elle était déjà dans l'article de 2016, mais voici une version allégée.
Elle peut recevoir 4 paramètres :
- $aUrl : l'adresse de la vidéo.
- $aWidth : la largeur du lecteur.
- $aHeight : la hauteur du lecteur.
- $aAutoplay : lecture automatique de la vidéo.
La fonction renvoie l'URL ou le lecteur HTML.
// renvoi un lecteur d'après l'url
function VidProviderUrl2Player($aUrl, $aWidth = 640, $aHeight = 360, $aAutoplay = true){
$v = VidProviderUrl2VideoID($aUrl);
if(empty($v)) return $aUrl;
$h = $aUrl;
switch($v['type']){
case'youtube' :
$h = '<iframe width="'.$aWidth.'" height="'.$aHeight.'" src="https://www.youtube.com/embed/'.$v['videoId'].($aAutoplay ? '?autoplay=1' : '').'" frameborder="0" allowfullscreen autoplay="1"></iframe>';
break;
case 'vimeo' :
$h = '<iframe src="https://player.vimeo.com/video/'.$v['videoId'].($aAutoplay ? '?autoplay=1' : '').'" width="'.$aWidth.'" height="'.$aHeight.'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
break;
case 'dailymotion' :
$h = '<iframe frameborder="0" width="'.$aWidth.'" height="'.$aHeight.'" src="//www.dailymotion.com/embed/video/'.$v['videoId'].($aAutoplay ? '?autoplay=1' : '').'" allowfullscreen></iframe>';
break;
}
return $h;
}
Vous pouvez utiliser les CSS pour avoir un lecteur vidéo en design adaptatif. Il suffit de placer le lecteur dans un bloc div avec un identifiant ou une classe.
<?php
echo '<div id="video">'.VidProviderUrl2Player('https://www.youtube.com/watch?v=0N_RO-jL-90').'</div>';
?>
En CSS pour que la vidéo prenne le maximum de place disponible, en 720p mais pas plus de 80 % de la hauteur de la fenêtre.
#video iframe{
width: 100%;
max-width: 100%;
height: 720px;
max-height: 80vh;
}