La librairie javascript permet d'utiliser une balise video existante avec la solution widemotion. Le rôle de cette librairie est de renseigner dynamiquement la src de la video et d'y attacher un système de tracking nécessaire au bon fonctionnement de la solution.

Pré-requis et configuration

Pour pouvoir utiliser le controller avec IE9 il faut ajouter quelques dépendances supplémentaires. :

Nous hébergeons des versions stabilisées et vérifiées de ces dépendances dans un script controller.helpers.min.js

Les dépendances au complet :

 
<script type="text/javascript" src='https://secure.massmotionmedia.com/common/1.2.3/controller.min.js'></script> <!-- Worldwide -->
  
<script type="text/javascript" src='https://secure.widemotion.cn/common/1.2.3/controller.min.js'></script> <!-- China optimized -->
 

Important :

Il est impératif d'exploiter l'appel en secure.widemotion.cn pour les diffusions en Chine.
Ne pas exploiter cet appel aurait pour conséquence le ralentissement, voire le blocage de vos contenus vidéo.

La librairie massmotinomedia ne crée pas de player. Elle fonctionne avec une balise vidéo fonctionnelle. Voici les tableaux de support à jour :

Can I Use video? Data on support for the video feature across the major browsers from caniuse.com.

Can I Use mpeg4? Data on support for the mpeg4 feature across the major browsers from caniuse.com.

Il n'y a pas de configuration générale autre que le niveau de verbosité de la librairie. Il est réglable en utilisant la fonction setVerboseLevel avec unes des valeurs suivantes :

VERBOSE_NONE valeur par défaut : Aucun affichage volontaire dans la console.
VERBOSE_ERROR Seules les erreurs empéchants la diffusion de la vidéo sont rapportées dans la console.
VERBOSE_INFO Les informations métier permettant de suivre le déroulé fonctionnel sont affichées dans la console.

Un exemple :

 
window.addEventListener('load', function(){
	widemotion.setVerboseLevel(widemotion.VERBOSE_INFO);
});
 

Usage

C'est relativement simple, il n'y a qu'une seule fonction exposée à l'utilisateur : widemotion.attach(). Cette fonction retourne un Promise et attends 3 arguments obligatoires.

Argument description exemple
video_tag une balise vidéo, ciblée via jQuery document.querySelector('#myVideoTag')
widemotion_id l'identifiant du contenu vidéo timescapes
accounts un tableau des comptes client dans lesquels on va chercher le contenu vidéo ['mmm']

La fonction retournant une promise, voici les cas usuels d'utilisation :
promise.... condition argument
.done L'identifiant de contenu est valide et on a trouvé un média vidéo à lire. L'attribut src de la balise video_tag a été renseigné et il n'y a plus qu'à lancer la lecture (ou rien à faire si la balise est en autoplay Un objet comprenant des informations suivantes :
  • path : l'URL du média vidéo utilisée dans le src
  • duration : la durée de la video en secondes
  • storyboard.path : le chemin du premier fichier de thumbnails/vignette/storyboard
  • storyboard.count : le nombre de fichiers storyboard au total
  • storyboard.density : le nombre de vignette par fichier storyboard
  • storyboard.ips : le nombre de vignette par seconde de vidéo
.fail Impossible de trouver un média vidéo à lire Le message d'erreur détaillé. A date les causes sont :
  • problème d'utilisation : mauvais arguments pour widemotion.attach()
  • problème de DOM : impossible de trouver la vidéo video_tag
  • problème de contenu : impossible de trouver un contenu correspondant à widemotion_id
.always dans tous les cas Attention, comme dit dans la documentation jQuery mieux vaut ne pas préjuger de l'argument. Cela dit dans notre cas, l'erreur est identifiable car l'argument est de type texte, sinon en cas de réussite c'est un objet.

Un exemple :

window.addEventListener('load', function() {
	widemotion.setVerboseLevel(widemotion.VERBOSE_INFO);

	// suppose l'existence d'une <video id="v1"></video> dans le dom
	widemotion.attach(document.querySelector('#v1'), 'timescapes', ['mmm'])
	.then(function(infos){
		console.log("Ce handler s'exécute quand on a trouvé une vidéo à lire.");
		console.log(infos);
		document.querySelector('#v1').play();
	})
	.catch(function(error_msg){
		console.log("Ce handler s'exécute lors d'une erreur. Ici : " + error_msg);
	})
	.then(function(infos_or_error){
		console.log("Ce handler s'exécute toujours");
		console.log(infos_or_error);
	});
});

Voici par exemple la page envoyée aux responsables de mise en ligne des contenu pour vérifier les vidéos.

La librairie widemotion utilise le localStorage pour accélérer certaines opérations. A chaque page vue les entrées datant de plus de 24h sont effacées. L'impact utilisateur est donc très limité.

Autoplay et bonnes pratiques

Dans l'intérêt de l'internaute et de la qualité du contenu vidéo massmotionmedia recommande : 

/*
Exemple de boucle vidéo (avec l'attribut "loop") : 
<video id="v1" loop data-resource="timescapes"></video>
*/
window.addEventListener('load', function() {
	widemotion.setVerboseLevel(widemotion.VERBOSE_INFO);

	widemotion.attach(document.querySelector('#v1'), 'timescapes', ['mmm'])
	.then(function(infos){
		console.log("Ce handler s'exécute quand on a trouvé une vidéo à lire.");
		console.log(infos);
		document.querySelector('#v1').play();
	})
	.catch(function(error_msg){
		console.log("Ce handler s'exécute lors d'une erreur. Ici : " + error_msg);
	})
	.then(function(infos_or_error){
		console.log("Ce handler s'exécute toujours");
		console.log(infos_or_error);
	});
});

Voici par exemple une page de démo avec l'attribute "loop" et la vidéo en autoplay (et muted par défaut).

Exemple : Changement/MAJ de vidéo

C'est très simple, il suffit de rappeler la fonction widemotion.attach() sur une balise existante et la mise à jour sera faite proprement.

Exemple : Plusieurs players vidéos

Si jamais il est pertinent d'avoir plusieurs balises vidéo il faut appeler un widemotion.attach() pour chaque élément.
Notez bien que ce mode d'intégration enclenche des chargements partiels des vidéos en tâche de fond !
Tips : Attention à bien mettre en pause les vidéos invisibles !

Important : pour éviter de charger plusieurs vidéos à la fois, il faut faire un widemotion.attach() uniquement lorsque la lecture de la vidéo est initiée. C'est à dire lorsque l'utilisateur clique sur un bouton play ou que la vidéo apparait sur l'écran de l'utilisateur.

Le code suivant est un exemple de déclenchement de la lecture vidéo au clic. Aucune donnée n'est préchargée. Il faudra évidemment appliquer une couche de CSS afin que l'utilisateur soit au courant qu'il y a une vidéo à lire ou un bouton play sur lequel cliquer pour lancer la vidéo.

/*
HTML : 
<video class="widemotion_video" data-resource="timescapes"></video>
*/
function onClick(e) {
	window.removeEventListener(e.target, onClick);
	widemotion.attach(e.target.id, e.target.getAttribute('data-resource'), ['mmm']);
}

var videos = document.querySelectorAll('video.widemotion_video');
videos.forEach(function(video) {
	video.addEventListenr('click', onClick);
});

CSS

Si vous utilisez le player natif de votre navigateur et que vous avez besoin de cacher le bouton de téléchargement (le cas échéant),
Il faut ajouter les lignes de css ci-dessous dans votre page

video::-internal-media-controls-download-button {
display:none;
}

video::-webkit-media-controls-enclosure {
overflow:hidden;
}

video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}

Accessibilité

Il existe une démonstration d'un player respecant la norme d'accessibilité WCAG 2.1 (AA)
Cet exemple utilise tous les éléments utilisés dans cette documentation : Documentation accessibilité

Changelog

1.6.0 (06-05-2024)

1.5.1 (2023-02-09)

1.2.9 (21-12-2021)

1.2.3 (11-09-2018)

1.2.2 (13-06-2018)

1.1.0 (23-10-2017)

1.0.7 - obsolète(22-09-2017)

1.0.6 - obsolète (04-09-2017)

1.0.5 - obsolète (14-08-2017)

1.0.4 - obsolète (06-07-2017)

1.0.3 - obsolète (19-05-2017)

1.0.2 - obsolète (07-04-2017)

1.0.1 - obsolète (23-03-2017)

1.0 (obsolète) - obsolète Version initiale

Contacts