Video dengan Tag HTML 5

29/03/2014 09:19

Ada kelemahan dari HTML5 ini, yaitu belum semua web browser mendukung HTML5..
tapi tunggu saja.. ke depannya pasti web browser akan mendukung HTML versi
ini.. untuk mencobanya, pastikan web browser Anda adalah :
- Internet Explorer (IE) versi 9.0+
- Firefox versi 3.5+
- Opera versi 10.5+
- Google Chrome versi 5.0+
- Safari versi 3.0+

Namun, disini saya mencoban ya dengan menggunakan Google Chrome.. dan semua
tanpa kendala..
 

Nah, pada html 5, cukup kita
menggunakan tag <audio> untuk memutar audio/suara
dan <video> untuk memutar video.
Format dasarnya seperti berikut :
<audio
controls="controls">
  <source src="NamaLagu.mp3" type="audio/mp3" />
</audio>

sedangkan untuk Video :
<video
controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Web Browser tidak mendukung tag Video HTML 5
</video>

Oh iya, didalam HTML 5, Video hanya mengenal 3 jenis format, yaituOgg, MP4,
dan WebM.. jadi pastikan format yang ingin ditampilkan adalah
demikian ya.. nah, pertanyaannya.. bagaimana jika saya hanya mempunyai video
berformat FLV, AVI,

ke format yang didukung HTML5.
dsb?.. tenang aja.. kan banyak tuh Aplikasi Video Converter?.. tinggal di
convert aja

Berikut keterangan Format Video :
- Ogg = File Ogg dengan Video Codec Theora dan Audio Codec Vorbis.
- MPEG4 = file MPEG 4 dengan Video Codec H.264 dan Audio Codec AAC.
- WebM = file WebM dengan Video Codec VP8 dan Audio Codec Vorbis.

Berikut adalah contoh penggunaan dalam html untuk memainkan fitur Audio :
<!DOCTYPE HTML>

<html>
<head>
    <title> HTML 5 </title>
</head>

<body>
<h4> Westlife - My love</h4>
<audio controls="controls">
<source src="westlife - My love.mp3" type="audio/mp3"
/>
</audio>

</body>
</html>

Hasil kode program:


 
 
  
  
Berikut adalah contoh penggunaan
dalam html untuk memainkan Video :
<!DOCTYPE HTML>

<html>
<head>
    <title> menampilkan video dengan HTML 5 </title>
</head>

<body>

<h4> Video Westlife-My love </h4>
<video controls="controls
<source src=" Westlife_My_Love.mp4" type="video/mp4"
/>
</video> 
</body>
</html>

hasil kode program:


 


 
source : www.agussaputra.com

 



Read more: https://rinussarak.webnode.com/products/video-dengan-html-5/
Create your own website for free: https://www.webnode.com

Back