Lire des médias non-compatibles HTML5
Une des fonctionnalités les plus intéressantes de Popcorn.js est la possibilité de lire des médias qui ne sont normalement pas compatibles avec les balises <audio> et <video> d'HTML5. Ces types de média sont normalement intégrés à l'aide d'une balise <iframe> mais les inclure dans une balise <video> ou <audio> est sémantiquement plus correct. Parmi ces médias, on trouve :
Youtube
Soundcloud
Vimeo
Remarque :
A noter qu'il est quand même possible d'inclure ces médias dans une balise <div>
Exemple : Intégrer une vidéo Youtube (selon la documentation, méthode non fonctionnelle)
1
// ensure the web page (DOM) has loaded2
document.addEventListener("DOMContentLoaded", function () {
3
4
var wrapper = Popcorn.HTMLYoutubeVideoElement( "#video" );
5
wrapper.src = "https://www.youtube.com/watch?v=oHg5SJYRHA0";
6
var example = Popcorn(wrapper);
7
example.play();
8
9
}, false);
Exemple : Intégrer une vidéo Youtube (méthode dépréciée mais fonctionnelle)
1
document.addEventListener('DOMContentLoaded', function () {
2
// create our popcorn instance3
var pop = Popcorn.youtube("#youtube", "http://www.youtube.com/watch?v=v-7kf7OZQtw");
4
5
pop.footnote({
6
start: 1,
7
end: 15,
8
text: "Youtube working!",
9
target: "foo"
10
});
11
12
// play video13
pop.play();
14
});
Complément : Démonstration : Intégrer une vidéo Youtube
Exemple : Intégrer une vidéo Vimeo
1
// ensure the web page (DOM) has loaded2
document.addEventListener("DOMContentLoaded", function () {
3
4
var wrapper = Popcorn.HTMLVimeoVideoElement( "#video" );
5
wrapper.src = "http://vimeo.com/18359846";
6
var example = Popcorn(wrapper);
7
example.play();
8
9
}, false);
Complément : Démonstration : Intégrer une vidéo Vimeo
Exemple : Intégrer une piste SoundCloud
1
// ensure the web page (DOM) has loaded2
document.addEventListener("DOMContentLoaded", function () {
3
4
var wrapper = Popcorn.HTMLSoundCloudAudioElement( "#audio" );
5
wrapper.src = "http://soundcloud.com/lilleput/popcorn";
6
var example = Popcorn( wrapper);
7
example.play();
8
9
}, false);
