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

Penerapan Css Pada Elemen Tabel

Gambar
Tabel ialah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun  urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga gampang untuk disimak. Untuk mengatur tampilan tabel di halaman web diharapkan css biar tampilannya menjadi lebih menarik. Dengan CSS sanggup mengatur style sebuah tabel biar tampak lebih bagus dan menarik. Tersedia beberapa properti untuk mengatur style tabel diantaranya untuk mengatur border, warna background, warna teks, margin dan padding serta tak lupa properti untuk mengatur lebar kolom dan tinggi baris. 1. Konsep Dasar Model Box Pada dasarnya elemen dari HTML ialah model box. Istilah model box ini dipakai pada ketika membahas desain dan layout. Model box memungkinkan untuk menciptakan border disekeliling elemen dan space elemen yang saling berhubungan. Model box pada elemen HTML sanggup digambar sebagai berikut : No. Properti Keterangan 1. Margin Daerah paling diluar yang membatas
Baca selengkapnya

Carol's Immature Adult Woman Pracaxi Nectar Pilus Products

Gambar
Earlier this year, Carol's Daughter released a novel line, Pracaxi Nectar,  which contains 3 styling products featuring this unique component sourced from Brazil. This trouble was designed to nourish your pilus spell providing styling needs. I of late had a endangerment to campaign out the trouble thus choke along reading for my thoughts on the products! Here is what CarolsDaughter.com says almost the products:  "Finally, yous tin mode your pilus amongst the best conditioning care! This styling trouble is made amongst natural Pracaxi Oil—the conditioning “miracle” nectar of Brazil—and lots of love, thus your hairstyles concluding as well as remain soft to the comport on without fearfulness of dryness, flakes or residue. Keep your pilus healthy-looking as well as beautiful, no affair how yous shine it, mold it, twist it, or stone it!" All of these products incorporate No Mineral Oil, No Artificial Colors, as well as No Petrolatum Carol's Daughter is 1 o
Baca selengkapnya

Vacation Twenty-Four Hr Menstruum I Hair, Makeup, Outfit Pics/Photoshoot

Gambar
My boyfriend, Tommie, too I latterly went on a prissy vacation. We didn't become all that far- only downward to Wildwood too Atlantic City (in New Jersey) We had such a wonderful fourth dimension too of course of written report opor-garai only went means likewise fast. Of course of written report I took lots of pictures, too took roughly focusing on my makeup, pilus too outfits for here. So over the adjacent few days I volition hold out posting roughly nice, photograph heavy weblog posts! I dearest the clothing I wore for our start out nighttime hanging out on the boardwalk! It combined galaxy impress which I dearest too it's pink, which I also love! This clothing is from Hot Topic too I purchased it a few years ago. The sandals are aerosoles. The dark hooded long cardigan I am wearing over the clothing inward roughly of the pictures is from Urban Outfitters too is at to the lowest degree five years old. at dinner alongside a gorgeous view vacations are for
Baca selengkapnya