Tag <video> dan <source>

Derek Herman

Joe Medley

Sam Dutton

Anda telah menyiapkan file video dengan benar untuk web. Anda telah memberikan dimensi dan resolusi yang benar. Anda bahkan telah membuat file WebM dan MP4 terpisah untuk browser yang berbeda.

Agar orang lain dapat melihat video Anda, Anda masih perlu menambahkannya ke halaman web. Untuk melakukannya dengan benar, Anda harus menambahkan dua elemen HTML: elemen <video> dan elemen <source>. Selain dasar-dasar tentang tag ini, 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 itu sendiri. Selalu gunakan atribut type seperti yang ditunjukkan di bawah. Browser menggunakan ini untuk menentukan apakah browser dapat memutar file video yang disediakan. Jika tidak dapat, teks yang disertakan 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 pengganti jika browser pengguna tidak mendukung salah satunya.

Contoh di bawah ini 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>

Coba di Glitch

Anda harus selalu menambahkan atribut type ke peristiwa tag <source> meskipun bersifat opsional. Hal ini memastikan browser hanya mendownload file yang dapat diputar.

Pendekatan ini memiliki beberapa keunggulan dibandingkan menyajikan HTML yang berbeda atau pembuatan skrip sisi server, terutama pada perangkat seluler:

• Anda dapat membuat daftar format dengan urutan sesuai keinginan.
• Peralihan sisi klien mengurangi latensi; hanya satu permintaan yang dibuat untuk mendapatkan konten.
• Membiarkan browser memilih format akan lebih mudah, cepat, dan berpotensi lebih dapat diandalkan daripada menggunakan database dukungan sisi server dengan deteksi agen pengguna.
• Menentukan setiap jenis file sumber akan meningkatkan performa jaringan; browser dapat memilih sumber video tanpa harus mendownload sebagian video untuk "mencium" formatnya.

Masalah ini sangat penting dalam konteks seluler, saat bandwidth dan latensi sangat 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 menggali detailnya. Lihat A Digital Media Primer for Geeks untuk mengetahui selengkapnya tentang 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 hanya memutar menit pertama video, tentukan #t=,00:01:00.

Anda dapat menggunakan fitur ini untuk menayangkan beberapa penayangan pada video yang sama, seperti titik tanda di 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 memastikan bahwa permintaan rentang tersedia untuk menggunakan fragmen di situs Anda.

Untungnya, Anda dapat melakukannya di alat developer browser. Di Chrome, misalnya, berada di panel Jaringan. Cari header Accept-Ranges dan pastikan header tersebut bertuliskan bytes. Dalam gambar, saya telah menggambar kotak merah di sekitar {i>header<i} ini. Jika tidak melihat bytes sebagai nilai, Anda harus menghubungi penyedia hosting.

Menyertakan gambar poster

Tambahkan atribut poster ke elemen video agar penonton dapat mengetahui konten segera setelah elemen dimuat, tanpa perlu mendownload video atau memulai pemutaran.

<video poster="poster.jpg" ...>
  …
</video>

Poster juga dapat menjadi pengganti jika src video rusak atau jika tidak ada format video yang disediakan yang didukung. Satu-satunya kekurangan gambar poster adalah permintaan file tambahan, yang menghabiskan beberapa bandwidth dan memerlukan rendering. Untuk mengetahui informasi selengkapnya, lihat Mengenkode gambar secara efisien.

Larangan

Tanpa poster penggantian, video akan terlihat rusak.

Anjuran

Poster penggantian membuat frame pertama tampak seperti telah diambil.

Memastikan video tidak meluap dari kontainer

Jika elemen video terlalu besar untuk area tampilan, elemen video tersebut dapat melebihi penampungnya, sehingga pengguna tidak dapat melihat konten atau menggunakan kontrol.

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 di iframe (seperti video YouTube), coba pendekatan responsif (seperti yang dikemukakan 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>

Cobalah

Bandingkan contoh responsif dengan versi tidak responsif. Seperti yang dapat Anda lihat, versi yang tidak responsif bukanlah pengalaman pengguna yang baik.

Orientasi perangkat

Orientasi perangkat bukanlah masalah bagi monitor desktop atau laptop, tetapi sangat penting saat mempertimbangkan desain halaman web untuk perangkat seluler dan tablet.

Safari di iPhone melakukan tugas yang baik untuk beralih antara orientasi potret dan lanskap:

Orientasi perangkat pada iPad dan Chrome di Android bisa bermasalah. Misalnya, tanpa penyesuaian apa pun, video yang diputar di iPad dalam orientasi lanskap terlihat seperti ini:

Menetapkan width: 100% atau max-width: 100% video dengan CSS dapat menyelesaikan banyak masalah tata letak orientasi perangkat.

Putar otomatis

Atribut autoplay mengontrol apakah browser langsung mendownload dan memutar video. Cara kerjanya yang tepat bergantung pada platform dan browser.

• Chrome: Bergantung pada beberapa faktor, termasuk, tetapi tidak terbatas pada, apakah penayangan berada di desktop dan apakah pengguna seluler telah menambahkan situs atau aplikasi Anda ke layar utama mereka. Untuk mengetahui detailnya, lihat Praktik terbaik putar otomatis.

• Firefox: Memblokir semua video dan suara, tetapi memberi pengguna kemampuan untuk melonggarkan batasan ini untuk semua situs atau situs tertentu. Untuk mengetahui detailnya, lihat Mengizinkan atau memblokir putar otomatis media di Firefox

• Safari: Secara historis memerlukan gestur pengguna, tetapi telah melonggarkan persyaratan tersebut di versi terbaru. Untuk mengetahui detailnya, lihat Kebijakan <video> Baru untuk iOS.

Bahkan pada platform yang memungkinkan autoplay, Anda perlu mempertimbangkan apakah sebuah keputusan yang bagus untuk mengaktifkannya:

• Penggunaan data bisa berefek berat.
• Memutar media sebelum pengguna menginginkannya dapat menghabiskan bandwidth dan CPU, sehingga menunda rendering halaman.
• Pengguna mungkin dalam suatu keadaan ketika pemutaran video atau audio akan mengganggunya.

Pramuat

Atribut preload memberikan petunjuk ke browser tentang berapa banyak informasi atau konten yang harus dipramuat.

Atribut preload memiliki efek yang berbeda pada platform yang berbeda. Misalnya, Chrome mem-buffer 25 detik video di desktop, tetapi tidak melakukannya di iOS atau Android. Ini berarti bahwa pada perangkat seluler, mungkin ada penundaan permulaan pemutaran yang tidak terjadi di desktop. Lihat Pemutaran cepat dengan pramuat audio dan video atau blog Steve Souders untuk mengetahui detail selengkapnya.

Setelah Anda mengetahui cara menambahkan media ke halaman web, saatnya mempelajari Aksesibilitas media. Anda akan menambahkan teks ke video untuk gangguan pendengaran, atau jika pemutaran audio tidak memungkinkan.