Traitement avancé d'une vidéo
Popcorn.js permet d'effectuer plus avancés sur les vidéos grâce à son système de plugin. Ces plugins permettent entre autres :
D'exécuter une fonction JavaScript à un certain moment de la vidéo
D'afficher des cartes Google Maps
D'afficher des images
De sous-titrer une vidéo
Et bien d'autres choses encore...
Exemple : Sous-titrer une vidéo
1
document.addEventListener("DOMContentLoaded", function () {
2
3
var example = Popcorn("#video");
4
5
example.subtitle({
6
start: 0,
7
end: 2,
8
text: "*Who's that Pokemon !*",
9
});
10
11
example.play();
12
13
}, false);
Complément : Démonstration : Insérer des sous-titres
Exemple : Afficher une carte Google Maps
1
document.addEventListener("DOMContentLoaded", function () {
2
3
var example = Popcorn("#video").googlemap({
4
start: 2,
5
end: 6,
6
type: "ROADMAP",
7
target: "gmaps",
8
lat: 37.760004,
9
lng: 140.481435
10
});
11
12
example.play();
13
14
}, false);
Complément : Démonstration : Insérer une carte Google Maps
Exemple : Afficher un article Wikipedia
1
document.addEventListener("DOMContentLoaded", function () {
2
3
var example = Popcorn("#video").wikipedia({
4
start: 3,
5
end: 6,
6
src: "https://fr.wikipedia.org/wiki/Pikachu",
7
target: "wiki"
8
});
9
10
example.play();
11
12
}, false);
Complément : Démonstration : Insérer un article WIkipédia
Exemple : Afficher une image
1
document.addEventListener("DOMContentLoaded", function () {
2
3
var example = Popcorn("#video");
4
5
example.image({
6
start: 3,
7
end: 6,
8
src: "http://img2.wikia.nocookie.net/__cb20130313231409/scratchpad/images/3/32/Pikachu2.png",
9
target: "picture"
10
});
11
12
example.play();
13
14
}, false);
Complément : Démonstration : Insérer une image
Exemple : Exécuter une fonction JavaScript
1
document.addEventListener("DOMContentLoaded", function () {
2
3
var example = Popcorn("#video");
4
5
example.code({
6
start: 3,
7
end: 5,
8
onStart: function( options ) {
9
// Code you want to execute at the beginning10
},
11
onEnd: function( options ) {
12
// Code you want to execute at the end13
}
14
});
15
16
17
example.play();
18
19
}, false);
Complément : Démonstration : Exécuter une fonction JavaScript
Remarque :
Cette liste des plugins n'est pas exhaustive. Les plugins de Popcorn.js permettent bien de faire bien d'autres choses.
