HTML5 - Meletak Video Player Anda Sendiri

hai semua... Pada post yang lepas fadz dah bercerita tentang "HTML5 - Canvas"... Kali ini fadz nak bercerita/memberi/mengajar tentan bagaimana hendak meletak video dengan mudah...kod yang saya akan ajarkan ini boleh digunakan dimana-mana jenis website pun dan boleh diletakkan di tempat yang anda suka...


ok... sebelum tu anda perlulah mempunyai website di sites.google.com untuk mengupload video-video anda..

cara untuk membuat website di sites.google.com:-

1. login/signup di google site(sekiranya anda mempunyai account blogger/gmail tidak perlu signup)
   
2. setelah login/signup tekan butan "create"
3. setelah itu...
   -pilih template yang anda suka(tidak perlu cantik sekadar untuk mengupload file)
   -letak nama website anda
   
   -tulis captcha
   -tekan "Create site"
   
4. setelah itu di page anda tekan simbol atau "create page"
5. kemudian letak nama page anda kemudian tekan "create"..(Dinasihati simpan URL diberikan upload file yang seterusnya)
   

Cara upload file/video(boleh ulang step ini sekiranya ingin menambah file):-

1. tekan
2. pilih video mengikut format yang disokong oleh beberapa browser..kemudian tekan "open"
   
   

   (Jadual 1.0)Browser	MP4	WebM	Ogg
   Internet Explorer 9	YES	NO	NO
   Firefox 4.0	NO	YES	YES
   Google Chrome 6	YES	YES	YES
   Apple Safari 5	YES	NO	NO
   Opera 10.6	NO	YES	YES

   
   dinasihati mengupload dua format iaitu mp4 dan webm/ogg
3. copy "download" link
   

setelah itu copy kod dibawah dan letakkan diman saja yang membenarkan code html...[cara.blogger]

<video width="320" height="240" controls>
  <source src="URL1" type="video/mp4" />
  <source src="URL2" type="video/webm" /> 
  <source src="URL3" type="video/ogg" />
  <div class="jikatiada">

    Your browser does not support the video tag.

  </div>
</video>

 tukarkan/buangkan tulisan berwarna:-

• hijau = panjang
• purple = tinggi 
• kuning = boleh dipadam sekiranya tidak mahu controller.
• merah = URL video yang telah diupload(mengikut format yang ada pada "type=")
• oren = kepada perkataan sekiranya format tak di sokong(rujuk kepada jadual)

selepas perkataan "<video " boleh tambah perkataan-perkataan attribute lain seperti loop, outoplay dan poster="" mengikut fungsi tersendiri..:

• loop = akan mengulang video secara outomatik...
• outoplay = akan mainkan video secara outomatik...
• poster="" = dijadikan sebagai thubnail...letakkan url gambar didalam simbol quote...

anda boleh menjadikan seperti ini...:

<video controls loop poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUlj6LLVqywrprJ2FJdEXapaqo2s5AY29L6oTFF1ZqbQ-B5vWxjDA4DHyj_WWKQLPbETF3kR_8Atra03ExK0cckBL2-9Gp8NpGW8AXW56TKixXjf9YoDatGuiKM6o8yWI4ouHWoEv7CU/s1600/first.png" height="300" width="390">
 <source src="https://sites.google.com/site/hantujavascript/javascript-project/videoplayback.ogv" type='video/ogg'/>
 <source src="https://sites.google.com/site/hantujavascript/javascript-project/videoplayback.webm" type='video/webm' >
 <source src="https://sites.google.com/site/hantujavascript/javascript-project/videoplayback.mp4" type='video/mp4'>
 <div>
  Your browser has not support this video tag.
 </div>
</video>

source