Home » Uncategories » Cara Mudah Menampilkan Video di Web

Cara Mudah Menampilkan Video di Web

Cara Mudah Menampilkan Video di Web - Hallo sahabat Belajar Internet Gratis, Pada Artikel yang anda baca kali ini dengan judul Cara Mudah Menampilkan Video di Web, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Mudah Menampilkan Video di Web
link : Cara Mudah Menampilkan Video di Web

Baca juga


Cara Mudah Menampilkan Video di Web

Bagaimana bentuk tag untuk menampilkan file video ke halaman web dengan HTML5. Caranya cukup mudah, cukup membuat tag HTML sebagai berikut:
view sourceprint?
1.<video width="..." height="..." controls>
2.<source src="namafilemovie" type="mimetype">
3.</video>
dimana atribut ‘width‘ untuk menentukan panjang frame video playernya (dalam satuan pixel); ‘height‘ menentukan lebarnya (pixel); ‘controls‘ untuk menampilkan panel control pada frame video playernya seperti pengatur volume, full screen, seek bar dll; ‘src‘ untuk menentukan file video yang akan ditampilkan (bisa ditulis dalam bentuk URL); ‘type‘ untuk menentukan mime type dari file video tersebut.
Perhatikan contoh berikut ini ya
view sourceprint?
1.<!DOCTYPE html>
2.<html>
3.<body>
4.<video width="320" height="240" controls>
5.<source src="movie.mp4" type="video/mp4">
6.</video>
7.</body>
8.</html>
Penampakan dari kode di atas pada browser adalah sbb:
Web Video Player dengan HTML5
NB: Jangan lupa menuliskan <!DOCTYPE html> pada bagian paling atas HTML Anda, karena kode tersebut merupakan penciri dari HTML5.
Anda dapat mengatur sendiri panjang dan lebar frame videonya, atau menghilangkan/memunculkan controls nya. Lalu format file video apa saja yang disupport HTML5? Format file video yang disupport adalah: *.mp4 (mime type: video/mp4), *.webm (mime type: video/webm), *.ogg (mime type: video/ogg).
Terkadang pula tidak semua jenis browser mensupport ketiga jenis file tersebut, misalnya browser IE dan SAFARI hanya bisa mensupport *.mp4 saja, atau OPERA hanya mensupport *.ogg dan *.webm saja. Sedangkan untuk CHROME dan Firefox mensupport ketiganya.
Penulisan tag <video> bisa juga seperti di bawah ini:
view sourceprint?
01.<!DOCTYPE html>
02.<html>
03.<body>
04. 
05.<video width="320" height="240" controls>
06.<source src="movie.mp4" type="video/mp4">
07.<source src="movie.ogg" type="video/ogg">
08.Your browser does not support the video tag.
09.</video>
10. 
11.</body>
12.</html>
Apa maksud kode di atas? Maksudnya adalah memberikan alternatif format file video. Jika browser yang digunakan mensupport *.mp4, maka file ‘movie.mp4′ yang akan dijalankan. Apabila tidak support, maka yang akan dijalankan ‘movie.ogg’. Sedangkan apabila keduanya tidak disupport maka akan muncul pesan ‘Your browser does not support the video tag.’. Jika Anda membuat kode seperti di atas, maka tentu saja Anda harus mengupload file ‘movie.mp4′ dan ‘movie.ogg’ ke server web.
Dengan HTML5, kita juga bisa membuat tombol Play, Pause, Reload sendiri untuk mengatur jalannya video. Untuk melakukan hal ini, kita menggunakan javascript. Perhatikan contoh berikut ini:
view sourceprint?
01.<!DOCTYPE html>
02.<html>
03.<body>
04. 
05.<button onclick="playVid()" type="button">Play Video</button>
06.<button onclick="pauseVid()" type="button">Pause Video</button>
07.<button onclick="reloadVid()" type="button">Reload Video</button>
08.<br>
09.<video id="video1">
10.<source src="mov_bbb.mp4" type="video/mp4">
11.<source src="mov_bbb.ogg" type="video/ogg">
12.Your browser does not support HTML5 video.
13.</video>
14. 
15.<script>
16.var myVideo=document.getElementById("video1");
17. 
18.function playVid()
19.{
20.myVideo.play();
21.}
22. 
23.function pauseVid()
24.{
25.myVideo.pause();
26.}
27. 
28.function reloadVid()
29.{
30.myVideo.load();
31.}
32.</script>
33. 
34.</body>
35.</html>
Keterangan:
  • Untuk menjalankan video, cukup panggil dengan method play(), untuk mempausenya dengan method pause(), dan untuk mereload video gunakan load().
  • Perhatikan kode di atas, untuk tag videonya diberi id=”video1″. ID ini nanti akan digunakan untuk proses pemanggilan elemen di javascriptnya, yaitu myVideo=document.getElementById("video1")
Tampilan dari kode di atas adalah sbb:
Web Video Player dengan HTML5
Mudah bukan membuatnya? selamat mencoba dan semoga bermanfaat. Untuk referensi lebih lengkap, Anda bisa mempelajarinya di w3schools.com.

Sources: http://blog.rosihanari.net/cara-mudah-menampilkan-video-di-web-dengan-html5/


Demikianlah Artikel Cara Mudah Menampilkan Video di Web

Sekianlah artikel Cara Mudah Menampilkan Video di Web kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Mudah Menampilkan Video di Web dengan alamat link https://ilmutentanginternet.blogspot.com/2014/01/cara-mudah-menampilkan-video-di-web.html

0 Response to "Cara Mudah Menampilkan Video di Web"

Posting Komentar

Langganan: Posting Komentar (Atom)