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 ibarat text, aplikasi, gambar, suara, video, dan lain sebagainya supaya 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 ibarat 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 diubahsuaikan 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, ibarat 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 ibarat *.swf dan lain-lain sebagainya. Perintah yang dipakai yaitu <embed src="siboy.swf"> Untuk penulisan arahan 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 penggalan arahan 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/AVvXsEgffeOT5ut7Qq61W0KkyhghpAYLyerszBnX0erz_vuDrbN_q1FYh0wK3QCmeEOStGQGASe6qiYQ3mcgJpmMiD7mlvIrP4fkJ1MgZjKFxArJIA-THBs6aWppchmKC2TNETKEwZ03XGJaIAL5/s1600/rol_belakang.gif">
</body>
</html>

Untuk attribut penggunaan embed sanggup ditambahkan pada tag tersebut attribut ibarat 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.

Komentar

Posting Komentar

Postingan populer dari blog ini

Makeup Costless & Oiled Hair

Gambar
The weather condition close me has been thus mutual frigidness in addition to rainy in addition to yucky lately! I immature lady summer! Yesterday I stayed dwelling in addition to hid from the elements. It was squeamish to hand my confront a residue wearing absolutely no makeup at all. I also took payoff of the total twenty-four hours past times doing an crude handling inwards my pilus for close xviii hours! I bring an essential crude blend that I massaged on my scalp to attention receive pilus increment in addition to through my lengths is pure, mutual frigidness pressed, extra virgin kokosnoot oil! I become a big 54oz tub of it at Costco for alone $15!! I commonly apply this every nighttime earlier I invention to launder the side past times side day. So betwixt ii in addition to three times a week. The benefits of oiling your pilus amongst kokosnoot crude are countless. Here are a few: significantly reduces poly peptide loss inwards hair helps add together smoothen in ...
Baca selengkapnya

It Cosmetics Goodbye Bye Pores Illumination Together With Blush Autumn '17

Gambar
The It Cosmetics newness for Fall continues! Today's postal service is nearly the Bye Bye Pores Illumination Powder as well as Bye Bye Pores Blush inwards "Sweet Cheeks." Continue reading for my thoughts, swatches as well as all that form of goodness! BYE BYE PORES ILLUMINATION  From the Brand: "Developed amongst plastic surgeons, Bye Bye Pores Illumination™ features your best-selling, award-winning Bye Bye Pores Pressed™ benefits—plus subtle radiance for the await of 2nd airbrushing as well as a lit-from-within glow! While Bye Bye Pores Optical Blurring Technology™ blurs the appearance of pores as well as imperfections, Drops of Light Technology™ adds natural-looking illumination without glitter or shimmer. Infused amongst anti-aging silk, hydrolyzed collagen, antioxidants as well as peptides, this talc-free universal translucent pulverization won’t settle into lines or pores—and is perfect for all peel types as well as tones!" Me: This...
Baca selengkapnya

It Cosmetics Confidence Inwards A Cleanser Autumn '17

Gambar
This week's It Cosmetics Fall 2017 review is all virtually Confidence In a Cleanser! I'm thence happy to come across It's skincare options expand to a greater extent than in addition to was thrilled to endeavor this on. Continue reading for my thoughts. Here is What It Cosmetics says virtually the Confidence In a Cleanser: "Developed alongside plastic surgeons, Confidence inwards a Cleanser™ is your skin-loving cleanser in addition to serum inwards i game-changing product! This breakthrough one-step skincare solution gently cleanses in addition to moisturizes spell leaving your pare feeling soft, refreshed in addition to perfectly balanced. Ideal for all pare types in addition to ophthalmologist-tested for your sensitive oculus area, this sulfate-free in addition to soap-free facial cleanser immediately removes all traces of makeup—even waterproof oculus makeup—and improves your skin's vitality. Featuring proprietary Anti-Aging Armour Rejuvenating Concen...
Baca selengkapnya