Application des fonctionnalités Popcorn.js
Application des fonctionnalités Popcorn.js
Le but de cet exercice est de vous permettre d'appliquer fonctionnalités abordées précédemment. Dans la suite de cet exercice, vous allez utilisez le code suivant comme base.
1
2
<html>3
<head>4
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
5
</head>6
<body>7
<video height="180" width="300" id="ourvideo" controls>
8
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
9
</video>10
<script>11
var pop = Popcorn("#ourvideo");
12
pop.play();
13
</script>14
</body>15
</html>Question
Ajoutez un bouton "play/pause" pour mettre en pause la vidéo si elle est en cours de lecture ou en lecture si elle est en pause.
Indice
Utilisez pop.pause(), pop.play() et pop.paused()
Solution
1
function playOrPause(){
2
if(pop.paused()){
3
pop.play();
4
document.getElementById("playPause").innerHTML = "Pause";
5
}
6
else{
7
pop.pause();
8
document.getElementById("playPause").innerHTML = "Play";
9
}
10
}
1
<button id="playPause" onclick="playOrPause();">Pause</button>
Question
Faites apparaître un bouton à la fin de la vidéo, qui permet de la recharger. Et faîtes le disparaître après le rechargement de la vidéo.
Indice
Utilisez l'event ended pour détecter la fin de la vidéo et la propriété css "visibility" pour cacher le bouton après le rechargement.
Solution
1
document.getElementById("ourvideo").addEventListener( "ended", function( e ) {
2
document.getElementById("reload").style.visibility = "visible";
3
}, false );4
5
function reload(){
6
pop.load();
7
pop.play();
8
document.getElementById("reload").style.visibility = "hidden";
9
}
1
<button id="reload" onclick="reload();" style="visibility:hidden;">Load</button>
