{"id":7027,"date":"2019-03-26T19:03:51","date_gmt":"2019-03-26T12:03:51","guid":{"rendered":"http:\/\/binus.ac.id\/knowledge\/?p=7027"},"modified":"2020-01-10T14:12:55","modified_gmt":"2020-01-10T07:12:55","slug":"membuat-interactive-movie-bagian-ke-2","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/knowledge\/2019\/03\/membuat-interactive-movie-bagian-ke-2\/","title":{"rendered":"Membuat Interactive Movie Bagian ke-2"},"content":{"rendered":"

Melanjutkan dari artikel membuat interactive movie bagian ke-1<\/a>, kali ini saya akan membahas bagaimana membuat tombol atau area hotspot<\/em> pada video agar dapat muncul pada waktu tertentu dan pengguna dapat berinteraksi dengan mengkliknya.<\/p>\n

Pertama, kita perlu men-download video untuk dijadikan sebagai contoh yaitu video dari Sintel \u00a9 oleh Blender Foundation<\/em> pada tautan berikut https:\/\/mdn.github.io\/learning-area\/javascript\/apis\/video-audio\/finished\/video\/sintel-short.mp4<\/a>, simpan file video dan beri nama movie.mp4<\/strong><\/span> pada folder<\/em> videos.<\/p>\n

Kedua, kita perlu menambahkan style<\/em> dengan tipe class<\/em> hotspot<\/strong> ke dalam CSS<\/em> kita. Style class<\/em> hotspot<\/strong> berarti setiap elemen yang menggunakan style<\/em>\u00a0class<\/em> ini akan memiliki format<\/em> tampilan yang sama.<\/p>\n

#overlay-v, #video-container{ \r\n\u00a0 position:absolute; \r\n\u00a0 left:50%; \r\n\u00a0 top:50%; \r\n\u00a0 transform: translate(-50%, -50%); \r\n\u00a0 width: 100%; \r\n\u00a0 height: 100%; \r\n\u00a0 object-fit: contain; \r\n} \r\nhtml, body { \r\n\u00a0 height: 100%; \r\n\u00a0 margin:0; \r\n\u00a0 background: #000; \r\n}\r\n.hotspot {\r\n\u00a0 position: absolute;\r\n\u00a0 background-color:rgba(0,0,128, 0.5);\r\n\u00a0 display: none;\r\n\u00a0 text-align:center;\r\n\u00a0 cursor: pointer;\r\n\u00a0 padding: 20px;\r\n\u00a0 color: #fff;\r\n\u00a0 left: 0;\r\n\u00a0 top: 0;\r\n\u00a0 width: 100px;\r\n\u00a0 height: 100px;\r\n}<\/pre>\n
Class CSS hotspot<\/em> ini akan disembunyikan terlebih dahulu (display:none<\/strong><\/em>) dan akan ditampilkan pada saat waktu yang telah ditentukan melalui javascript.<\/em><\/p>\n
Bukalah dokumen index.html<\/strong> dan tambahkan ke dalam tag overlay-v<\/strong><\/em> beberapa tag<\/em> baru untuk kita jadikan hotspot<\/em> seperti ditunjukkan pada code<\/em> di bawah:<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Judul Interactive Movie<\/title>\r\n  <meta name=\"description\" content=\"Interactive movie.\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \r\n  <link rel=\"stylesheet\" href=\"css\/app.css\">\r\n  <script src=\"js\/app.js\"><\/script>  \r\n\r\n<\/head>\r\n<body onload=\"init();\" >\r\n  <div>\r\n    <video id=\"video-container\" type=\"video\/mp4\" src=\"videos\/movie.mp4\" playsinline><\/video>\r\n    <div id=\"overlay-v\">\r\n\r\n       <div class=\"hotspot\" data-show-time=\"3.5\" onclick=\"seekTo(84)\" style=\"width: 30%; height: 15%; left: 35%; top: 60%\" >Skip to Dragon Scene<\/div>\r\n\r\n       <div class=\"hotspot\" data-show-time=\"97\" style=\"top: 20%; width: 50%; left: 25%; height: 5%\">What will she do?<\/div>\r\n      <div class=\"hotspot\" data-show-time=\"97\" onclick=\"seekTo(97.1)\" style=\"background: green; top: 70%; width: 20%; height: 5%; left: 20%\">Safe<\/div>\r\n      <div class=\"hotspot\" data-show-time=\"97\" onclick=\"seekTo(61)\" style=\"background: red; top: 70%; width: 20%; height: 5%; left: 60%\">Leave<\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/code><\/pre>\n
Pada setiap elemen div<\/em> dengan class hotspot<\/strong><\/em> kita dapat memberikan perubahan style<\/em> khususnya pada width, height<\/em>, posisi left<\/em>, dan right.<\/em> Selain itu yang sangat penting adalah atribut data-show-time<\/strong><\/em> yang akan berisi nilai kapan waktu hotspot<\/em> ini muncul<\/span> dan onclick<\/strong><\/em> yang akan berisi fungsi javascript yang akan dilakukan ketika hotspot<\/em> ini diklik<\/span> oleh pengguna.\u00a0 Terdapat 1 hotspot<\/em> yang hanya berisi informasi dan 3 hotspot<\/em> yang diklik dan memindahkan detik video ke detik 84, 97.1, dan 61.<\/p>\n
Berikutnya adalah memodifikasi code<\/em>\u00a0pada dokumen app.js<\/strong>, sisipkan code<\/em> berikut pada awal baris sebelum<\/strong> fungsi init():<\/p>\n
var media; \/\/ video player element\r\nvar cuePoints = []; \r\nvar overlay;\r\nvar prevTime = 0;\r\nvar activeHotspots = [];<\/pre>\n
Berikut adalah penjelasan dari variabel-variabel yang didefinisikan:<\/p>\n