cara menampilkan video dengan html5

7/25/2019 Cara Menampilkan Video Dengan HTML5

1/4

Cara Menampilkan Video

Dengan HTML5 + Langkah& KonfigurasinyaApril 6, 2015 By Syakir Rahman~ Leave a comment

Penggunaan le multime!ia !alam "e#uah $e#"ite merupakan hal yang#ia"a untuk memperkaya in%orma"i !an meningkatkan ke&interakti%&an'(ari "emua le multime!ia yang a!a, vi!eo merupakan )eni" le yangpaling #aik untuk menyampaikan in%orma"i pa!a $e#"ite'

Sayangnya, #e#erapa $e# !eveloper pemula #ia"anya ke"ulitan !alam

menampilkan vi!eo pa!a $e#"ite' Bia"anya, ini karena mem#ata"ipemikiran "en!iri #ah$a menampilkan vi!eo haru" menggunakan plugin

)avacript tam#ahan'

Pa!ahal, "aat ini "u!ah ter!apat teknik *+L5 -i!eo yang !apatmenampilkan vi!eo !engan "e!erhana !an supermu!ah'

Mengenal HTML5 Video*+L5 vi!eo a!alah i"tilah yang !igunakan untuk menampilkan vi!eo!engan menggunakan tag .vi!eo/, yang mana merupakan "alah "atutag *+L5' (engan a!anya tag .vi!eo/, kita #i"a menampilkan "e#uahvi!eo hanya !engan 5 #ari" ko!e "a)a'
http://www.syakirurohman.net/author/syakir-rahmanhttp://www.syakirurohman.net/2015/04/menampilkan-video-pada-web-html5.html#commenthttp://www.syakirurohman.net/2015/04/menampilkan-video-pada-web-html5.html#commenthttp://www.syakirurohman.net/author/syakir-rahman


2/4

ika an!a menggunakan *+L5 vi!eo, "e#aiknya an!a )uga menggunakan!eklara"i *+L5 !an elemen&elemen *+L5 lainnya "ehingga !okumen*+L an!a vali! *+L5'

Contohika an!a ingin melihat #agaimana *+L5 vi!eo #eker)a, "ilahkan lihatcontoh !i#a$ah ini'

.vi!eo $i!th1003 heightauto/

."ource "rchttp4$$$'$"chool"'comhtmlmov7###'mp8 typevi!eomp89 /

."ource "rchttp4$$$'$"chool"'comhtmlmov7###'ogg typevi!eoogg /

."ource "rchttp4$$$'$"chool"'comhtmlmov7###'$e#m typevi!eo$e#m /:our #ro$"er !oe" not "upport *+L5 vi!eo'.vi!eo/

a!i, )ika an!a ingin menampilkan vi!eo !engan html5, cukup "alin ko!e !i

ata"' :ang perlu an!a ganti a!alah url ke le vi!eonya, yang "aya $arnai!engan $arna merah'

Perlu an!a ketahui #ah$a pa!a "etiap #ro$"er, tampilan vi!eo player*+L5 ini #er#e!ae!a, "eperti !i #a$ah ini'

Browser Support+i!ak "emua #ro$"er men!ukung tag .vi!eo/' :aa, inilah kekurangan*+L5 vi!eo )ika !i#an!ingkan !engan vi!eo !engan plugin )ava"cript'

Bro$"erro$"er ver"i lama, ti!ak men!ukung tag .vi!eo/ "ehingga


3/4

*+L5 vi!eo ti!ak #i"a !iterapkan' ;ntuk le#ih !etailnya "ilahkan lihatta#el !i #a$ah ini'

nternet


4/4

po"ter URL (ex.enentukan "um#er le gam#ar yang tampil pa!avi!eo player "aat vi!eo ti!ak #er)alan'

preloa!

autometa!atanone

enentukan #agaimana vi!eo "eharu"nya tampil"e#elum !i mainkan ketika $e#"ite "u!ah !imuat'

"rc URL (ex.enentukan "um#er le vi!eo )ika ti!ak menggunakantag ."ource/ !i!alamnya

$i!thpixels (ex.300px) enentukan le#ar vi!eo player

:ap, itulah pen)ela"an #agaimana menampilkan vi!eo !engan *+L5'Selamat menco#a !an "emoga #erman%aat'

Re%eren"i 4

I http4$$$'$"chool"'comhtmlhtml57vi!eo'a"pI http4$$$'$"chool"'comtag"tag7vi!eo'a"p~uhamma! Syakirurohman~

Tagged in :html5,*+L5 -i!eo
http://www.w3schools.com/tags/att_video_poster.asphttp://www.w3schools.com/tags/att_video_preload.asphttp://www.w3schools.com/tags/att_video_src.asphttp://www.w3schools.com/tags/att_video_width.asphttp://www.w3schools.com/html/html5_video.asphttp://www.w3schools.com/tags/tag_video.asphttp://www.syakirurohman.net/tag/html5http://www.syakirurohman.net/tag/html5-videohttp://www.syakirurohman.net/tag/html5-videohttp://www.w3schools.com/tags/att_video_poster.asphttp://www.w3schools.com/tags/att_video_preload.asphttp://www.w3schools.com/tags/att_video_src.asphttp://www.w3schools.com/tags/att_video_width.asphttp://www.w3schools.com/html/html5_video.asphttp://www.w3schools.com/tags/tag_video.asphttp://www.syakirurohman.net/tag/html5http://www.syakirurohman.net/tag/html5-video

cara menampilkan video dengan html5

Documents