Voici les 6 étapes clés pour ajouter des timestamps
- Créer un container et lui ajouter la classe "container"
- Ajouter un bloc list et y ajouter une List item
- Ajouter un lien et lui mettre comme class "hacks rich text"
- Ajouter le bloc video et y insérer votre vidéo
- Renseigner la durée de chaque timestamps
- Importer dans votre code custom
1 - Créer un container
Sur votre page, ajouter un bloc container et lui attribuer comme class "container".
2 - Ajouter un bloc List
Dans votre container, vous devez ajouter un bloc List.
3 - Ajouter un lien dans chaque List item
Dans chaque item de la liste, ajouter la class "hacks rich text" et insérer y insérer un lien.
4 - Ajouter le bloc vidéo
Dans votre container, ajouter un bloc vidéo et y insérer l'adresse où votre vidéo est hébergée.
5 - Renseigner la durée de chaque partie de votre vidéo
Une fois la structure de votre container achevée, ajouter la durée de chaque partie de votre vidéo dans chaque list item. Vous devez respecter ce format de temps "01:02".
6 - Importer le script dans le custom code
Pour faire fonctionner tout cela, il ne vous reste plus qu'a importer avant la fermeture de votre balise </body>, le script ci dessous dans votre code custom.
<script>
// inject the youtube api script
$('<script src="https://www.youtube.com/iframe_api">').insertBefore($('script')[0]);
// setup the onYouTubeIframeAPIReady function
// this is the function called by the youtube api once it's ready
function onYouTubeIframeAPIReady() {
// loop through all the iframes on the page
$('iframe').each((i, frame) => { // for each iframe
// get the src
let src = $(frame).attr('src');
// skip the iframe if it's not a youtube video
if(!src.includes('youtube')) return;
// check if there's a pre-existing query string in the src
// to determine how to embed the enablejsapi=1 param
let enablejsapi = src.includes('?') ? '&enablejsapi=1' : '?enablejsapi=1';
// embed the enablejsapi=1 param
src = `${src + enablejsapi}`;
// set the new src as the iframe's src
$(frame).attr('src', src);
// create a unique id for the iframe
$(frame).attr('id','dynamic'+i);
// call the createPlayer function with the iframe's id
createPlayer(frame.id);
});
}
// setup the createPlayer function
function createPlayer(iframe){
// initialize YT.player with the specified iframe's id
let player = new YT.Player(iframe, {
// setup the event function to be called when YT.player is ready
events: {
onReady: onPlayerReady
}
});
// setup the onPlayerReady function
function onPlayerReady(event) {
// when each timestamp is clicked
$(`#${iframe}`).closest('.container').find('.hacks-rich-text a').click(function(e){
// stop default browser action
e.preventDefault();
// get the timestamp's text & split at the ':'
// this will result in an array with the minutes value & the seconds value
let timestamp = $(this).text().trim().split(':');
// declare & initialize seconds at 0
let seconds = 0;
// if the minutes value exists
if(Number(timestamp[0])){
// multiply the value by 60 to get seconds
// then add it to the seconds variable
seconds += Number(timestamp[0]) * 60;
}
// if the seconds value exists
if(Number(timestamp[1])){
// add it to the seconds variable
seconds += Number(timestamp[1]);
}
// play the video at the specified seconds
player.seekTo(seconds);
});
}
}
</script>
