Lire à partir d'un timecode avec video.js

Histonic · Message par **Histonic** » 19 déc. 2019, 21:04

Bonjour,

J'ai besoin de faire démarrer la lecture d'une vidéo à partir d'un certain point, en cliquant par exemple sur un lien ou un bouton.

En utilisant l'élément HTML <video>, j'y arrivais très bien avec ce petit code :

Code : Tout sélectionner

<script type="text/javascript">
		var lecteur;
		function timecode(secondes) {
		    lecteur = document.getElementById("mavideo");
		    lecteur.currentTime = (secondes);
		    lecteur.play();
		}
	</script>

Et en cliquant par exemple sur ce lien :

Code : Tout sélectionner

<a href=#mavideo onclick="timecode(60)">Lire à partir de 1 min</a>

Comme le lecteur natif généré par le navigateur ne convenait pas, j'ai importé video.js (version 7.6.6) avec le thème Fantasy.
Et depuis, mon code ci-dessous ne fait rien...

Quelqu'un a-t-il une idée ? Merci.

NY152 · Message par **NY152** » 01 févr. 2020, 16:24

Bonjour,

Je propose un début de réponse qui devrait fonctionner.

Voici une petite fonction transformant les paramètres d'une URL en tableau associatif. Code que j'ai un peu modifié d'un code trouvé sur Internet :

Code : Tout sélectionner

function extractUrlParams() {
    let t = location.search.substring(1).split('&');
    let f = [];
    for (let i = 0; i < t.length; i++) {
        let x = t[i].split('=');
        f[x[0]] = x[1];
    }
    return f;
}

Les quelques lignes qui suivent servent à chercher le paramètre d'URL seconds et l'affiche en console.

Rien de très compliqué à adapter et d'en faire une petite fonction à appeler à ta ligne lecteur.currentTime ^^

Code : Tout sélectionner

let paramsUrl = extractUrlParams();
for (let key in paramsUrl) {
    let value = paramsUrl[key];
    if (key === 'seconds') {
        console.log(paramsUrl[key]);
    }
}

J'espère t'avoir aidé

01MarcoPolo · Message par **01MarcoPolo** » 05 sept. 2024, 13:42

Bonjour,

Il semble que le passage à video.js nécessite quelques ajustements, car ce framework encapsule le lecteur vidéo avec des méthodes spécifiques. Voici une approche pour adapter ton code avec video.js tout en conservant la logique que tu avais avec l'élément natif <video>.

Pour contrôler le timecode avec video.js, tu dois interagir avec l'instance du lecteur vidéo fournie par video.js et non directement avec l'élément vidéo comme auparavant. Voici une version adaptée de ton code :

Assure-toi d'avoir inclus la librairie video.js correctement dans ton projet.
Voici comment tu pourrais modifier ton script pour qu'il fonctionne avec video.js :

Script avec video.js

<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="mavideo" class="video-js vjs-theme-fantasy" controls preload="auto" width="640" height="264"
data-setup="{}">
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<p class="vjs-no-js">
Pour visionner cette vidéo, activez JavaScript et utilisez un navigateur qui prend en charge la vidéo HTML5.
</p>
</video>

<a href="#" onclick="timecode(60)">Lire à partir de 1 min</a>

<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>

<script type="text/javascript">
var player = videojs('mavideo'); // Initialisation du lecteur video.js

function timecode(secondes) {
player.currentTime(secondes); // Définit le temps de lecture
player.play(); // Lance la lecture
}
</script>
</body>
</html>

Explication des changements :
Initialisation du lecteur : La ligne var player = videojs('mavideo'); initialise le lecteur vidéo via video.js en utilisant l'ID de l'élément vidéo.
Méthodes spécifiques à video.js : Pour contrôler la vidéo, on utilise les méthodes propres à video.js :
player.currentTime(secondes) : pour définir le temps de départ.
player.play() : pour démarrer la lecture.
Amélioration avec des paramètres URL
Si tu veux passer des paramètres via l'URL (comme dans la deuxième partie de ta question), tu peux combiner cette approche avec ton script extractUrlParams() pour lancer la vidéo à un moment précis défini par un paramètre seconds dans l'URL. Voici comment cela pourrait s'intégrer :

window.onload = function() {
let paramsUrl = extractUrlParams();
if (paramsUrl['seconds']) {
let startTime = parseInt(paramsUrl['seconds']);
timecode(startTime);
}
};

function extractUrlParams() {
let t = location.search.substring(1).split('&');
let f = {};
for (let i = 0; i < t.length; i++) {
let x = t.split('=');
f[x[0]] = x[1];
}
return f;
}

Cela permettrait de démarrer la vidéo automatiquement à partir du temps spécifié dans l'URL (par exemple : ?seconds=60).

Forums Tout JavaScript

Lire à partir d'un timecode avec video.js

Lire à partir d'un timecode avec video.js

Re: Lire à partir d'un timecode avec video.js

Re: Lire à partir d'un timecode avec video.js