Dengan adanya situs video seperti Youtube, perkembangan infornasi di internet semakin pesat! Banyak tutorial dalam bentuk video bertebaran, dengan semangat belajar yang cukup siapapun bisa mencari video tutorial dan belajar sendiri dari video. Disisi lain, metode pengajaran konvensional dengan memperlihatkan slide juga masih efektif.
Slide yang dimasukkan didalam video dapat dilakukan, tetapi akan lebih interaktif jika keduanya bisa muncul bersamaan.
Video merepresentasikan sang guru, dan slide merepresentasikan materi yang mewakili bahan pembelajaran. Maka untuk sebuah online learning yang efektif diperlukan video dan slide yang tersinkronisasi berdasarkan durasi video.
Bagaimana melakukan sinkronisasi video dan slide/gambar ? Popcorn.js! dan itu gratis!
Saya mendapatkan sebuah cara sederhana untuk dapat melakukan sinkronisasi sebuah video youtube dengan sebuah set gambar. Masih banyak contoh menarik lainnya di website developernya.
Berikut adalah snippetnya:
<html>
<head>
< script src="http://popcornjs.org/code/dist/popcorn-complete.min.js">
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling the Youtube player plugin
var example = Popcorn.youtube(
'#video',
'http://www.youtube.com/watch?v=CxvgCLgwdNk' );
// add a footnote at 2 seconds, and remove it at 6 seconds
example.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
example.play();
}, false);
</script>
</head>
<body>
< div id="video" style="width: 360px; height: 300px;" >
< div id="footnotediv">
</body>
</html>
Sumber, Selamat mencoba 🙂