Elemen html untuk memutar video adalah

Atribut HTML Tag <video>

Elemen HTML apa yang benar untuk memutar file video?

kita akan menggunakan element dari html5 untuk dapat memutar file video langsung pada halaman html. adapun element html5 yang akan kita gunakakan untuk membuat pemutar video adalah element <video>.. video>. Jadi tidak mustahil lagi jika kita ingin memutar video pada website dengan html5.

Tag apa yang digunakan untuk menyisipkan audio ke dalam dokumen HTML?

Cara Menambahkan Audio di HTML Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag . Perhatikan! Pada atribut src , kita menulis langsung nama file audio yang akan diputar.

Tag manakah yang dapat digunakan untuk menyisipkan media video kedalam halaman browser?

Cara Menambahkan Video di HTML HTML sekarang punya tag baru untuk membuat media player, yakni tag <video> . Jika tag video di buka pada browser yang tidak mendukungnya, maka teks browser tidak mendukung tag video akan ditampilkan.

Apakah video yang bisa ditambahkan ke HTML?

Jika kamu punya video dengan format yang berbeda dari ketiga format tersebut, maka kamu harus mengubahnya agar bisa ditambahkan ke HTML. Tag punya beberapa atribut yang bisa diberikan: Jika atribut bernilai true, maka ia boleh ditulis namanya saja.

Bagaimana untuk membuat video pada dokumen HTML?

Kita mulai untuk membuat video pada dokumen HTML seperti di bawah ini. Kemudian simpan Script di atas yg sudah di Copy Paste di Notepad. Selanjutnya buat folder kosong terlebih dahulu sebelum di Save.Kemudian Masukkan File HTML yg sudah kalian buat.

Apakah HTML5 video mendukung tag?

Tidak semua browser mendukung tag . Yaa, inilah kekurangan HTML5 video jika dibandingkan dengan video dengan plugin javascript. Browser-browser versi lama, tidak mendukung tag sehingga HTML5 video tidak bisa diterapkan. Untuk lebih detailnya silahkan lihat tabel di bawah ini.

Apa yang digunakan untuk menampilkan video?

HTML5 video adalah istilah yang digunakan untuk menampilkan video dengan menggunakan tag , yang mana merupakan salah satu tag HTML5. Dengan adanya tag , kita bisa menampilkan sebuah video hanya dengan 5 baris kode saja.

Dalam mempromosikan apa yang saya anggap sebagai buku HTML5 terbaik saat ini tersedia di pasaran, Remy Sharp dan Bruce Lawson setuju untuk menyumbangkan sebuah bab mengenai perkenalan HTML5 kepada pembaca kami, yang merinci seluk beluk bekerja dengan video dan audio HTML5.

DAHULU KALA, di galaksi yang terasa begitu jauh, multimedia di Web terbatas pada lagu MIDI dan GIF animasi. Seiring dengan bertambahnya bandwidth dan teknologi kompresipun meningkat, musik MP3 menggantikan MIDI dan video nyata mulai menguat. Semua jenis pemutar media yang mempunyai hak milik saling bersaing - Real Player, Windows Media, dan seterusnya - sampai ada yang muncul sebagai pemenang pada tahun 2005: Adobe Flash, sebagian besar karena ubiquity plugin dan fakta bahwa ia adalah mekanisme pengiriman pilihan Untuk YouTube.

HTML5 menyediakan standar terbuka dan bersaing untuk pengiriman multimedia di Web dengan elemen video dan audio asli dan API. Artikel ini sebagian besar membahas elemen <video>, karena itu lebih seksi, namun sebagian besar markup dan scripting berlaku untuk kedua jenis media.

Multimedia Asli: Mengapa, Apa, dan Bagaimana?

Pada tahun 2007, Anne van Kesteren menulis sesuatu kepada Kelompok Kerja:

"Opera memiliki beberapa eksperimen internal yang dibangun dengan implementasi elemen <video>. Unsur mengekspos API sederhana (untuk saat ini) seperti objek Audio(): play(), jeda(), stop(). Idenya adalah bahwa ia bekerja seperti <object> kecuali bahwa dia memiliki semantik khusus <video> seperti <img> memiliki semantik gambar"

Sementara API mengalami peningkatan dalam kompleksitas, pengumuman asli van Kesteren sekarang diterapkan di semua browser utama, dan selama penulisan buku ini, Microsoft mengumumkan dukungan yang akan datang di Internet Explorer 9.

Pendamping yang jelas untuk elemen <video> adalah elemen <audio> mereka berbagi banyak fitur serupa, jadi di bab ini kita membahasnya bersama dan hanya mencatat perbedaannya.

<video>: Mengapa Anda membutuhkan elemen <video>?

Sebelumnya, jika pengembang ingin menyertakan video dalam halaman web, mereka harus menggunakan elemen <object>, yang merupakan wadah generik untuk "benda asing." Karena inkonsistensi browser, mereka juga akan perlu untuk menggunakan elemen sebelumnya tidak valid <embed> dan meniru banyak parameter. Hal ini mengakibatkan kode terlihat seperti ini:

<object width="425" height="344">
  <param name="movie" value="http://www.youtube.com/Âv/9sEI1AUFJKw&hl=en_GB&fs=1&" />
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <embed src="http://www.youtube.com/ Âv/9sEI1AUFJKw&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
  </embed>
</object>

<embed> akhirnya distandarisasi di HTML5; ia tidak pernah menjadi bagian dari komponen sebelumnya (X) HTML.

Kode ini buruk dan canggung. Lebih parah dari pada itu adalah kenyataan bahwa browser harus menyerahkan videonya ke plugin pihak ketiga; semoga pengguna memiliki versi plugin yang benar (atau memiliki hak untuk mendownload dan menginstalnya, atau pengetahuan tentang bagaimana cara melakukannya); dan kemudian berharap plugin itu bisa diakses oleh keyboard - bersama semua yang tidak diketahui lainnya yang terlibat dalam penerahan konten ke aplikasi pihak ketiga.

Plugin juga bisa menjadi penyebab utama dari instabilitas browser dan dapat membuat kekhawatiran pengguna teknis kurang mahir ketika mereka diminta untuk mendownload dan menginstal versi yang lebih baru.

Kapan pun anda menyertakan plugin di halaman anda, anda menyimpan area gambar tertentu yang browser delegasikan ke plugin. Sejauh menyangkut browser, area plugin tetap menjadi kotak hitam- browser tidak memproses atau menafsirkan apapun yang terjadi di sana.

Biasanya, ini bukanlah sebuah masalah, namun masalah bisa muncul saat tata letak anda tumpang tindih dengan area gambar plugin. Bayangkan, misalnya, situs yang berisi film tapi juga memiliki menu dropdown berbasis JavaScript atau CSS yang perlu terungkap di atas film. Secara default, area gambar plugin berada di bagian atas halaman web, yang berarti bahwa menu ini dengan anehnya akan muncul di belakang film.

Masalah dan kebiasaan juga bisa muncul jika halaman anda memiliki perubahan tata letak yang dinamis. Jika dimensi area gambar plugin diubah ukurannya, terkadang ia memiliki efek yang tak terduga - film yang diputar di plugin mungkin tidak diubah ukurannya, namun hanya dipangkas atau menampilkan spasi ekstra putih. HTML5 menyediakan cara standar untuk memutar video secara langsung di browser, tanpa memerlukan plugin.

Salah satu kelebihan utama elemen video HTML5 adalah bahwa video berisikan penghuni lengkap di Web. Ini tidak lagi dilipat ke daerah pedalaman elemen <object> atau <embed> yang tidak valid.

Jadi sekarang, elemen <video> dapat ditata dengan CSS; mereka dapat diubah ukurannya pada hover misalnya dengan menggunakan transisi CSS. Mereka dapat men-tweak dan ditampilkan kembali ke <canvas> dengan JavaScript. Yang terbaik, hackabilitas bawaan yang disediakan standar web terbuka pun bisa dibuka. Sebelumnya, semua data video anda terkunci; bit anda terjebak dalam kotak. Dengan multimedia HTML5, bit anda bebas untuk dimanipulasi sesuka anda.

Selama titik akhir http adalah streaming sumber daya di web, Anda hanya dapat mengarahkan elemen <video> atau <audio> untuk streaming konten.

Multimedia HTML5 Tidak Baik untuk?

Terlepas dari headline hitam dan putih dari wartawan berteknologi, HTML5 tidak akan "membunuh" semua plugin dalam semalam. Ada kasus penggunaan untuk plugin yang tidak tercakup dalam spesifikasi baru.

Perlindungan salinan adalah salah satu area yang tidak ditangani oleh HTML5 - itu tidak mengejutkan, mengingat standarnya berdasarkan keterbukaan. Jadi orang yang membutuhkan DRM mungkin tidak ingin menggunakan video atau audio HTML5, karena akan mudah diunduh ke hard drive sebagai <img> sekarang. Beberapa browser menawarkan akses menu konteks sederhana ke URL video, atau bahkan untuk menyimpan video. (Tentu saja, anda tidak memerlukan kami untuk menunjukkan bahwa DRM adalah tugas orang bodoh. Yang anda lakukan adalah mengasingkan pengguna jujur ​anda sambal menyebabkan ketidaknyamanan kecil pada pembajak yang berdedikasi.)

Plugin tetap menjadi pilihan terbaik bagi browser untuk mengirimkan video dan audio dari mesin pengguna ke halaman web seperti Daily Mugshot atau Chat Roulette. (Ada elemen <device> yang sangat baru yang secara khusus diperuntukkan untuk HTML "post-5", namun tidak ada dukungan di browser untuk itu.) Setelah bergidik pada kehampaan yang tak terbayangkan bahwa dunia tanpa Chat Roulette akan tergambarkan, pertimbangkan juga masifnya Jumlah konten di luar sana yang akan membutuhkan plugin untuk membuatnya dalam waktu yang relatif lama.

Anatomi Elemen Video

Paling sederhananya, termasuk video pada halaman di HTML5 hanya memerlukan kode ini:

<video src=turkish.ogv></video>

Di sini, ekstensi file .ogv digunakan untuk mengarah ke video Ogg Theora.

Mirip dengan <object>, anda dapat memasukkan markup balik antara tag, untuk menjelajah Web lawas yang tidak mendukung video bawaan. Anda setidaknya harus menyediakan tautan ke video sehingga pengguna dapat mendownloadnya ke hard drive mereka dan menontonnya nanti di media player sistem operasi.

<h2>Video and legacy browser fallback</h2>
<video src=leverage-a-synergy.ogv>
   Download the <a href=leverage-a-synergy.ogv>How to leverage a synergy video</a> 
</video>

Video HTML5 dalam browser modern dan konten fallback di browser lawas.

Namun, contoh ini belum akan benar-benar melakukan apapun. Yang bisa anda lihat di sini adalah bingkai pertama film. Itu karena anda belum memerintahkan video tersebut untuk diputar, dan anda belum memerintahkan browser untuk memberikan kontrol apa pun untuk menjalankan atau menjeda video.

AutoPlay

Anda dapat memberitahu browser untuk memutar video atau audio secara otomatis, namun hampir pasti anda tidak boleh melakukannya, karena banyak pengguna (dan terutama mereka yang menggunakan teknologi bantu, seperti pembaca layar) akan menganggapnya sangat mengganggu. Pengguna di perangkat seluler mungkin tidak ingin anda menggunakan bandwidth mereka tanpa dimintai untuk menggunakan video tersebut secara eksplisit. Namun, begitulah cara anda melakukannya:

<video src=leverage-a-synergy.ogv autoplay> </video>

controls

Menyediakan kontrol sekitar 764 persen lebih baik daripada memutar video secara otomatis. Anda dapat menggunakan beberapa JavaScript sederhana untuk menulis sendiri (lebih banyak lagi nanti) atau anda dapat memberi tahu browser untuk menyediakannya secara otomatis:

<video src=leverage-a-synergy.ogv controls> </video>

Tentu, ini berbeda antara browser, dengan cara yang sama misalnya seperti kontrol bentuk, tapi anda tidak akan menganggapnya terlalu mengejutkan. Ada tombol play / pause toggle, seek bar, dan kontrol volume.

Browser memiliki tingkat aksesibilitas keyboard yang berbeda. Kontrol asli Firefox tidak akan muncul saat JavaScript dinonaktifkan (menu kontekstual memungkinkan pengguna untuk mengentikan dan memutar film, namun ada masalah kemampuan penemuan, dan tampaknya tidak mungkin memilih opsi ini tanpa JS.) Kontrol asli Opera yang dapat diakses selalu hadir saat JavaScript dinonaktifkan, terlepas dari apakah atribut kontrol dispesifikasikan.

Chrome dan Safari memiliki masalah dengan aksesibilitas keyboard. Kami mengantisipasi peningkatan akses keyboard karena produsen mengatasi masalah gigi.

Perhatikan bahwa kontrol ini muncul saat pengguna melayang di atas video atau saat dia melihat video tersebut. Mungkin juga melihat melalui kontrol yang berbeda. Aksesibilitas keyboard asli ini sudah merupakan penyempurnaan plugin, yang sulit dilihat dari konten HTML di sekitarnya.

Jika elemen <audio> memiliki atribut kontrol, anda akan melihatnya di halaman. Tanpa atribut, tidak ada yang diberikan secara visual pada halaman sama sekali, namun, tentu saja, ada di DOM dan dapat dikontrol sepenuhnya melalui JavaScript dan API yang baru.

poster

Atribut poster menunjukkan gambar yang akan digunakan oleh browser saat video diunduh, atau sampai pengguna memutar video. (Atribut ini tidak berlaku untuk <audio>.) Atribut poster menghilangkan kebutuhan akan trik tambahan seperti menampilkan gambar dan kemudian menghapusnya melalui JavaScript saat video dimulai.

Jika anda tidak menggunakan atribut poster, browser akan menampilkan frame film pertama, yang mungkin bukan gambar representatif yang ingin anda tampilkan.

tinggi, lebar

Atribut-atribut ini menunjukkan browser ukuran piksel video. (Mereka tidak berlaku untuk <audio>.) Jika Anda membiarkannya keluar, browser akan menggunakan lebar intrinsik sumber video, jika tersedia. Jika tidak, ia cari lebar intrinsik dari frame poster, jika itu tersedia. kalau tidak, 300 piksel.

Jika anda menentukan satu nilai, namun tidak yang lain, browser akan menyesuaikan ukuran dimensi yang tidak dikhususkan untuk mempertahankan rasio aspek video.

<video src=leverage-a-synergy.ogv autoplay> </video>

Jika anda menetapkan lebar dan tinggi ke rasio aspek yang tidak sesuai dengan video, video tidak direntangkan ke dimensi tersebut namun diberi "kotak huruf" di dalam elemen video dari ukuran yang ditentukan saat mempertahankan aspek rasio.

loop

Atribut loop adalah atribut Boolean lainnya. Seperti yang anda bayangkan, attribute ini memutar pemutaran media.

preload

Mungkin anda cukup yakin bahwa pengguna ingin mengaktifkan media (misalnya dia gali ke sana dari beberapa navigasi atau satu-satunya alasan untuk berada di halaman), namun anda tidak ingin menggunakan autoplay. Jika demikian, anda dapat menyarankan agar browser memuat video terlebih dahulu sehingga ia mulai melakukan buffering saat halaman memuat dengan harapan pengguna akan mengaktifkan kontrol.

<video src=leverage-a-synergy.ogv controls preload> </video>

Ada tiga keadaan preload yang didefinisikan secara spesifik. Jika anda hanya mengatakan preload, agen pengguna dapat memutuskan apa yang harus dilakukan. Misalnya, Browser mobile mungkin default untuk tidak melakukan preloading sampai diberitahu untuk melakukannya oleh pengguna secara eksplisit.

1. preload=auto (or just preload)

Sebuah saran ke browser bahwa ia seharusnya mulai mendownload keseluruhan file. Perhatikan bahwa kita mengatakan "saran." Browser mungkin mengabaikan hal ini-mungkin karena mendeteksi koneksi yang sangat lambat atau pengaturan di browser mobile "Jangan sekali-kali memuatkan media" untuk menghemat bandwidth pengguna.

2. preload=none

Keadaan ini mengacukan kepada browser agar tidak memuat sumber daya terlebih dulu sampai pengguna mengaktifkan kontrol.

3. preload=meta

Keadaan ini mengacukan kepada browser bahwa ia harus prefetch metadata (dimensi, frame pertama, daftar lagu, durasi, dan sebagainya) tapi ia tidak boleh mendownload apapun lebih jauh sampai pengguna mengaktifkan kontrol.

src

Seperti pada <img>, atribut ini mengarahkan ke file yang akan ditampilkan. Namun, karena tidak semua browser bisa memainkan format yang sama, di wilayah produksi, anda perlu memiliki lebih dari satu file sumber. Kami akan membahasnya di bagian selanjutnya. Menggunakan satu file sumber dengan atribut src hanya benar-benar berguna untuk prototyping cepat atau untuk situs internet di mana anda mengenal browser pengguna dan codec yang didukungnya.

Codec-horor, horor

Draf awal dari spesifikasi HTML5 mengamanatkan bahwa semua browser setidaknya memiliki dukungan yang terpasang tetap untuk multimedia dalam dua codec: Ogg Vorbis untuk audio dan Ogg Theora untuk film. Vorbis adalah codec yang digunakan oleh layanan seperti Spotify, dan untuk sampel audio dalam game seperti Microsoft Halo, ia sering digunakan dengan Theora untuk video dan digabungkan bersama dalam format Ogg.

Namun, codec ini dikeluarkan dari spesifikasi HTML5 setelah Apple dan Nokia berkeberatan, jadi spesifikasi tersebut tidak membuat rekomendasi tentang codec sama sekali. Hal ini membuat kita berada dalam situasi yang terfragmentasi. Opera dan Firefox mendukung Theora dan Vorbis. Safari tidak, ia lebih memilih untuk memberikan dukungan asli untuk codec video H.264 dan audio MP3. Microsoft telah mengumumkan bahwa IE9 juga akan mendukung H.264, yang juga didukung di iPhone dan Android. Google Chrome mendukung Theora dan video H.264, serta Vorbis dan audio MP3. Bingung?

Saat kami menyelesaikan buku ini, Google mengumumkan bahwa codec ini adalah open-source codec video yang disebut VP8. Ia adalah codec yang sangat berkualitas, dan bila dikombinasikan dengan Vorbis dalam format wadah berdasarkan format Matroska, secara kolektif dikenal sebagai "webM".

Opera, Firefox dan Chrome telah mengumumkan akan mendukungnya. IE9 turut mendukung jika codec terinstal secara terpisah. VP8 akan disertakan dalam Adobe Flash Player dan setiap video YouTube akan ada dalam format webM.

Sama halnya dengan Theora, webM adalah codec bebas royalti. Dalam bab ini, anda dapat mengganti contoh .ogv dengan .webm untuk video berkualitas tinggi, setelah dukungan browser ada di sana.

Berhenti menekan: Bug iPad: Sejak akan menekan, kami telah diberi tahu tentang bug yang mempengaruhi beberapa iPads bermakna mereka hanya dapat membaca elemen <source> yang pertama. Oleh karena itu versi mp4 anda harus hadir sebelum versi bebas royalti anda ada dalam urutan sumbernya.

Aturannya adalah: sediakan bebas royalti (webM atau Theora) dan

H.264 video di halaman anda, dan kedua Vorbis dan audio MP3 sehingga tidak ada yang terkunci dari konten anda. Jangan mengulangi kesalahan yang sama "Terlihat Terbaik di Netscape Navigator" ditandai dengan lencana di situs web.

Beberapa elemen <source>

Untuk melakukan ini, anda perlu mengkodekan multimedia anda dua kali: sekali sebagai Theora dan sekali H.264 dalam kasus video, dan di kedua Vorbis dan MP3 untuk audio.

Kemudian, anda hubungkan versi file yang terpisah ini ke elemen media. Alih-alih menggunakan atribut src tunggal, anda kumpulkan elemen <source> terpisah untuk setiap pengkodean dengan atribut jenis yang sesuai di dalam elemen <audio> atau <video> dan biarkan browser mendownload format yang dapat ditampilkannya.

Perhatikan bahwa dalam kasus ini, kami tidak menyediakan atribut src di elemen media itu sendiri:

<video controls>
    <source src=leverage-a-synergy.ogv type=’video/ogg; codecs="theora, vorbis"'>
    <source src=leverage-a-synergy.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40">
 <p>Your browser doesn’t support video.
 Please download the video in <a href=leverage-a-synergy.ogv>Ogg</a> or <a href=leverage-a-synergy.mp4>mp4</a> format.</p>
</video>

Baris 1 memberitahu browser bahwa sebuah video akan dimasukkan dan memberikan dia kontrol default.

Baris 2 menawarkan video Ogg Theora dan menggunakan atribut tipe untuk memberi tahu browser jenis format kontainer apa yang digunakan (dengan memberi jenis file MIME) dan codec apa yang digunakan untuk pengkodean video dan aliran audio. Kami juga bisa menawarkan video WebM di sini sebagai pilihan bebas royalty dengan kualitas tinggi. Perhatikan bahwa kami menggunakan tanda kutip di sekitar parameter ini. Jika anda kehilangan atribut tipe, browser akan mendownload secara perlahan dari setiap file sebelum mengetahui bahwa itu tidak sesuai, yang menghabiskan bandwidth dan dapat menunda media bekerja.

Konten antara tag adalah konten fallback diperuntukkan hanya untuk browser yang tidak mendukung elemen <video> sama sekali. Browser yang mengenal video HTML5 namun tidak dapat memainkan format yang akan ditunjukkan oleh kode anda tidak akan menampilkan konten "fallback" di antara tag. Hal ini mengacaukan saya di bagian bawah beberapa kali. Sayangnya, tidak ada rekaman video dari itu.

Baris 3 menawarkan video H.264. String codec untuk H.264 dan AAC lebih rumit daripada Ogg karena ada beberapa profil untuk H.264 dan AAC. Profil yang lebih tinggi membutuhkan lebih banyak CPU untuk didekode, namun lebih baik dikompres dan ambil sedikit bandwidth.

Di dalam elemen <video> terdapat pesan fallback kami, termasuk tautan ke kedua format untuk browser yang sebanarnya tidak dapat menangani jenis video apa pun namun mungkin berada di atas sistem operasi yang dapat menangani salah satu format, sehingga pengguna dapat mendownload File dan tonton di media player di luar browser.

Oke, jadi itu video HTML5 asli untuk semua pengguna browser modern. Bagaimana dengan pengguna browser lawas - termasuk Internet Explorer 8 dan lebih tua?

Video untuk Browser Lawas

Browser lama tidak dapat memutar video atau audio asli, berkatilah mereka. Tetapi jika anda siap untuk mengandalkan plugin, anda dapat memastikan bahwa pengguna browser lama masih dapat meninjau konten anda dengan cara yang tidak lebih buruk dari yang mereka dapat lakukan saat ini.

Ingat bahwa isi elemen <video> dapat berisi markup, seperti teks dan tautan di contoh sebelumnya? Karena tipe file MP4 juga bisa dimainkan oleh plugin Flash player, anda bisa menggunakan film MP4 dalam kombinasi sebagai fallback untuk Internet Explorer 8 dan versi browser lainnya yang lebih lawas.

Kode untuk ini sama seramnya seperti yang anda harapkan untuk hack peralihan, namun ia bekerja di mana saja Flash Player terinstal- yang hampir ada di mana-mana. Anda bisa melihat teknik bagus ini dalam sebuah artikel berjudul "Video for Everybody!" Oleh penemunya, Kroc Camen.

Sebagai alternatif, anda bisa meng-host konten fallback di situs video hosting dan menyematkan tautan ke antara tag elemen video:

<video controls>
   <source src=leverage-a-synergy.ogv type=’video/ogg; codecs="theora, vorbis"’>
   <source src=leverage-a-synergy.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’> 
   <embed src="http://www.youtube.com/v/cmtcc94Tv3A&hl=en_GB&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
</video>

Anda dapat menggunakan html5media library untuk membajak elemen <video> dan menambahkan fallback yang diperlukan secara otomatis dengan menambahkan satu baris JavaScript di kepala halaman anda.

Mengkodekan Video dan Audio bebas royalty

Idealnya, anda harus memulai konversi dari format sumber itu sendiri, daripada mengkompres ulang versi yang sudah dikompres. Kompresi ganda dapat secara serius mengurangi kualitas hasil akhir.

Di sisi audio, Audacity perangkat lunak pengeditan audio open source memiliki dukungan untuk ekspor Ogg Vorbis. Untuk konversi video, ada beberapa pilihan bagus. Untuk WebM, hanya ada beberapa pembuat enkode saat ini, tidak mengejutkan untuk codec baru semacam itu. Lihat www.webmproject.org/tools/ untuk daftar yang berkembang.

Evom aplikasi gratis ini dapat membuat Ogg Theora di Mac melalui interface grafis yang bagus. Pengguna Windows dan Mac dapat mendownload Miro Video Converter, memungkinkan anda menyeret file ke dalam jendela untuk konversi ke Theora atau H.264 yang dioptimalkan untuk berbagai perangkat seperti iPhone, Android Nexus One, PS2, dan sebagainya.

VLC gratis dapat mengkonversi file ke Ogg di Windows atau Linux. OggConvert adalah utilitas yang berguna bagi pengguna Linux.

Sebagai alternatif, ekstensi Firefox Firefogg dan situs terkait menyediakan konversi berbasis web yang mudah. TinyOgg mengkonversi Flash video ke Ogg untuk mendownload, dan bahkan bisa memasukan URL YouTube.

Proses konversi juga bisa otomatis dan ditangani sisi server. Misalnya di lingkungan CMS, anda mungkin tidak bisa mengendalikan format di mana penulis mengunggah file mereka, jadi anda mungkin ingin melakukan kompresi di ujung server. ffmpeg library open-source dapat dipasang di server untuk membawa konversi industri-kekuatan dari file yang  terupload (mungkin anda memulai menjalankan mesin pembunuh YouTube anda sendiri?)

Jika Anda khawatir mengenai ruang penyimpanan dan anda dengan senang hati ingin berbagi file media (audio dan video) di bawah salah satu dari berbagai lisensi CC, lihatlah Arsip Internet yang akan mengonversi dan menghostingnya untuk anda. Buat saja kata sandi dan unggah, lalu gunakan elemen <video> di halaman anda, namun tautkan ke file sumber di server mereka.

Mengirimkan Video yang Dikompres secara berbeda ke Perangkat Genggam

File video cenderung besar, dan mengirim video berkualitas tinggi bisa boros jika dikirim ke perangkat genggam dimana ukuran layar kecil membuat kualitas tinggi tidak perlu. Tidak ada gunanya mengirim video ketentuan tinggi yang dimaksudkan untuk monitor layar lebar ke layar perangkat genggam. Mengompresi video ke ukuran yang sesuai untuk layar kecil dapat menghemat banyak bandwidth, yang paling penting, membuat server anda dan pengguna ponsel anda senang.

HTML5 memungkinkan anda menggunakan atribut media pada elemen sumber, yang menanyakan browser untuk mengetahui ukuran layar (atau jumlah warna, rasio aspek, dan sebagainya) dan mengirim file berbeda yang dioptimalkan untuk ukuran layar yang berbeda.

Kami menggunakan min-device-with daripada min-width untuk memenuhi perangkat yang memiliki viewport ke konten- yaitu setiap browser smartphone berfitur lengkap, karena iai memberi kita lebar tampilan viewport.

Fungsi dan sintaks ini dipinjam dari spesifikasi Permintaan Media CSS namun ia merupakan bagian dari markup, karena kami mengalihkan file sumber yang bergantung pada karakteristik perangkat. Dalam contoh berikut, browser "ditanya" jika memiliki min-device-width sebesar 800px-, apakah layarnya lebar? Jika ya, ia akan menerima hi-res.ogv; jika tidak, itu adalah dikirim lo-res.ogv:

<video controls> 
   <source src=hi-res.ogv ... media="(min-device-width: 800px)"> 
   <source src=lo-res.ogv>
</video>

Perhatikan juga bahwa anda tetap harus menggunakan atribut tipe dengan parameter codec dan konten fallback yang telah dibahas sebelumnya. Kami baru saja menghilangkannya untuk kejelasan.

Kontrol Kustom bergulir

Salah satu aspek yang benar-benar menarik dari elemen media adalah JavaScript API dan oleh karena itu elemen audio dan video ini sangatlah mudah. API untuk audio dan video turun dari API media yang sama, sehingga hampir sama. Satu-satunya perbedaan dalam elemen ini yakni elemen video memiliki atribut tinggi dan lebar dan atribut poster. Perihal, metode, dan semua atribut lainnya sama. Dengan pemikiran tersebut, kami akan tetap menggunakan elemen media yang lebih seksi: elemen <video> untuk diskusi JavaScript kami.

Seperti yang anda lihat di awal bab ini, Anne van Kesteren berbicara tentang API terbaru dan bahwa kita memiliki metode sederhana baru seperti play(), pause() (tidak ada metode berhenti: cukup jeda dan dan pindah ke awal) Load(), dan canPlayType(). Sebenarnya, itu semua metode pada elemen media. Segala sesuatu yang lain adalah perihal dan atribut.

Dengan menggunakan JavaScript dan API media baru, anda dapat membuat dan mengelola kontrol pemutar video anda sendiri. Dalam contoh kami, kami memandu anda melalui beberapa cara untuk mengendalikan elemen video dan membuat sekumpulan kontrol sederhana. Contoh kami tidak akan mengejutkan anda -ini hampir sama seksinya dengan elemen video itu sendiri (dan sedikit dibikin!) - tapi  Anda akan mendapatkan ide bagus tentang apa yang mungkin dilakukan melalui scripting. Bit terbaik adalah UI akan menjadi CSS dan HTML. Jadi jika anda ingin menatanya dengan cara anda sendiri, itu sungguh mudah hanya dengan sedikit pengetahuan standar web - tidak perlu mengedit pemutar Flash eksternal atau sejenisnya.

Kontrol pemutar video dasar dari kami akan memiliki tombol jalankan / jeda untuk beralih dan memungkinkan pengguna melewatkann sepanjang garis waktu video untuk melompat ke bagian tertentu.

Titik awal kami akan menjadi video dengan kontrol asli yang diaktifkan. Kami kemudian akan menggunakan JavaScript untuk mengupload kontrol asli dan menambahkannya sendiri, sehingga jika JavaScript dinonaktifkan, pengguna masih memiliki cara untuk mengontrol video sesuai keinginan:

<video controls> 
   <source src="leverage-a-synergy.ogv" type="video/ogg" /> 
   <source src="leverage-a-synergy.mp4" type="video/mp4" /> 
   Your browser doesn’t support video. Please download the video in 
   <a href="leverage-a-synergy.ogv">Ogg</a> or <a href="leverage-a-synergy.mp4">MP4</a> format.
</video> 

<script> 
  var video = document.getElementsByTagName('video’)[0]; 
  video.removeAttribute('controls’); 
</script>

Putar, jeda, dan toggling playback

Selanjutnya, kami ingin dapat memutar dan menjeda video dari kontrol khusus. Kami telah memasukkan elemen tombol yang akan kami kaitkan dengan pawang klik guna menjalankan fungsi play/pause. Sepanjang contoh kode saya, ketika saya merujuk ke variabel putar, ia akan mengacu pada elemen tombol:

<button class="play" title="play">& #x25BA;</button>

Kami menggunakan & #25BA, yang merupakan entitas XML geometris yang terlihat seperti tombol putar. Setelah tombol diklik, kita akan memulai video dan mengganti nilainya menjadi dua pipa dengan menggunakan & #x2590, yang terlihat (sedikit) seperti jeda.

Untuk kesederhanaan, saya menyertakan elemen tombol sebagai markup, namun saat kami semakin meningkatkan kontrol video kami, semua elemen tambahan ini (untuk putar, jeda, lewatkan, dan sebagainya) harus dibuat oleh JavaScript.

Pada play/pause toggle kita memiliki sejumlah hal yang harus dilakukan:

• Jika video saat ini dijeda, mulai memutar, atau jika video telah selesai, maka kita perlu mengatur ulang waktu saat ini menjadi 0, yaitu memindahkan playhead kembali ke awal video.
• Ubah nilai tombol toggle untuk menunjukkan bahwa pada saat pengguna mengkliknya, ia akan beralih dari jeda untuk diputar atau diputar untuk dijeda.
• Akhirnya, kami memutar (atau menjeda) video tersebut:

if (video.paused || video.ended) {
   if (video.ended) {
      video.currentTime = 0;
}
   this.innerHTML = ' ’; // & #x2590 & #x2590 doesn’t need escaping here
   this.title = 'pause’;
   video.play(); 
} else {
   this.innerHTML = ' ’; // & #x25BA
   this.title = 'play’;
   video.pause(); 
}

Masalah dengan logika ini adalah kita mengandalkan sepenuhnya pada skrip kita sendiri untuk menentukan keadaan tombol play/pause. Bagaimana jika pengguna dapat menjeda atau memutar video melalui kontrol elemen video asli (beberapa browser mengizinkan pengguna mengeklik kanan dan memilih untuk memutar dan menjeda video)? Selain itu, saat video hampir berakhir, tombol play/pause akan tetap menampilkan ikon jeda. Pada akhirnya kita membutuhkan kontrol kita untuk selalu berhubungan dengan keadaan video.

Elemen Media yang Berhubungan

Elemen media memicu berbagai perihal: saat pemutaran dimulai, saat video selesai dimuat, jika volume suara telah berubah, dan seterusnya. Jadi, kembali ke tombol putar / jeda berdasarkan kesuaian kami, kami strip bagian dari naskah yang berhubungan dengan mengubah label terlihat:

if (video.ended) {
   video.currentTime = 0; 
} 
if (video.paused) {
   video.play(); 
} else {
   video.pause(); 
} // which could be written as: video[video.paused ? 'play’ : 'pause’]();

Dalam contoh ini, kita akan menggunakan addEventListener DOM level 2 API, bukan attachEvent, yang dikhususkan untuk Internet Explorer sampai versi 8. IE9 yang akan datang akan mendukung video, tapi untungnya ia juga mendukung addEventListener standar, jadi kode kita akan Bekerja di sana juga

Dalam kode yang disederhanakan, jika video telah berakhir, kami akan atur ulang, lalu beralih pemutarannya berdasarkan keadaan saat ini. Label pada kontrol itu sendiri diperbarui dengan fungsi terpisah (anonim) yang telah kami kecondongan langsung ke penangan perihal di elemen video kami:

video.addEventListener('play’, function () { 
   play.title = 'pause’; 
   play.innerHTML = ' ’;
}, false);

video.addEventListener('pause’, function () { 
   play.title = 'play’; 
   play.innerHTML = ' ’;
}, false); 

video.addEventListener('ended’, function () { 
   this.pause(); 
}, false);

Sekarang setiap kali video diputar, dijeda, atau telah mencapai akhir, fungsi yang terkait dengan perihal yang relevan dilepaskan, memastikan bahwa kontrol kami menunjukkan label yang tepat.

Setelah kami menangani pemutaran dan perjedahan, kami ingin menunjukkan kepada pengguna berapa banyak video yang telah diunduh dan oleh karena itu seberapa banyak yang dapat dimainkan. Ini berkaitan dengan jumlah video buffer yang tersedia. Kami juga ingin merespon terhadap perihal yang mengatakan berapa banyak video yang telah diputar, jadi kami dapat memindahkan panel geser visual kami ke lokasi yang sesuai untuk menunjukkan sejauh mana video kami. Akhirnya, dan yang terpenting, kita perlu menangkapi perihal yang mengatakan bahwa video tersebut siap dimainkan, yaitu data video yang cukup untuk segera ditonton.

Monitoring kemajuan download

Elemen media memiliki perihal "kemajuan", yang dilepas begitu media telah diambil namun berpotensi sebelum media diproses. Saat perihal ini dilepas, kita bisa membaca video. Objek yang mudah dicari, yang memiliki metode panjang, start(), dan end(). Kita bisa mengupdate bar pencarian kita dengan menggunakan kode berikut (dimana variabel buffer adalah elemen yang menunjukkan berapa banyak video yang dapat kita cari dan yang telah didownload):

video.addEventListener('progress’, updateSeekable, false);
function updateSeekable() {
   var endVal = this.seekable && this.seekable.length ? this.seekable.end() : 0;
   buffer.style.width = (100 / (this.duration || 1) * endVal) + '%’; 
}

Kode tersebut berikatan dengan perihal kemajuan, dan saat pemutaran, video akan mendapat persentase yang dapat diputar ulang dibandingkan dengan durasi video. Perhatikan bahwa kata kunci ini mengacu pada elemen video, karena itulah konteks fungsi updateSeekable yang akan dijalankan, dan atribut durasi adalah panjang media dalam hitungan detik.

Namun, terkadang ada masalah halus di Firefox tepatnya di elemen videonya yang menyebabkan nilai video.seekable.end() tidak sama dengan durasi. Atau lebih pastinya, setelah media diunduh dan diproses sepenuhnya, durasi akhir tidak sesuai dengan nilai video.seekable.end(). Untuk mengatasi masalah ini, kita juga dapat mendengarkan perihal durationchange menggunakan fitur updateSeekable yang sama. Dengan cara ini, jika durasi tidak berubah setelah proses terakhir dari pemutaran, perihal durationchange dijalankan dan elemen penyangga kami akan memiliki lebar yang benar:

video.addEventListener('durationchange’, updateSeekable, false); 
video.addEventListener('progress’, updateSeekable, false); 
function updateSeekable() {
   buffer.style.width = (100 / (this.duration || 1) *
   (this.seekable && this.seekable.length ? this.seekable.end() : 0)) + '%’; 
}

Saat File Media Siap Diputar

Saat browser anda pertama kali menemukan elemen video (atau audio) pada halaman, file media belum siap dimainkan dulu. Browser perlu mendownload dan kemudian memecahkan kode video (atau audio) sehingga bisa dimainkan. Setelah itu selesai, elemen media akan menjalankan perihal canplay. Biasanya, inilah saatnya anda menginisialisasi kontrol anda dan menghapus indikator "pemuatan". Jadi kode kita untuk menginisialisasi kontrol biasanya akan terlihat seperti ini:

video.addEventListener('canplay’, initialiseControls, false);

Tidak ada yang sangat menarik di sana. Kontrol inisialisasi memungkinkan tombol aktivasi play/pause dan me-reset playhead di seekbar.

Perihal yang harus dilakukan dengan pelepasan muatan dalam urutan berikut: loadstart, durationchange, loadeddata, progress, canplay, canplaythrough.

Namun, terkadang perihal ini tidak akan langsung bekerja (atau setidaknya ketika anda mengharapkan untuk bekerja). Kadang-kadang video menunda men-download karena browser sedang mencoba untuk menyimpan terlalu banyak download untuk anda. Itu bisa membuat anda sakit kepala jika anda mengharapkan canplay bekerja, yang tidak akan berkerja kecuali anda memberikan elemen media yang sedikit memaksa. Jadi, bukannya, kita sudah mulai mendengarkan perihal loadeddata. Hal ini mengungkapkan bahwa ada beberapa data yang telah dimuat, meskipun tidak semua data. Itu berarti bahwa metadata tersedia (tinggi, lebar, durasi, dan sebagainya) dan beberapa konten media- namun tidak semuanya. Dengan memungkinkan pengguna untuk mulai memutar video pada titik di mana loadeddata telah bekerja, ia memaksa browser seperti Firefox untuk keluar dari daerah yang ditangguhkan guna men-download seluruh isi media, memungkinkan ia untuk memutar semua video. Jadi, sebenarnya, titik yang benar dalam siklus perihal ini yang memungkinkan gangguan penggunna adalah loadeddata:

video.addEventListener('loadeddata’, initialiseControls, false);

Preloading Metadata

Sebuah penambahan akhir-akhir ini untuk elemen media adalah atribut preload (begitu baru sehingga itu tidak didukung dalam browser sekarang). Hal ini memungkinkan pengembang untuk memberitahu browser untuk men-download informasi header tentang elemen media, yang akan mencakup metadata. Jika dukungan untuk atribut ini tidak membuat jalan ke browser, maka bisa dipastikan kita harus mendengarkan perihal loadedmetadata berulang kali jika anda ingin menginisialisasi durasi dan slider kontrol media.

Fast forward, Slow Motion, dan Mundur

spec menyediakan atribut, playbackRate. Secara default, playbackRate yang diasumsikan adalah 1, yang berarti pemutaran normal pada kecepatan intrinsik dari file media. Meningkatkan atribut ini berarti mempercepat pemutaran; menurunkannya berarti memperlambatnya. Nilai negatif menunjukkan bahwa video akan jalan di sebaliknya.

Belum semua browser mendukung playbackRate (hanya browser berdasarkan WebKit-mendukung itu sekarang), jadi jika anda perlu untuk mendukung maju cepat dan mundur, anda dapat hack sekitarnya dengan pemrograman mengubah currentTime:

function speedup(video, direction) {
   if (direction == undefined) direction = 1; // or -1 for reverse
   if (video.playbackRate != undefined) { 
      video.playbackRate = direction == 1 ? 2 : -2; 
   } else { // do it manually
      video.setAttribute('data-playbackRate’, setInterval ((function playbackRate () { 
         video.currentTime += direction; 
         return playbackRate; // allows us to run the function once and setInterval
      })(), 500)); 
   } 
}

function playnormal(video) { 
   if (video.playbackRate != undefined) { 
      video.playbackRate = 1; 
   } else { // do it manually clearInterval(video.getAttribute('data-playbackRate’)); } 
}

Seperti yang anda lihat dari contoh sebelumnya, jika playbackRate terdukung, anda dapat mengatur angka positif dan negatif untuk mengendalikan arah pemutaran. Selain bisa melakukan mundur dan maju cepat dengan menggunakan playbackRate, anda juga dapat menggunakan sebuah fraksi untuk memutar media kembali dalam gerakan lambat menggunakan video.playbackRate = 0,5, yang berjalan di setengah tingkat normal.

Aksesibilitas Multimedia

Kami telah berbicara mengenai aksesibilitas keyboard elemen video, tapi bagaimana tentang transkrip, keterangan untuk multimedia? Setelah semua, tidak ada atribut alt untuk video atau audio sebaimana yang terdapat untuk <img>. Konten fallback antara tag hanya dimaksudkan untuk browser yang tidak dapat mengatur video asli; bukan untuk orang-orang yang browsernya dapat menampilkan media, namun tidak dapat melihat atau mendengarnya karena cacat atau situasi (misalnya, di lingkungan yang bising atau kebutuhan untuk menghemat bandwidth).

Teori aksesibilitas HTML5 multimedia ini sangatlah baik. Penulis asli harus membuat file subtitle dan meletakkannya di Ogg kontainer atau file MP4 bersama dengan file multimedia, dan browser akan menawarkan interface pengguna dimana pengguna dapat memperoleh keterangan atau sub judul. Bahkan jika video tersebut “melekat" pada 1000 situs yang berbeda (hanya dengan menggunakan URL eksternal sebagai sumber video / elemen audio), situs tersebut mendapatkan informasi subtitling secara gratis, jadi kami mendapakan aksesibilitas “tulis sekali, baca di mana-mana"

Itu merupakan teori. Dalam prakteknya, tidak ada yang tahu bagaimana melakukannya; spec umumnya diam, browser tidak melakukan apa-apa. Hal demikian mulai berubah; pada saat tulisan ini (Mei 2010), WHATWG telah menambahkan elemen baru <track> dengan spesifikasi, yang memungkinkan penambahan berbagai macam informasi seperti subtitel, teks, deskripsi, judul bab, dan metadata.

WHATWG adalah penentuan format teks timed baru yang disebut WebSRT untuk informasinya, yang merupakan salah satu alasan bahwa unsur-29 bayangan ini tidak termasuk dalam versi W3C spec. Format <track> elemen adalah:

<track kind=captions src=captions.srt

Tapi apa yang dapat anda lakukan sekarang? Tidak ada satu pendekatan yang benar untuk masalah ini, tapi di sini kami akan menyajikan salah satu kemungkinan solusi sementara (albeit hacky).

Bruce menciptakan sebuah bukti dari konsep yang menampilkan garis individu transkrip, yang telah dicap waktu menggunakan data-* atribut HTML5 baru:

<article class=transcript lang=en> 
   <p><span data-begin=3 data-end=5>Hello, good evening and welcome.</span> 
   <span data-begin=7.35 data-end=9.25>Let’s welcome Mr Last Week, singing his poptabulous hit &ldquot;If I could turn back time!&rdquot;</span> 
   </p> 
   ... 
</article>

JavaScript digunakan untuk menyembunyikan transkrip <article>, menghubungkan ke perihal timeupdate video API, dan overlay membentang sebagai teks biasa (karenanya stylable dengan CSS) lebih (atau di samping) elemen video, tergantung pada waktu saat pemutaran video dan cap waktu di rentang individu. Lihat aksinya disini.

BBC memiliki percobaan serupa yang mengambil sub judul dari file JavaScript eksternal, yang lebih dekat dengan visi HTML5, tetapi ia tidak memiliki efek samping yang memungkinkan mesin pencari untuk mengindeks isi transkrip.

Silvia Pfeiffer, seorang kontraktor untuk Mozilla, memiliki beberapa demo pintar menggunakan video HTML5 dan beberapa ekstensi tambahan (yang bukan bagian dari spec).

The data-* Atribut (Data Atribut Khusus)

HTML5 memungkinkan atribut kustom pada setiap elemen. Hal ini dapat digunakan untuk menyampaikan informasi ke script lokal.

Sebelumnya, untuk menyimpan data kustom di markup anda, penulis akan melakukan sesuatu yang mengganggu seperti kelas penggunaan: <input class = "perisai pesawat ruang angkasa -5 kehidupan-3 energi-75">. Lalu, script anda akan perlu membuang waktu untuk meraih nama-nama kelas ini, seperti shields-5, membagi mereka di pembatas (tanda hubung dalam contoh ini) untuk mengekstrak nilai. Dalam bukunya, PPK di JavaScript (New Riders, ISBN 0321423305), Peter Paul Koch menjelaskan bagaimana melakukannya dan mengapa ia memilih untuk menggunakan atribut khusus di beberapa halaman HTML4, membuat JavaScript lebih ramping dan lebih mudah untuk ditulis, tetapi juga membuat halaman secara teknis tidak valid. Karena itu jauh lebih mudah untuk menggunakan data-shields=5 guna melewati pasangan nama / nilai untuk script, HTML5 melegitimasi dan menstandarisasi atribut khusus memanglah berguna, praktek dunia nyata.

Kami menggunakan data-begin dan data-end; mereka bisa saja sesah data-start dan data-finish, atau (dalam genre yang berbeda dari video) data-ooh-matron dan data-slapandtickle. Seperti memilih nama kelas atau id, anda harus memilih nama yang sesuai dengan semantik.

Atribut data khusus hanya dimaksudkan untuk memberikan informasi kepada script situs sendiri, yang tidak ada atribut atau elemen yang lebih tepat.

spec mengatakan “Atribut-atribut ini tidak dimaksudkan untuk digunakan oleh perangkat lunak yang independen dari situs yang menggunakan atribut" dan oleh karena itu tidak dimaksudkan untuk menyampaikan informasi kepada crawler atau parser pihak ketiga. Itu merupakan pekerjaan Microformats, microdata, atau RDFa

Ketika data-* atribut sepenuhnya terdukung dalam browser, JavaScript dapat mengakses properti dengan menggunakan element.dataset.foo (di mana data atribut-foo mengandung nilai). Dukungan dapat ditiru menggunakan JavaScript dengan memperluas objek HtmlElement, yang biasanya tidak mungkin ada dalam rilis IE9 alpha dan di bawah, yang dapat anda lihat disini. Jika tidak, script dapat mengakses nilai-nilai melalui metode get/setAttribute. Keuntungan dari properti dataset melebihi setAttribute adalah bahwa hal itu bisa dihitung, tetapi juga, ketika sepenuhnya diimplementasikan dalam browser, pengaturan atribut dataset secara otomatis akan mengatur atribut konten pada elemen yang memberikan anda sintaks singkatan untuk menetapkan data kustom.

Untuk informasi lebih lanjut, lihat spec.

Ringkasan

Anda telah melihat bagaimana HTML5 memberikan alternatif kredibel pertama hingga plugin pihak ketiga. Dukungan codec yang tidak kompatibel saat ini membuatnya lebih sulit daripada menggunakan plugin hanya untuk menanamkan video di halaman dan membuatnya bekerja di lintas-browser.

Di sisi positifnya, karena video dan audio sekarang memiliki elemen-elemen teratur yang didukung secara langsung oleh browser (bukan “kotak hitam" Plugin) dan menawarkan API yang kuat, mereka sangat mudah untuk dikontrol melalui JavaScript. Dengan sedikit pengetahuan standar web, pengembang dapat dengan mudah membangun kontrol kustom mereka sendiri, atau melakukan segala macam manipulasi video gila dengan hanya beberapa baris kode. Sebagai jaring pengaman untuk browser yang tidak bisa diatasi, sebaiknya anda juga menambahkan tautan untuk mendownload file video anda di luar elemen <video>.

Sudah ada sejumlah script siap pakai dan tersedia yang memungkinkan anda untuk memanfaatkan sinergi HTML5 di halaman anda sendiri dengan mudah, tanpa harus melakukan semua coding sendiri. The Kaltura player adalah pemutar video open source yang bekerja di semua browser. jPlayer adalah jQuery audio player berlisensi sangat bebas yang bisa mendegradasi hingga Flash di browser lawas, bisa ditata dengan CSS dan dapat diperpanjang untuk memungkinkan playlist.

Mengakses video dengan JavaScript lebih baik daripada menulis pemutar media baru. Dalam bab berikutnya, anda akan belajar bagaimana untuk memanipulasi elemen media asli untuk memunculkan beberapa efek yang benar-benar menakjubkan. Atau setidaknya, kepala kita terpental sekitar layar - dan siapa yang bisa memahami sesuatu yang lebih menabjubkan dari itu?

Beli Buku

Artikel ini dikutip dari Perkenalan HTML5 oleh Bruce Lawson dan Remy Sharp. Copyright © 2011. Digunakan dengan izin Pendidikan Pearson, Inc dan New Riders.

Apakah fungsi atribut control dalam tag video?

Tag apa yang digunakan untuk menyisipkan video?

Apa yang dimaksud dengan HTML5?

Apa Perbedaan HTML dan HTML5?