Cara Menampilkan Video dengan Menggunakan HTML 5 dan VideoJS

| Apr 17, 2017

Catatan kali ini akan membahas mengenai cara membuatcara menampilkan video di browser menggunakan HTML 5. Pada catatan kali ini saya akan menggunakan sebuah librari yaitu video-js. Librari ini yang nantinya akan kita gunakan untuk menjalankan video. Ikuti lah langkah-langkahnya berikut ini.

Demo

Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Demo.

STEP 1 – PERSIAPAN

Berikut ini adalah hal-hal yang harus dipersiapkan :

Download librari Video-JS nya, klik link berikut ini : Download.
Buat sebuah folder dengan nama video_html, lalu simpan pada folder xampp/htdocs/.
Buat sebuah folder dengan nama video, lalu simpan pada folder xampp/htdocs/video_html/.
Buat sebuah folder dengan nama css, lalu simpan pada folder xampp/htdocs/video_html/.
Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/video_html/.
Buat sebuah folder dengan nama image, lalu simpan pada folder xampp/htdocs/video_html/.
Ekstrak file librari VideoJs.zip yang telah didownload tadi.
Copy and paste file video.js dan video-js.swf yang telah didownload ke folder xampp/htdocs/video_html/js/.
Copy and paste file video-js.css dan video-js.min.css yang telah didownload ke folder xampp/htdocs/video_html/css/.
Copy video yang akan di jalankan ke folder xampp/htdocs/video_html/video/.
Copy gambar (bebas gambar apa saja) untuk menjadi thumbnail dari video yang akan di jalankan ke folder xampp/htdocs/video_html/image/.

STEP 2 – VIEW DATA

Selanjutnya kita akan membuat sebuah file php yang berfungsi untuk menampilkan video yang akan di mainkan. Buat sebuah file baru dengan nama index.php, lalu simpan pada folder xampp/htdocs/video_html/. Berikut ini tampilan dan kodenya :

View - Cara Menampilkan Video dengan Menggunakan HTML 5 dan VideoJS

<html>
    <head>
        <title>Menpilkan Video</title>
        <!-- Load file video-js.min.css yang ada di file css --> 
        <link rel="stylesheet" href="css/video-js.min.css" type="text/css">
    </head>
    <body style="margin: 0px;">
        <div style="background: whitesmoke;padding: 10px; ">
            <h1 style="margin-top: 0;">Cara Menampilkan Video Di Browser Menggunakan HTML 5</h1>
            <p>
                FOLLOW US ON  
                <a target="_blank" style="background: #3b5998; padding: 0 5px; border-radius: 4px; color: #f7f7f7; text-decoration: none;" href="https://www.facebook.com/mynotescode">Facebook</a> 
                <a target="_blank" style="background: #00aced; padding: 0 5px; border-radius: 4px; color: #ffffff; text-decoration: none;" href="https://twitter.com/code_notes">Twitter</a> 
                <a target="_blank" style="background: #d34836; padding: 0 5px; border-radius: 4px; color: #ffffff; text-decoration: none;" href="https://plus.google.com/118319575543333993544">Google+</a>
            </p>
        </div>
      
        <div style="padding: 10px;">
        
            <!-- Setting ukuran video yang akan di tampilkan -->
            <video class="video-js vjs-default-skin" width="1000" height="542"
                poster="image/gambar.png"
                data-setup='{"controls" : true, "autoplay" : false, "preload" : "auto"}'>
            
            <!-- Load file video yang ada di folder video -->
            <source src="video/video.mp4" type='video/mp4' />
            
            </video>
        </div>

        <!-- Load file ajax.js yang ada di folder js -->
        <script src="js/video.js"></script>
        <script>
            /*memanggil file video-js-swf yang ada di folder js */
            videojs.options.flash.swf = "js/video-js.swf";
        </script>
    </body>
</html>

Pada kode diatas, kita akan me-load librari / plugin yang dibutuh kan seperti Video-JS. Oke saya akan coba jelaskan sedikit mengenai kode diatas karena sebagian sudah saya jelaskan pada tiap-tiap kode dengan komentar.

Baca Juga:

<video class=”video-js vjs-default-skin” width=”1000″ height=”542″
poster=”image/gambar.png”
data-setup='{“controls” : true, “autoplay” : false, “preload” : “auto”}’></video>
Membuat wadah untuk menset ukuran dan tampilan yang akan muncul di halaman browser agar sesuai dengan keinginan, saya sengaja mengeset width=”1000″ dan height=”542″ karena saya men-set nya menggunakan pixel, anda juga bisa men-set nya menggunakan % bila anda ingin video itu bisa responsive. Coba lihat atribut poster=”” itu berfungsi untuk me-load gambar thumbnail dari sebelum video itu di mainkan dan atribut data-setup=” itu bersungsi untuk membuat data setup yang akan digunakan di video tersebut, parameter untuk setup nya bisa anda lihat di link berikut : Dokumentasi (Anda akan masuk ke halaman Iklan terlebih dahulu, Tunggu 5 detik lalu klik tombol SKIP AD yang ada di pojok kanan atas).

videojs.options.flash.swf = “js/video-js.swf”;
Untuk menjalankan plugin flash buat menjalankan video tersebut pada browser.

Sekian untuk catatan kali ini. Semoga catatan ini bisa bermanfaat. Apabila ada yang ingin ditanyakan, langsung tanyakan saja lewat form komentar dibawah ini. Jangan lupa LIKE & SHARE nya hehe. Terimakasih.

SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.

SUMBER & REFERENSI

Dokumentasi VideoJS : http://docs.videojs.com/
https://www.w3schools.com/html/html5_video.asp

Tutorial cara menampilkan video di browser menggunakan HTML 5, Tutoria html5 video , cara mudah membuat menampikan video dengan html5.