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)BrowserMP4WebMOgg
    Internet Explorer 9YESNONO
    Firefox 4.0NOYESYES
    Google Chrome 6YESYESYES
    Apple Safari 5YESNONO
    Opera 10.6NOYESYES

    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="240controls>
  <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...:


source

1 comment:

  1. terima kasih for the info. serius ginius ! :)
    Ali sudah pindah ke blog lain aww... dan sekarang orang dah bising pasal www0w awards. so susah nak challenge. :)

    Jom tengok blog ali di web digi wwwow awards. :)
    klik sini

    ReplyDelete

Newer Post Older Post Home HantuJavascript klikbutton Like Us Follow Us Subscribe Follow News

tak mampu donate click pon boleh