Anda telah menyiapkan file video untuk web dengan benar. Anda telah memberikan dimensi dan resolusi yang tepat. Anda bahkan telah membuat file WebM dan MP4 terpisah untuk browser yang berbeda.
Agar siapa pun dapat melihat video Anda, Anda masih harus menambahkannya ke halaman web. Untuk melakukannya,
diperlukan penambahan dua elemen HTML: elemen <video>
dan
elemen <source>
. Selain dasar-dasar tentang tag tersebut, artikel ini menjelaskan atribut yang harus Anda tambahkan ke tag tersebut untuk menciptakan pengalaman pengguna yang baik.
Menentukan satu file
Meskipun tidak direkomendasikan, Anda dapat menggunakan elemen video saja. Selalu
gunakan atribut type
seperti yang ditunjukkan di bawah ini. Browser menggunakannya untuk menentukan apakah
file dapat memutar file video yang disediakan. Jika tidak dapat, teks tertutup akan ditampilkan.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Menentukan beberapa format file
Ingat kembali dari Dasar-dasar file media bahwa tidak semua browser mendukung format
video yang sama. Elemen <source>
memungkinkan Anda menentukan beberapa format sebagai penggantian
jika browser pengguna tidak mendukung salah satunya.
Contoh di bawah menghasilkan video tersemat yang digunakan sebagai contoh nanti dalam artikel ini.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Anda harus selalu menambahkan atribut type
ke peristiwa tag <source>
meskipun bersifat opsional. Hal ini memastikan bahwa browser hanya mendownload file yang
dapat diputar.
Pendekatan ini memiliki beberapa keunggulan dibandingkan menayangkan skrip HTML atau sisi server yang berbeda, terutama di perangkat seluler:
- Anda dapat mencantumkan format sesuai urutan preferensi.
- Peralihan sisi klien mengurangi latensi; hanya satu permintaan yang dibuat untuk mendapatkan konten.
- Membiarkan browser memilih format akan lebih mudah, lebih cepat, dan berpotensi lebih andal daripada menggunakan database dukungan sisi server dengan deteksi agen pengguna.
- Menentukan setiap jenis sumber file akan meningkatkan performa jaringan; browser dapat memilih sumber video tanpa harus mendownload bagian video untuk "mengendus" formatnya.
Masalah ini sangat penting dalam konteks seluler, dengan bandwidth dan latensi yang tinggi, dan kesabaran pengguna mungkin terbatas. Menghapus
atribut type
dapat memengaruhi performa jika ada beberapa sumber
dengan jenis yang tidak didukung.
Ada beberapa cara untuk mempelajari detailnya. Lihat A Digital Media Primer for Geeks untuk mengetahui lebih lanjut cara kerja video dan audio di web. Anda juga dapat menggunakan proses debug jarak jauh di DevTools untuk membandingkan aktivitas jaringan dengan atribut jenis dan tanpa atribut jenis.
Menentukan waktu mulai dan waktu berakhir
Hemat bandwidth dan buat situs Anda terasa lebih responsif: gunakan fragmen media untuk menambahkan waktu mulai dan waktu berakhir ke elemen video.
Untuk menggunakan fragmen media, tambahkan #t=[start_time][,end_time]
ke URL media. Misalnya, untuk memutar video dari detik 5 sampai 10, tentukan:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Anda juga dapat menentukan waktu di <hours>:<minutes>:<seconds>
. Misalnya,
#t=00:01:05
memulai video pada satu menit, lima detik. Untuk memutar hanya
menit pertama video, tentukan #t=,00:01:00
.
Anda dapat menggunakan fitur ini untuk mengirim beberapa penayangan video yang sama—seperti titik tanda dalam DVD–tanpa harus mengenkode dan menyajikan beberapa file.
Agar fitur ini berfungsi, server Anda harus mendukung permintaan rentang dan kemampuan tersebut harus diaktifkan. Sebagian besar server mengaktifkan permintaan rentang secara default. Karena beberapa layanan hosting menonaktifkannya, Anda harus mengonfirmasi bahwa permintaan rentang tersedia untuk menggunakan fragmen di situs Anda.
Untungnya, Anda dapat melakukannya di alat developer browser Anda. Di Chrome, misalnya, izin ada di panel Network. Cari header Accept-Ranges
dan
verifikasi bahwa header tersebut bertuliskan bytes
. Dalam gambar, saya menggambar kotak
merah di sekitar {i>header<i} ini. Jika bytes
tidak ditampilkan sebagai nilai, Anda harus menghubungi
penyedia hosting.
![Screenshot Chrome DevTools: Accept-Ranges: byte.](https://web.dev/static/articles/video-and-source-tags/image/chrome-devtools-screensho-cd70c057af37e.png?authuser=6&hl=id)
Sertakan gambar poster
Tambahkan atribut poster ke elemen video
sehingga penonton mengetahui
konten segera setelah elemen dimuat, tanpa perlu mendownload video
atau memulai pemutaran.
<video poster="poster.jpg" ...>
…
</video>
Poster juga dapat menjadi penggantian jika src
video rusak atau jika tidak ada
format video yang disediakan yang didukung. Satu-satunya kelemahan gambar poster adalah
permintaan file tambahan, yang menghabiskan beberapa bandwidth dan memerlukan rendering.
Untuk mengetahui informasi selengkapnya, lihat Mengenkode gambar secara efisien.
![Tanpa poster penggantian, video akan terlihat rusak.](https://web.dev/static/articles/video-and-source-tags/image/without-fallback-poster-40d22fe6b95af.png?authuser=6&hl=id)
![Poster penggantian membuatnya tampak seolah-olah bingkai pertama telah ditangkap.](https://web.dev/static/articles/video-and-source-tags/image/a-fallback-poster-makes-97991ed2f2275.png?authuser=6&hl=id)
Memastikan video tidak melebihi penampung
Jika terlalu besar untuk area pandang, elemen video mungkin melebihi penampung, sehingga tidak mungkin bagi pengguna untuk melihat konten atau menggunakan kontrol.
![Screenshot Android Chrome, potret: elemen video tanpa gaya meluap dari area pandang.](https://web.dev/static/articles/video-and-source-tags/image/android-chrome-screenshot-2f9f737cb9bf1.png?authuser=6&hl=id)
![Screenshot Android Chrome, lanskap: elemen video tanpa gaya meluap dari area pandang.](https://web.dev/static/articles/video-and-source-tags/image/android-chrome-screenshot-0a3ad7fb3e37.png?authuser=6&hl=id)
Anda dapat mengontrol dimensi video menggunakan CSS. Jika CSS tidak memenuhi semua kebutuhan Anda, library dan plugin JavaScript seperti FitVids dapat membantu, bahkan untuk video dari YouTube dan sumber lainnya. Sayangnya, resource ini dapat meningkatkan ukuran payload jaringan dengan konsekuensi negatif bagi pendapatan dan dompet pengguna Anda.
Untuk penggunaan sederhana seperti yang saya jelaskan di sini, gunakan kueri media CSS untuk
menentukan ukuran elemen bergantung pada dimensi area pandang; max-width:
100%
adalah teman Anda.
Untuk konten media dalam iframe (seperti video YouTube), coba pendekatan responsif (seperti yang diajukan oleh John Surdakowski).
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
Bandingkan contoh responsif dengan versi tidak responsif. Seperti yang Anda lihat, versi yang tidak responsif bukanlah pengalaman pengguna yang baik.
Orientasi perangkat
Orientasi perangkat tidak menjadi masalah bagi monitor desktop atau laptop, tetapi sangat penting saat mempertimbangkan desain halaman web untuk perangkat seluler dan tablet.
Safari di iPhone melakukan pekerjaan yang baik untuk beralih antara orientasi potret dan lanskap:
![Screenshot video yang diputar di Safari pada iPhone, potret.](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-76f52b9e92365.png?authuser=6&hl=id)
![Screenshot video yang diputar di Safari pada iPhone, lanskap.](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-0d5d0af24767b.png?authuser=6&hl=id)
Orientasi perangkat pada iPad dan Chrome di Android dapat menimbulkan masalah. Misalnya, tanpa penyesuaian apa pun, video yang diputar di iPad dalam orientasi lanskap terlihat seperti ini:
![Screenshot video yang diputar di Safari pada iPad, lanskap.](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-792c6c149e81f.png?authuser=6&hl=id)
Menyetel video width: 100%
atau max-width: 100%
dengan CSS dapat menyelesaikan
banyak masalah tata letak orientasi perangkat.
Putar otomatis
Atribut autoplay
mengontrol apakah browser akan langsung mendownload dan memutar
video. Cara kerja persisnya bergantung pada platform dan browser.
Chrome: Bergantung pada beberapa faktor, termasuk, tetapi tidak terbatas pada apakah penayangan dilakukan di desktop dan apakah pengguna seluler telah menambahkan situs atau aplikasi ke layar utama mereka. Untuk mengetahui detailnya, lihat Praktik terbaik putar otomatis.
Firefox: Memblokir semua video dan suara, tetapi memberikan pengguna kemampuan untuk melonggarkan pembatasan ini untuk semua situs atau situs tertentu. Untuk mengetahui detailnya, lihat Mengizinkan atau memblokir putar otomatis media di Firefox
Safari: Secara historis membutuhkan gestur pengguna, tetapi telah melonggarkan persyaratan tersebut pada versi terbaru. Untuk mengetahui detailnya, lihat Kebijakan <video> Baru untuk iOS.
Bahkan pada platform yang memungkinkan putar otomatis, Anda harus mempertimbangkan apakah sebaiknya mengaktifkannya:
- Penggunaan data dapat mahal.
- Memutar media sebelum pengguna menginginkannya dapat menghabiskan bandwidth dan CPU, sehingga menunda rendering halaman.
- Pengguna mungkin berada dalam konteks yang dapat mengganggu pemutaran video atau audio.
Pramuat
Atribut preload
memberikan petunjuk ke browser tentang seberapa banyak
informasi atau konten yang harus di-pramuat.
Nilai | Deskripsi |
---|---|
none |
Pengguna mungkin memilih untuk tidak menonton video, jadi jangan melakukan pramuat apa pun. |
metadata |
Metadata (durasi, dimensi, trek teks) harus dimuat sebelumnya, tetapi dengan video minimal. |
auto |
Sebaiknya Anda langsung mendownload seluruh video. String kosong memberikan hasil yang sama. |
Atribut preload
memiliki efek yang berbeda di berbagai platform.
Misalnya, Chrome buffering video selama 25 detik di desktop, tetapi tidak buffering di iOS atau
Android. Ini berarti bahwa di perangkat seluler, mungkin ada penundaan startup pemutaran
yang tidak terjadi di desktop. Lihat Pemutaran cepat dengan pramuat audio dan video atau
blog Steve Souders untuk mengetahui detail selengkapnya.
Setelah mengetahui cara menambahkan media ke halaman web, kini saatnya mempelajari Aksesibilitas media tempat Anda akan menambahkan teks ke video untuk gangguan pendengaran, atau jika memutar audio bukan pilihan yang tepat.