Pada artikel yang terdahulu, kita telah pelajari kaedah melukis imej vektor menggunakan elemen <svg>. Kebolehan melukis imej sebegini terutama menggunakan perisian Adobe Illustrator amat diperlukan dalam industri teknologi maklumat (IT).

Dalam minggu ini, kita akan belajar memasukkan video dari sumber luar ke dalam laman sesawang kita. Penyedia perkhidmatan video Youtube sememangnya terkenal dengan pilihan video yang banyak, perkhidmatan yang pantas, jarang menghadapi masalah serta memiliki kualiti paparan yang tinggi.

Hal ini menjadikan ramai pemilik laman sesawang tidak memuat naik video mereka ke pelayan (server) sendiri, sebaliknya ke Youtube sebelum dirujuk untuk dipaparkan dalam laman sesawang mereka sendiri. Kaedah ini bukan sahaja menjimatkan ruang di dalam pelayan, malah video dari Youtube juga boleh ditonton oleh seberapa ramai pun pengunjung tanpa mengalamai masalah kekangan lebar jalur.

Menggunakan HTML5, anda kini hanya perlu menggunakan elemen <iframe> dengan kod ringkas untuk memaparkan video Youtube di laman sesawang anda. Berbeza dengan HTML yang lama, anda perlu menggunakan objek <embed> dengan kod atur cara yang panjang dan sering kali menimbulkan masalah dengan perisian antivirus serta firewall.

Tanpa membuang masa, mari kita mulakan latihan minggu ini.

LATIHAN

Semakan

Dalam kod atur cara tadi, kita telah memasukkan video Youtube berkenaan pertandingan membina mobile games, Game Jam menggunakan elemen <iframe>. Elemen ini berfungsi ibarat tingkap yang membenarkan cahaya masuk ke rumah.

Menggunakan elemen ini, audio atau video (media) dari sumber luar dipapar di laman sesawang anda dengan mudah.

Sekiranya terdapat sebarang ralat, hanya elemen <iframe> tadi yang akan memaparkan mesej ralat tanpa mengganggu keseluruhan laman.

Fungsi ini membolehkan pengunjung terus melayari laman sesawang anda seperti biasa.

Perkara pertama yang kita lakukan adalah menetapkan saiz paparan video kepada 315 piksel tinggi, kali 560 piksel lebar. Seterusnya, arahan src diguna untuk memasukkan alamat Internet video tadi kepada <iframe>.

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubah suai kod atur cara tadi supaya:

1. Ubah kod supaya video tidak dimainkan secara berulang.

2, Ubah kod supaya video tidak dimainkan secara automatik.

3. Papar video daripada penyedia perkhidmatan lain seperti Vimeo.

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila e-melkan kepada [email protected] dan kami akan cuba jawab sepantas mungkin. 
Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!