Download Source Code Aplikasi

Memainkan Video Di Web Memakai Html5

Wednesday, August 28th, 2019 - Artikel HTML

Sampai kini belum adanya patokan standar yang dipakai untuk memainkan suatu file video pada situs web, sehingga browser satu dengan lainnya memerlukan plug-in berbeda untuk melaksanakan hal itu.

Di HTML5 ada satu elemen berjulukan VIDEO, ia dipakai untuk memainkan file video pada situs web.

Contoh berikut menggunakannya untuk memainkan file video Upin & Ipin di web:

<VIDEO CONTROLS=”controls” SRC=”upin_dan_ipin.mp4″> </VIDEO>

CONTROLS, atribut itu untuk menampilkan video controls, menyerupai tombol play, stop, pause, dll. SRC (atribut wajib yang harus ada), ia itu untuk tetapkan URL dari file video yang ingin dimainkan – untuk pola di atas upin_dan_ipin.mp4.

Atribut lain untuk elemen VIDEO adalah:

AUTOPLAY=”autoplay”
Atribut AUTOPLAY berkhasiat semoga dikala video telah siap (browser pertama kali muat), video itu akan eksklusif dimainkan, tanpa harus menekan tombol play. Atribut AUTOPLAY sering dipakai dikala atribut CONTROLS tidak digunakan, opsional. Sebagai contoh:

<VIDEO SRC=”upin_dan_ipin.mp4″ AUTOPLAY=”autoplay”> </VIDEO>

LOOP=”loop”
Atribut LOOP berkhasiat semoga video start kembali, setiap kali video itu telah final main. Sebagai contoh:

<VIDEO SRC=”upin_dan_ipin.mp4″ LOOP=”loop”> </VIDEO>

PRELOAD=[“auto”,”metadata”,”none”]
Atribut PRELOAD dapat kita gunakan untuk tetapkan bagaimana cara file video dimuat oleh browser dikala halaman pertama kali muat (ditampilkan).

HEIGHT dan WIDTH
Atribut HEIGHT dan WIDTH masing-masing tetapkan tinggi dan lebar dari video player. Sebagai contoh:

<VIDEO CONTROLS=”controls” SRC=”upin_dan_ipin.mp4″ WIDTH=”320″ HEIGHT=”240″> </VIDEO>

POSTER=URI
Atribut POSTER dipakai untuk tetapkan file gambar yang akan ditampilkan selagi video itu sedang dimuat, atau hingga pengguna menekan tombol play. Sebagai contoh:

<VIDEO CONTROLS=”controls” SRC=”upin_dan_ipin.mp4″ WIDTH=”320″ HEIGHT=”240″ POSTER=”image.gif”> </VIDEO>

MUTED=”muted”
Atribut MUTED dipakai untuk tetapkan bahwa output audio dari video tidak terdengar (dimatikan). Umumnya untuk mengembalikan output audio semoga terdengar kembali, pengguna cukup mengklik gambar speaker tercoret yang ada di video player. Sebagai contoh:

<VIDEO CONTROLS=”controls” SRC=”upin_dan_ipin.mp4″ WIDTH=”320″ HEIGHT=”240″ MUTED=”muted”> </VIDEO>

IE9, Firefox, Opera, Chrome, dan Safari mendukung VIDEO. Tetapi, IE8 dan versi sebelumnya, tidak mendukung VIDEO. Saat ini, ada 3 format file yang didukung untuk VIDEO: MP4 (file MPEG 4 dengan H264 video codec dan AAC audio codec), WebM (file WebM dengan VP8 video codec dan Vorbis audio codec), dan Ogg (file Ogg dengan Theora video codec dan Vorbis audio codec).

  • IE9 mendukung MP4.
  • Firefox 3.6 mendukung WebM dan Ogg.
  • Google Chrome 6 mendukung MP4, WebM, dan Ogg.
  • Apple Safari 5 mendukung MP4.
  • Opera 10.6 mendukung WebM dan Ogg.

Untuk sumbangan format file video di atas berlainan untuk setiap browser. Semisal cotoh kasus dikala aku memiliki instruksi berikut:

<VIDEO CONTROLS=”controls” SRC=”upin_dan_ipin.mp4″> </VIDEO>

Kode di atas hanya IE9, Google Chrome 6, dan Apple Safari 5 saja yang akan menjalankan file format videonya.

Bagaimana dengan Firefox 3.6 dan Opera 10.6 untuk antisipasinya?

Antisipasinya dengan melibatkan elemen SOURCE, dan menjadi berikut bentuknya:

<VIDEO CONTROLS=”controls”> <SOURCE SRC=”upin_dan_ipin.mp4″> <SOURCE SRC=”upin_dan_ipin.ogg”> </VIDEO>

Lihat pada instruksi yang diberikan warna biru, itulah antisipasi untuk browser Firefox 4.0 dan Opera 10.6. Begitupun untuk kasus-kasus yang sebaliknya.

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
Download Source Code Aplikasi
Memainkan Video Di Web Memakai Html5 | Ahmad Code | 4.5