Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : [email protected] Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

Tips and Trick

Cara Menampilkan Video dengan Menggunakan HTML 5 dan VideoJS

img-responsive

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 :

  1. Download librari Video-JS nya, klik link berikut ini : Download.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Buat sebuah folder dengan nama video_html, lalu simpan pada folder xampp/htdocs/.
  3. Buat sebuah folder dengan nama video, lalu simpan pada folder xampp/htdocs/video_html/.
  4. Buat sebuah folder dengan nama css, lalu simpan pada folder xampp/htdocs/video_html/.
  5. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/video_html/.
  6. Buat sebuah folder dengan nama image, lalu simpan pada folder xampp/htdocs/video_html/.
  7. Ekstrak file librari VideoJs.zip yang telah didownload tadi.
  8. Copy and paste file video.js dan video-js.swf yang telah didownload ke folder xampp/htdocs/video_html/js/.
  9. Copy and paste file video-js.css dan video-js.min.css yang telah didownload ke folder xampp/htdocs/video_html/css/.
  10. Copy video yang akan di jalankan ke folder xampp/htdocs/video_html/video/.
  11. 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.

<link rel=”stylesheet” href=”” type=”css/video-js.min.css” text/css”>
Untuk memanggil file video-js.min.css yang ada di folder css yang sudah kita buat tadi

<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).

<script src=”js/video.js”></script>
Me-load file video.js di folder js untuk menjadi librari / plugin yang pakai untuk menjalankan videonya.

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.
Bingung cara downloadnya? klik disini untuk melihat caranya.


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.

VideoJS

(Total : 2,376 viewers, 3 viewers today)
Tags
cara-menampilkan-video-dengan-menggunakan-html-5-dan-videojs

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

− 4 = 2

NOTE ARCHIVES