Wednesday, March 25, 2020

Format Tampilan Video Dan Animasi

Untuk menampilkan video pada halaman web sanggup ditangani secara eksklusif oleh HTML5. Tag yang dipakai untuk menampilkan video yaitu <video> </video>. Namun tidak semua format videonya sanggup ditampilkan di web. Sementara ini, hanya beberapa format video yang sanggup diproses, di antaranya yaitu WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing browser terhadap file video.

A. MIME untuk format Video
MIME (Multipurpose Internet Mail Extension) dipakai untuk prosedur untuk mengirim banyak sekali gosip menyerupai text, aplikasi, gambar, suara, video, dan lain sebagainya semoga browser tidak salah menterjemahkan konten yang diterima. Tidak hanya pada web, email juga memakai MIME. Berikut yaitu tipe mime untuk format video.
FormatMIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

B, Menyajikan File Video pada Tampilan Web
File video menyerupai mp4 sanggup dimainkan pada halaman web melalui tag<video></video>. Ketika mencoba menjalankan video pada halaman web , file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya diadaptasi dengan file audio yang anda gunakan.Berikut yaitu format lengkap untuk memainkan video ke dalam aplikasi web</video>.
<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="mobil.mp4" type="video/mp4">
browser anda tidak mendukung format video ini.
</video>
</body>
</html>

Atribut Height dan Width dalam tag <video> dipakai untuk menentukan tinggi dan lebar penampilan video. Atribut Src menentukan file video. Bila listing kegiatan diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya

Tag <video> mempunyai beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, menyerupai play, pause, dan volume. Berikut ini yaitu atribut – atribut yang dipakai pada tag <video>.
AtributSintaksKeterangan
autoplay<audio autoplay="autoplay">Memulai secara otomatis video
controls<video controls = "controls" >
Atau juga sanggup ditulis
<video controls>
Menampilkan tombol kontrol video
height<video height="240">Mengatur tinggi frame video
width<video width="320">Mengatur lebar frame video
loop<video loop=”loop”>Memutar video secara berulang-ulang
muted<video muted=”muted”>mematikan fungsi bunyi pada video
poster<video poster="anak.gif">Memunculkan poster/gambar pada ketika video buffer
atau diunduh.
preload<video preload="preload">Memuat ulang video
src<source src="bola.mp4"
type="video/mp4">
Memberikan link video

Atribute poster berfungsi untuk memunculkan poster/gambar pada ketika video buffer atau diunduh. Misalnya ketika buffer video akan muncul gambar “anak.gif” maka dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file anak.gif diletakan dalam folder yang sama dengan file html nya.</video>.

Source atau src dipakai disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan memakai 2 sumber dimana file tersebut mempunyai isi yang sama tetapi format yang berbeda. Tujuannya disini yaitu web browser akan menentukan memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser tersebut.


C. Menyajikan Animasi Pada Tampilan Web
File animasi juga sanggup ditampilkan pada halaman web dengan cara diembed-kan. Embed dipakai untuk melampirkan file dari eksternal menyerupai *.swf dan lain-lain sebagainya. Perintah yang dipakai yaitu <embed src="siboy.swf"> Untuk penulisan instruksi embed selengkapnya yaitu sebagai berikut ini.
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="siboy.swf">
<p></p><--file animasi flash siboy.swf--></p>
</body>
</html>

Pada halaman web selain animasi dalam bentuk *.swf dengan memakai perintah < embed> sanggup juga menampilkan animasi dalam bentuk *.gif. Hal ini sanggup dilihat pada serpihan instruksi berikut dimana file rol_belakang.gif merupakan gambar bergerak (animasi).
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX45vHVo2tFz_MtvZzxkn5zX6eu1TrScGed2PKObNV5wa5FDEHj9iIu29-ImMh90Qg3MTl6E3fWr14KMZ396xuNSuYNPOs77-L6ixK8By2WjKMwRoMvfjh__1tkDuyLN4BMcZwGtT6rL2l/s1600/rol_belakang.gif">
</body>
</html>

Untuk attribut penggunaan embed sanggup ditambahkan pada tag tersebut attribut menyerupai pada tabel berikut ini.
AtributNilaiKeterangan
heightpixelsMendefenisikan ukuran tinggi frame media.
srcURLMemberikan sumber media yang dilampirkan
typeMIME_typeMenspesifikasikan tipe dari MIME
widthpixelsMengatur lebar dari frame media pada ketika program
dijalankan di browser.

No comments:

Post a Comment