Interactive movie (film interaktif) merupakan salah satu cara untuk menyampaikan konten dengan cara yang lebih menarik kepada pemirsanya. Dalam definisi yang sederhana, sebuah interactive movie adalah video digital yang mendukung interaksi dari pemirsanya, dapat berupa aksi klik pada mouse ataupun sentuhan pada layar sentuh. Tidak seperti video tradisional yang bersifat satu arah dan aksi yang dapat dilakukan hanya berupa play/pause/stop, namun interactive movie akan memberikan pengalaman yang melebihi itu, seperti memberikan pilihan kepada pemirsanya dan menampilkan kelanjutan ceritanya berdasarkan pilihan tersebut. Interactive movie tentu sangat bermanfaat bila diterapkan pada dunia pembelajaran, seperti meningkatkan minat belajar dan juga tingkat pengertian pembelajar.

Pada artikel ini saya akan membahas bagaimana membuat sebuah interactive movie dengan memanfaatkan teknologi HTML5 video. Artikel ini akan banyak membahas bagian teknis pemrograman user interaction dan juga video. Maka bagi yang belum mengetahui pemrograman javascript dapat mempelajari dasar-dasarnya pada tautan berikut terlebih dahulu https://www.tutorialspoint.com/javascript/

Artikel ini akan dibagi menjadi beberapa bagian. Pada bagian pertama ini, saya akan membahas bagaimana menyiapkan workspace untuk proyek interactive movie.

Menyiapkan Workspace

Buatlah sebuah folder dengan nama “interactive-movie” dalam komputer anda, dan buatlah struktur folder sebagai berikut di dalamnya:

interactive-movie
-- css
---- app.css
-- images
-- js
---- app.js
-- videos
---- movie.mp4
-- index.html

Dokumen index.html merupakan halaman HTML yang akan menampung konten interaktif dan video. Dokumen app.js akan berisi bahasa program javascript untuk mengontrol jalannya konten interaktif dan video. Dokumen app.css akan berisi definisi Cascading Style Sheet untuk mengatur tampilan layout dari elemen-elemen HTML.

Library Interaktif HTML5

HTML5 telah menyediakan Application Programming Interface yang berisi class dan fungsi yang dapat digunakan untuk mengelola multimedia dan interaksi dari pengguna pada web browser.

Bukalah dokumen index.html dengan menggunakan teks editor seperti Sublime Text atau yang lainnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Judul Interactive Movie</title>
  <meta name="description" content="Penjelasan singkat tentang interactive movie.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="css/app.css">
  
  <script src="js/app.js"></script>  

</head>
<body onload="init();" >
  <div>
    <video id="video-container" type="video/mp4" src="videos/movie.mp4" playsinline></video>
    <div id="overlay-v"></div>
  </div>
</body>
</html>

Cascading Style Sheet

Selanjutnya bukalah file app.css dan isikan definisi style berikut:

#overlay-v, #video-container{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html, body {
  height: 100%;
  margin:0;
  background: #000;
}

Elemen HTML dengan ID overlay-v dan video-container akan memiliki definisi style yang sama. Yang penting dari definisi style ini adalah posisi absolute yang berarti elemen akan saling bertumpuk, elemen overlay-v akan ada di tumpukan paling atas dan video di bawahnya. Hal ini bertujuan agar pengguna hanya dapat berinteraksi dengan elemen overlay-v, tidak langsung dengan elemen video.

Hello World!

Kita telah memasuki bagian terakhir dari artikel tahap pertama yaitu membuat fungsi program untuk menampilkan teks “Hello world!“. Bukalah dokumen index.html dan isikan code berikut:

function init() {
  alert("Hello world!");
}

Simpan code tersebut dan bukalah dokumen index.html dengan menggunakan web browser. Bila halaman web berwarna hitam dan muncul sebuah pop-up yang berisi teks Hello World, berarti anda telah berhasil mengikuti sampai saat ini.

Demikian bagian pertama dari artikel membuat interactive movie, pada artikel selanjutnya akan dibahas mengenai bagaimana membuat interaksi dengan menggunakan javascript pada HTML. Terima kasih telah membaca artikel ini.

Referensi