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. Show
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 Multimedia Asli: Mengapa, Apa, dan Bagaimana?Pada tahun 2007, Anne van Kesteren menulis sesuatu kepada Kelompok Kerja:
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>: Mengapa Anda membutuhkan elemen <video>?Sebelumnya, jika pengembang ingin menyertakan video dalam halaman web, mereka harus menggunakan elemen
<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>
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.
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 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 Anatomi Elemen VideoPaling sederhananya, termasuk video pada halaman di HTML5 hanya memerlukan kode ini: <video src=turkish.ogv></video> Di sini, ekstensi file Mirip dengan <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. AutoPlayAnda 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> controlsMenyediakan 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.
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 posterAtribut 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, lebarAtribut-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. loopAtribut loop adalah atribut Boolean lainnya. Seperti yang anda bayangkan, attribute ini memutar pemutaran media. preloadMungkin 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. srcSeperti pada Codec-horor, hororDraf awal dari spesifikasi HTML5 mengamanatkan bahwa semua browser
setidaknya memiliki dukungan yang terpasang tetap untuk multimedia dalam dua codec: 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 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. Sama halnya dengan
Theora, webM adalah codec bebas royalti. Dalam bab ini, anda dapat mengganti contoh
Aturannya adalah: sediakan bebas royalti (webM atau Theora) dan
Beberapa elemen <source>Untuk melakukan ini, anda perlu mengkodekan multimedia anda dua kali: sekali sebagai Theora dan sekali Kemudian, anda hubungkan versi file yang terpisah ini ke elemen media. Alih-alih menggunakan atribut src tunggal, anda kumpulkan elemen 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.
Baris 3 menawarkan video Di dalam elemen 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 LawasBrowser 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 Mengkodekan Video dan Audio bebas royaltyIdealnya, 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 GenggamFile 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.
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 <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 bergulirSalah 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 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 playbackSelanjutnya, 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 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:
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 BerhubunganElemen 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 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 downloadElemen 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 Namun, terkadang ada
masalah halus di Firefox tepatnya di elemen videonya yang menyebabkan nilai 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 DiputarSaat 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.
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
Fast forward, Slow Motion, dan Mundurspec menyediakan atribut, playbackRate. Secara default, playbackRate yang diasumsikan adalah 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 Aksesibilitas MultimediaKami 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 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 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 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 <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 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: Kami menggunakan 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 Untuk informasi lebih lanjut, lihat spec. RingkasanAnda 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 BukuArtikel ini dikutip dari Perkenalan HTML5 oleh Bruce Lawson dan Remy Sharp. Copyright © 2011. Digunakan dengan izin Pendidikan Pearson, Inc dan New Riders. Apa itu tag link HTML?Apa itu Link di HTML? Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik.. dan nanti akan membuka halaman lain sesui alamat URL yang diberikan.
Bagaimana Membuat tag link di HTML?Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari anchor. Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan alamat url yang nantinya akan dituju. Kepanjangan dari href adalah Hypertext Reference.
Format video apa saja yang dapat dimasukan ke dalam HTML?Beberapa format video yang didukung oleh HTML <video> element. File MPEG 4, dengan video codec H264, dan audio codec AAC. File Ogg, dengan video codec Theora dan audio codec Vorbis. File WebM dengan video codec VP8 dan audio codec Vorbis.
Bagaimana cara menampilkan gambar pada HTML?Gambar dapat kita tambakan di HTML dengan menggunakan tag <img> . Tag ini memiliki atribut wajib, yakni src . Jika kita tidak mengisi atribut src , maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.
|