Savoir-faire : Intégration d’une vidéo 360 VR

Suite au « Savoir-faire » sur l’intégration d’une image 360 dans une page web, voici comment insérer une vidéo 360 (mode réalité virtuelle) sur ma page en <html/>.
Pour afficher une vidéo 360, comme pour une image, nous allons utilisé A-Frame et DelightVR. Nous aborderons la publication sur YouTube qui a une particularité.
La plupart des vidéos à 360 degrés sont mono-scopiques (2D), une image (360×180 équi-rectangulaire) pour les yeux. La vidéo stéréoscopique (3D) sont deux images distinctes (360×180 équi-rectangulaires) pour chaque œil. Dans les 2 cas, les outils d’intégration pour la diffusion de la VR sont compatibles.

Pour <A-frame>, nous allons reprendre le même exemple que pour l’intégration de la photo 360.

Dans l’arborescence de notre site, nous allons déployé la vidéo que nous avons réalisé, puis nous allons modifié le code de notre page <html/> pour afficher la vidéo.
Contrairement à l’image 360, nous n’allons pas utilisé <sky> pour afficher la vidéo. Même si cette technique fonctionne, une balise est dédiée à ce fonctionnement : <videosphere>
L’utilisation de cette balise est associé à un gestionnaire de ressources (texte, image, video, etc…) : <assets>
Je déclare ma ressource(vidéo 360). Je déclare ma ressource dans mon code <html>. Simple!

Ce résultat pour ces quelques lignes :

<a-scene>
 <a-assets>
   <!-- assets : les ressources -->
   <video id="video" src="~URLDEMAVIDEO(PAS_YOUTUBE)" autoplay loop crossorigin="anonymous"></video>
 </a-assets>
  <a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
</a-scene>

Avec l’aide de A-Frame, vous pouvez ajouter une interface de lecture, pause, suivante, etc…


Pour l’intégration sous Delight VR, c’est le même topo! On reprend le même code <html/> et on change la balise <dl8-img> en <dl8-video> ou <dl8-live-video>. Cette dernière balise doit faire briller les yeux de Community Manager… Se passer de Facebook, Periscope.

<dl8-video title="Example Video" author="Jane Doe" format="STEREO_180_LR" poster="example.jpg" display-mode="inline" loop>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
</dl8-video>

Cela ressemble beaucoup à l’intégration de vidéo en <html5>. La documentation est en ligne sur le site, notamment pour la vidéo en live. A noter, que seul le source change au niveau du typage :

 <source src="example-hls.m3u8" type="application/x-mpegurl" />

A noter, quelques soucis avec le contenu en SSL, l’utilisation de vidéos stockées sur un site en https ne fonctionne pas très bien.


Pour Youtube, la publication n’est pas aussi aisée que pour une vidéo classique. La plate-forme n’est pas totalement encore prévu pour ça. Donc, afin de publier sur YouTube, il faut utiliser un outil en Python. Il va permettre à YouTube de reconnaitre le format 360 de la vidéo, et permettre une publication correcte.
Cet outil est à télécharger sur GitHub en version Windows et Mac.
Une fois lancé, vous lui donnez à digérer votre vidéo 360 (format : YHC pour les Samsung 360, non le format XHC, penser à la convertir avant).

Quelques minutes, secondes après, votre vidéo 360 est injectée, et prête à être envoyé sur YouTube (tuto au cas où)!

Avec ces 3 techniques d’intégration, vous pouvez partager vos vidéos 360 en réalité virtuelle.