Plugin vidéo 360°/VR

Exemple de lecteur

L'exemple de vidéo ci-dessous montre l'utilisation du plugin 360 ° / VR. Une fois que vous avez cliqué sur la vidéo pour la lire, vous pouvez utiliser votre souris ou les touches fléchées pour contrôler la vue sur le bureau, ou le gyroscope si vous la regardez sur un appareil mobile. Le bouton de lecture du logo vidéo 360 ° disparaît lors de la lecture.

Introduction

Caractéristiques

Voici les caractéristiques du plugin 360 ° / VR:

Intégration du gyroscope sur les appareils mobiles: La perspective change lorsque vous faites pivoter votre téléphone.
Prise en charge du mode carton / VR: Sur les appareils qui le prennent en charge, l'icône de la visionneuse Cardboard apparaît dans la barre de contrôle. Lorsqu'il est enfoncé, la projection sera ajustée pour fonctionner avec des lunettes VR de style carton.
Paramètre Video Cloud Media 360 °: Si vous utilisez des vidéos Video Cloud, le plugin respecte le paramètre de Video Cloud pour 360 ° sur le média Video Cloud. Si la valeur n'est pas présente, la vidéo sera lue comme une vidéo normale. Vous n'avez pas à vous assurer que seules les vidéos 360 ° sont lues sur les lecteurs utilisant le plugin 360 ° / VR.
Médias Cloud non vidéo: Si vous êtes ne pas utiliser de média diffusé par Video Cloud , vous pouvez toujours utiliser le plugin. Vous devrez appeler le vr plugin passant un objet avec un projection valeur définie comme suit:
```
<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.vr({projection: '360'});
  });
</script>
```
Réglage de la projection propriété à 360 , equirectangular ou Sphere sont tous logiquement équivalents.

Bien sûr, le code ci-dessus suppose que vous avez inclus les fichiers JavaScript et CSS pour le plugin, comme décrit plus loin dans ce document.

Compatibilité du navigateur

Le plugin est compatible avec les dernières versions de ces principaux navigateurs:

Bureau Chrome
Chrome Mobile (sur Android 6+)
Bureau de Firefox
Edge
Bureau Safari *
Safari Mobile (iOS 11.2+) *

* Lorsque vous utilisez le plugin sur Safari, si vous utilisez une vidéo non-Video Cloud (une vidéo NON ingérée via Video Cloud), notez que vous devez définir le crossorigin propriété de configuration à anonymous.

Le plugin fait NE PAS fonctionne avec Internet Explorer.

Présentation de la mise

La mise en œuvre du plugin est simple, il vous suffit de suivre ces deux étapes:

Ingérez correctement la vidéo.
Ajoutez le plugin au lecteur.

Ingérer la vidéo 360 °

Une fois la vidéo à 360 ° enregistrée, vous devez l'ingérer dans Video Cloud. Un peu de compréhension du fonctionnement de la vidéo à 360 ° vous aidera à comprendre certaines raisons pour lesquelles le profil Ingest doit choisir. La vidéo 360 ° est filmée pour être projetée à l'intérieur d'une sphère. Cela signifie que la zone visible de la vidéo dans le lecteur n'est qu'une fraction de la vidéo entière. La capture d'écran suivante vous donne une idée approximative de ce concept. La zone à l'intérieur du rectangle rouge est ce qui est visible dans le lecteur, mais seulement une petite partie de la vidéo entière.

Étant donné que seule une petite partie de la vidéo sera dans le lecteur à un moment donné, vous souhaitez qu'un rendu de très haute qualité soit lu, sans aucune chance de passer à un rendu de qualité inférieure. Essentiellement, vous « zoomez » sur une partie de la vidéo et un rendu de mauvaise qualité donnerait une expérience de visionnage de très mauvaise qualité. Pour cette raison, lors du téléchargement de votre vidéo, Brightcove recommande de créer un profil d'acquisition Dynamic Delivery personnalisé avec un seul rendu 1080p et au moins un rendu audio. Ceci est préférable aux rendus HLS lors de l'utilisation du plug-in 360 ° / VR.

Assurez-vous que lorsque la vidéo est ingérée, elle est marquée pour une projection à 360 °, comme indiqué ici dans la section d'informations de la vidéo:

Implémenter avec le module Players

Pour implémenter le plugin 360 ° / VR, vous allez ajouter le nom du plugin et les URL aux fichiers JavaScript et CSS du plugin:

Ouvrez le module PLAYERS et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
Cliquez sur Plugins dans le menu de navigation de gauche.
Du Ajouter un plugin liste déroulante, sélectionnez Plugin personnalisé.
Pour le nom du plugin, entrez vr.

Pour le JavaScript URL, saisissez :

https://players.brightcove.net/videojs-vr/2/videojs-vr.min.js

Si vous utilisez Brightcove Player 6, utilisez cette URL à la place :

            https://players.brightcove.net/videojs-vr/1/videojs-vr.min.js

Pour le CSS URL, saisissez :

https://players.brightcove.net/videojs-vr/2/videojs-vr.css

Si vous utilisez Brightcove Player 6, utilisez cette URL à la place :

          https://players.brightcove.net/videojs-vr/1/videojs-vr.css

Vous n'avez pas à saisir d'options pour ce plugin.
Cliquez sur Save.
Cliquez sur Styling dans le menu de navigation de gauche.
Si vous pensez que ce sera une meilleure expérience de visualisation, vous pouvez désactiver le titre et la description du dock. Pour ce faire, décochez la case Afficher le titre et la description case à cocher.
Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Options

forceCardboard

Type: boolean Valeur par défaut : false

Forcer le bouton en carton à s'afficher sur tous les appareils.

motionControls

Type: boolean Valeur par défaut: true sur iOS et Android

Détermine si les commandes de mouvement / gyroscope doivent être activées.

projection

Type: string Valeur par défaut: auto

Type de vidéo	La valeur pour `projection` Option
sphère	360 , Sphère ou équirectangulaire
cube	cube ou 360_CUBE
PAS une vidéo à 360 °	Aucune
Si vous souhaitez vérifier si la vidéo actuelle est une vidéo 360 ° via `player.mediainfo.projection`	AUTO
Vidéo 360 ° côte à côte	360_LR
Vidéo 360 ° de haut en bas	360_TB

player.mediainfo.projection

Type: string Valeur par défaut : indéfinie

Cette valeur doit être définie source par source pour activer et désactiver les vidéos 360 ° en fonction de la vidéo.

débogage