Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Video

Pengguna suka dengan video; video sangat menyenangkan dan informatif. Pada perangkat seluler, video bisa menjadi cara yang lebih mudah untuk mendapat informasi. Namun video menggunakan bandwidth dan mereka tidak selalu bekerja dengan sama di setiap platform. Pengguna tidak suka menunggu video dimuat; mereka tidak suka ketika mereka menekan play dan tidak ada yang terjadi. Baca terus untuk menemukan cara paling sederhana menambahkan video ke situs Anda dan memastikan pengguna mendapatkan pengalaman terbaik pada perangkat apa pun.

Menambahkan video

TL;DR

  • Gunakan elemen video untuk memuat, melakukan decode, dan memutar video di situs Anda.
  • Buat video dalam berbagai format untuk menjangkau berbagai platform seluler.
  • Tentukan ukuran video dengan benar; pastikan mereka tidak meluap dari kontainernya.
  • Aksesibilitas penting; tambahkan elemen track sebagai anak elemen video.

Menambahkan elemen video

Menambahkan elemen video untuk memuat, melakukan decode, dan memutar video di situs Anda:

<video src="chrome.webm" type="video/webm">
    <p>Browser Anda tidak mendukung elemen video.</p>
</video>

Menetapkan beberapa format file

Tidak semua browser mendukung format video yang sama. Elemen <source> memperbolehkan Anda menentukan beberapa format sebagai fallback apabila browser pengguna tidak mendukung salah satunya.

Misalnya:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Cobalah

Ketika browser melakukan parse tag <source>, atribut type opsional digunakan untuk membantu memutuskan file mana yang diunduh dan dimainkan. Jika browser mendukung WebM, bisa memainkan chrome.webm; jika tidak, ia akan mengecek apakah bisa memainkan video MPEG-4.

Lihat A Digital Media Primer for Geeks untuk mengetahui selengkapnya tentang bagaimana video dan audio bekerja pada web.

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

  • Developer bisa membuat daftar format dengan urutan sesuai keinginan.
  • Peralihan sisi-klien bawaan mengurangi latensi; hanya satu permintaan yang dibuat untuk mendapatkan materi.
  • 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 tipe file sumber meningkatkan kinerja jaringan; browser bisa memilih sumber video tanpa harus mengunduh sebagian video untuk "menebak" formatnya.

Semua hal ini sangat penting dalam konteks seluler, dengan bandwidth dan latensi berharga premium, serta kesabaran pengguna ada batasnya. Belum lagi atribut tipe yang bisa memengaruhi kinerja ketika ada beberapa sumber dengan tipe yang tidak didukung.

Dengan menggunakan alat developer browser seluler, bandingkan aktivitas jaringan dengan atribut tipe dan tanpa atribut tipe.

Periksa juga header respons dalam alat developer browser Anda untuk memastikan server melaporkan tipe MIME yang tepat; jika tidak, pemeriksaan tipe sumber video tidak akan bekerja.

Menetapkan waktu mulai dan waktu berakhir

Hemat bandwidth dan buat situs Anda terasa lebih responsif: gunakan Media Fragments API untuk menambahkan waktu mulai dan waktu berakhir ke elemen video.

Untuk menambahkan fragmen media, Anda cukup menambahkan #t=[start_time][,end_time] ke URL Media. Misalnya, untuk memutar video antara 5 hingga 10 detik, tentukan:

<source src="video/chrome.webm#t=5,10" type="video/webm">

Anda juga bisa menggunakan Media Fragments API untuk memberikan beberapa tampilan pada video yang sama–seperti titik tanda dalam DVD–tanpa harus mengenkode dan menyajikan beberapa file.

Perhatian: Hampir semua platform kecuali iOS mendukung Media Fragments API. Pastikan juga bahwa server Anda mendukung Permintaan Rentang. Secara default, hampir semua server mengaktifkan Permintaan Rentang, namun beberapa layanan hosting mungkin mematikannya.

Dengan menggunakan alat developer browser Anda, periksa Accept-Ranges: bytes di header respons:

Tangkapan layar Chrome DevTools: Accept-Ranges: bytes

Memasukkan gambar poster

Menambahkan atribut poster ke elemen video sehingga pengguna mengetahui tentang materi tersebut segera setelah elemen dimuat, tanpa perlu mengunduh video atau memulai pemutaran.

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

Poster juga bisa menjadi fallback jika src video rusak atau jika format video yang disediakan tidak ada yang didukung. Satu-satunya kekurangan gambar poster adalah permintaan file tambahan, yang memakan beberapa bandwidth dan membutuhkan rendering. Untuk informasi selengkapnya, lihat Optimalisasi gambar.

Berikut adalah perbandingan berdampingan dari video tanpa gambar poster dan dengan gambar poster–kami membuat gambar poster berwarna hitam putih untuk membuktikan itu bukan video:

Tangkapan layar Android Chrome, potret: tanpa poster
Tangkapan layar Android Chrome, potret: tanpa poster
Tangkapan layar Android Chrome, potret: dengan poster
Tangkapan layar Android Chrome, potret: dengan poster

Memberikan alternatif untuk platform lawas

Tidak semua format video didukung pada semua platform. Periksa format yang didukung pada platform utama dan pastikan video Anda berjalan di setiap platform tersebut.

Periksa format apa yang didukung

Gunakan canPlayType() untuk mengetahui format video yang didukung. Metode ini mengambil argumen string yang terdiri dari mime-type serta codec opsional dan mengembalikan salah satu nilai berikut:

Mengembalikan nilai dan Keterangan
(string kosong) Kontainer dan/atau codec tidak didukung.
maybe Kontainer dan codec mungkin tidak didukung, tapi browser perlu mengunduh beberapa video untuk diperiksa.
probably Format tampaknya didukung.

Berikut adalah beberapa contoh dari argumen canPlayType() dan nilai-nilai yang dikembalikan ketika dijalankan di Chrome:

Tipe dan Respons
video/xyz (string kosong)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (string kosong)
video/xyz; codecs="nonsense, noise" (string kosong)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

Membuat video dalam berbagai format

Ada banyak alat untuk membantu menyimpan video yang sama dalam format berbeda:

Periksa format yang digunakan

Ingin mengetahui format video yang sesungguhnya dipilih browser?

Dalam JavaScript, gunakan properti currentSrc video untuk mengembalikan sumber yang digunakan.

Mengubah ukuran video dengan tepat

Saat berurusan dengan kebahagiaan pengguna, ukuran file adalah hal yang penting.

TL;DR

  • Jangan menyajikan video dengan ukuran bingkai yang lebih besar atau kualitasnya lebih tinggi dari yang bisa ditangani platform.
  • Jangan membuat durasi video lebih lama dari yang dibutuhkan.
  • Video berdurasi panjang bisa menyebabkan ketersendatan dengan pengunduhan dan pencarian; beberapa browser mungkin harus menunggu sampai video diunduh sebelum memulai pemutaran.

Memeriksa ukuran video

Ukuran bingkai video yang sebenarnya, seperti yang di-enkode, mungkin berbeda dengan dimensi elemen video (sebagaimana gambar mungkin tidak ditampilkan menggunakan dimensi yang sebenarnya).

Untuk memeriksa ukuran video yang di-enkode, gunakan elemen video videoWidth dan properti videoHeight. width dan height mengembalikan dimensi elemen video, yang mungkin telah diubah ukurannya menggunakan CSS atau atribut lebar dan tinggi inline.

Memastikan video tidak meluap dari kontainer

Ketika elemen video terlalu besar untuk tampilan yang terlihat, elemen tersebut mungkin meluap dari kontainer, sehingga mustahil bagi pengguna untuk melihat materi atau menggunakan kontrol.

Tangkapan layar Android Chrome, potret: elemen video tanpa gaya meluap dari tampilan yang terlihat
Tangkapan layar Android Chrome, potret: elemen video tanpa gaya meluap dari tampilan yang terlihat
Tangkapan layar Android Chrome, lanskap: elemen video tanpa gaya meluap dari tampilan yang terlihat
Tangkapan layar Android Chrome, lanskap: elemen video tanpa gaya meluap dari tampilan yang terlihat

Anda bisa mengontrol dimensi video menggunakan JavaScript atau CSS. Pustaka JavaScript dan plugin seperti FitVids memungkinkan untuk mempertahankan ukuran dan rasio aspek yang tepat, bahkan untuk video Flash dari YouTube dan sumber lainnya.

Gunakan kueri media CSS untuk menentukan ukuran elemen bergantung pada dimensi tampilan yang terlihat; max-width: 100% adalah temanmu.

Untuk materi media di iframes (seperti video YouTube), cobalah pendekatan responsif (seperti yang dikemukakan oleh John Surdakowski).

Perhatian: Jangan memaksakan perubahan ukuran elemen yang mengakibatkan rasio aspek berbeda dari video asli. Video yang gepeng atau membentang terlihat jelek.

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.

Menyesuaikan pemutar video

Platform yang berbeda menampilkan video dengan berbeda. Solusi seluler harus mempertimbangkan orientasi perangkat. Gunakan Fullscreen API untuk mengontrol tampilan layar penuh dari materi video.

Bagaimana orientasi perangkat bekerja di berbagai perangkat

Orientasi perangkat bukanlah masalah bagi monitor desktop atau laptop, namun sangat penting ketika mempertimbangkan desain laman web untuk perangkat seluler dan tablet.

Safari pada iPhone melakukan tugas yang baik untuk peralihan antara orientasi potret dan lanskap:

Tangkapan layar dari video yang dimainkan di Safari pada iPhone, potret
Tangkapan layar dari video yang dimainkan di Safari pada iPhone, potret
Tangkapan layar dari video yang dimainkan di Safari pada iPhone, lanskap
Tangkapan layar dari video yang dimainkan di Safari pada iPhone, lanskap

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

Tangkapan layar video yang dimainkan di Safari pada iPad Retina, lanskap

Mengatur width: 100% atau max-width: 100% video dengan CSS bisa mengatasi banyak masalah layout orientasi perangkat. Anda juga mungkin ingin mempertimbangkan alternatif layar penuh.

Inline atau tampilan layar penuh

Tangkapan layar elemen video pada iPhone, potret

Platform yang berbeda menampilkan video dengan berbeda. Safari pada iPhone menampilkan elemen video inline pada laman web, namun memutar video dalam mode layar penuh:

Tangkapan layar video yang dimainkan di Chrome pada Android, potret

Pada Android, pengguna bisa meminta mode layar penuh dengan mengeklik ikon fullscreen. Namun setelan default adalah memutar video inline:

Tangkapan layar video yang dimainkan di Safari pada iPad Retina, lanskap

Safari pada iPad memutar video inline:

Mengontrol tampilan materi layar penuh

Untuk platform yang tidak mengharuskan pemutaran video layar penuh, Fullscreen API didukung secara luas. Gunakan API ini untuk mengontrol tampilan layar penuh materi, atau laman.

Untuk menampilkan layar penuh sebuah elemen, seperti video:

elem.requestFullScreen();

Untuk menampilkan layar penuh seluruh dokumen:

document.body.requestFullScreen();

Anda juga bisa mendengarkan perubahan status layar penuh:

video.addEventListener("fullscreenchange", handler);

Atau, periksa untuk melihat apakah elemen saat ini dalam mode layar penuh:

console.log("In full screen mode: ", video.displayingFullscreen);

Anda juga bisa menggunakan kelas-semu :fullscreen CSS untuk mengubah cara elemen ditampilkan dalam mode layar penuh.

Pada perangkat yang mendukung Fullscreen API, pertimbangkan untuk menggunakan gambar kecil sebagai Placeholder untuk video:

Untuk melihatnya beraksi, silakan lihat demo.

Masalah aksesibilitas

Aksesibilitas bukan sebuah fitur. Pengguna yang tidak bisa mendengar atau melihat tidak akan dapat merasakan pengalaman video sama sekali tanpa teks atau keterangan. Waktu yang diperlukan untuk menambahkan teks ke video jauh lebih sedikit dibandingkan dengan pengalaman buruk yang Anda berikan kepada pengguna. Menyediakan setidaknya pengalaman dasar untuk semua pengguna.

Memasukkan teks video untuk meningkatkan aksesibilitas

Tangkapan layar menunjukkan teks yang ditampilkan menggunakan elemen track di Chrome pada Android

Untuk membuat media lebih mudah diakses di seluler, sertakan teks dan keterangan menggunakan elemen track.

Menambahkan elemen track

Sangat mudah untuk menambahkan teks ke video–cukup tambahkan elemen track sebagai anak dari elemen video:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Cobalah

Atribut src elemen track memberikan lokasi file track.

Menetapkan teks dalam file track

Sebuah file track terdiri dari "tanda" berwaktu dalam format WebVTT:

WEBVTT

00:00.000 --> 00:04.000
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

Referensi Singkat

Atribut elemen video

Untuk daftar lengkap atribut elemen video beserta definisinya, lihat spesifikasi elemen video.

Atribut Ketersediaan Keterangan
src Semua browser. Alamat (URL) dari video.
poster Semua browser. Alamat (URL) file gambar yang ditunjukkan browser segera setelah elemen video ditampilkan tanpa mengunduh materi video.
preload Semua browser seluler mengesampingkan pramuat. Petunjuk bagi browser bahwa pramuat metadata (atau beberapa video) sebelum pemutaran memberikan kita keuntungan. Pilihannya adalah none, metadata, atau auto (lihat bagian Pramuat untuk lebih lengkapnya).
autoplay Tidak didukung pada iPhone atau Android; didukung pada semua browser desktop, iPad, Firefox, dan Opera untuk Android. Memulai pengunduhan dan pemutaran sesegera mungkin (lihat bagian Autoplay untuk lebih lengkapnya).
loop Semua browser. Mengulang-ulang video.
controls Semua browser. Menunjukan kontrol video default (play, pause, dll.).

Autoplay

Pada desktop, autoplay memberitahukan browser agar mengunduh dan langsung memutar video. Pada iOS, dan Chrome untuk Android, autoplay tidak bekerja; pengguna harus mengetuk layar untuk memutar video.

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

  • Penggunaan data bisa berefek berat.
  • Meminta media untuk mengunduh dan memulai pemutaran tanpa bertanya terlebih dahulu, bisa menghambat bandwith dan CPU secara tak terduga, dan karenanya menghambat perenderan laman.
  • Pengguna mungkin dalam suatu keadaan ketika pemutaran video atau audio akan mengganggunya.

Perilaku autoplay bisa dikonfigurasi di Android WebView melalui WebSettings API. Defaultnya adalah true namun aplikasi WebView dapat memilih untuk menonaktifkannya.

Pramuat

Atribut preload menyediakan petunjuk ke browser tentang seberapa banyak informasi atau materi yang di-pramuat.

Nilai & Keterangan
none Pengguna mungkin tidak menonton video–tidak melakukan pramuat apa pun.
metadata Metadata (durasi, dimensi, track teks) harus di-pramuat, namun dengan video minimal.
auto Pengaturan agar mengunduh seluruh video secara langsung.

Atribut preload memiliki efek yang berbeda pada platform yang berbeda. Misalnya, Chrome menyangga 25 detik video pada desktop, namun tanpa penyanggaan pada iOS atau Android. Ini berarti bahwa pada perangkat seluler, kemungkinan ada penundaan permulaan pemutaran yang tidak terjadi di desktop. Lihat laman pengujian Steve Souders untuk detail selengkapnya.

JavaScript

Artikel HTML5 Rocks Video melakukan tugas hebat dalam meringkas properti, metode, dan kejadian JavaScript yang bisa digunakan untuk mengontrol pemutaran video. Kami telah menyertakan materi tersebut di sini, langsung memperbaruinya dengan mempertimbangkan kebutuhan spesifik untuk seluler yang relevan.

Properti

Properti & Keterangan
currentTime Mendapatkan atau menyetel posisi pemutaran dalam hitungan detik.
volume Mendapatkan atau menyetel tingkat volume saat ini bagi video.
muted Mendapatkan atau menyetel kebisuan audio.
playbackRate Mendapatkan atau menyetel laju pemutaran; 1 adalah kecepatan normal maju.
buffered Informasi tentang seberapa banyak video yang telah disangga dan siap diputar.
currentSrc Alamat video yang sedang diputar.
videoWidth Lebar video dalam piksel (yang mungkin berbeda dari lebar elemen video).
videoHeight Tinggi video dalam piksel (yang mungkin berbeda dari tinggi elemen video).

playbackRate (lihat demo) maupun volume tidak didukung pada perangkat seluler.

Metode

Metode & Keterangan
load() Memuat atau memuat ulang sumber video tanpa memulai pemutaran: misalnya, ketika src video diubah menggunakan JavaScript.
play() Memutar video dari lokasi saat ini.
pause() Menghentikan sementara video di lokasi yang sekarang.
canPlayType('format') Mencari tahu format yang didukung (lihat Memeriksa format yang didukung).

Pada perangkat selular (selain Opera pada Android) play() dan pause() tidak berfungsi kecuali dipanggil sebagai respons terhadap aksi pengguna seperti mengeklik tombol: lihat demo. (Demikian juga, Anda tidak bisa melakukan pemutaran materi seperti video YouTube yang disematkan.)

Kejadian

Ini hanyalah subset dari kejadian media yang mungkin diaktifkan. Lihat pada laman Media events di Mozilla Developer Network untuk daftar selengkapnya.

Kejadian & Keterangan
canplaythrough Diaktifkan ketika browser meyakini telah tersedia cukup data sehingga bisa memutar video seluruhnya tanpa interupsi.
ended Diaktifkan ketika video telah selesai diputar.
error Diaktifkan jika terjadi kesalahan.
playing Diaktifkan saat pertama kali video mulai diputar, setelah dihentikan sementara, atau ketika dihidupkan ulang.
progress Diaktifkan secara berkala untuk menunjukkan kemajuan unduhan.
waiting Diaktifkan bila sebuah aksi tertunda karena menunggu penyelesaian aksi yang lain.
loadedmetadata Diaktifkan bila browser selesai memuat metadata video: durasi, dimensi, dan track teks.