Hamparan kontrol khusus video html5

Question

Menambahkan tombol di atas foto sangat mudah dengan menggunakan properti absolut CSS, tetapi bagaimana dengan tombol putar overlay di atas video HTML5?

Table of Contents Show

Cara Menambahkan Tombol Putar pada Video HTML5
Gaya CSS untuk Tombol Putar Hamparan
Apa yang telah dilakukan selama ini
Sembunyikan kontrol asli
Alihkan status pemutaran
Tampilkan durasi video dan waktu berlalu
Perbarui bilah kemajuan
Lewati dulu
Kontrol volume
Klik video untuk memutar atau menjedanya
Video layar penuh
Tambahkan dukungan Picture-In-Picture
Alihkan kontrol video
Tambahkan pintasan keyboard
Bagaimana cara menyesuaikan kontrol video dalam HTML?
Bagaimana cara menyembunyikan kontrol video html5?
Bagaimana cara menyembunyikan kontrol video di tag video?
Bagaimana cara menambahkan tombol pada video dalam HTML?

Javascript akan membantu kita untuk Memutar/Menjeda video sedangkan CSS akan digunakan untuk memposisikan elemen tombol. Pada artikel kami sebelumnya, kami telah menjelaskan metode menambahkan teks CSS pada video dan di sini kami akan menggunakan teknik yang hampir sama tetapi dengan penambahan Javascript

Tombol video akan berfungsi dengan dua cara. Ini akan memungkinkan Anda memutar video saat diklik dan juga menjeda video saat mengklik lagi. Kami akan menggunakan tombol HTML lalu menempatkan tag video HTML5 untuk menentukan video

Dengan menggunakan javascript, kami akan menangani fungsi Play/Pause-nya. Kami juga akan mengelola status aktif tombol. Terakhir, kami akan membuat tombol berfungsi dengan video

Mari kita lihat proses penerapannya dan ketahui bagaimana kita bisa melakukannya

Cara Menambahkan Tombol Putar pada Video HTML5

Kami akan mulai dengan HTML, dan kami hampir tidak memiliki beberapa baris kode HTML. Yang kita butuhkan adalah memiliki tombol yang akan kita posisikan di atas video dan kemudian kita akan menentukan kode HTML5 video di bawah kode tombol

<button class="active">play</button>
<video id="banner-video" preload="auto" loop>
	<source src="https://static.videezy.com/system/resources/previews/000/002/719/original/cloudy-sunset.mp4">
</video>

Itu saja tentang HTML dan sekarang CSS. Pertama, kita akan menjadikan video responsif HTML5 layar penuh sebagai Latar Belakang. Kami melakukan ini mencapai menggunakan posisi absolut

Gaya CSS untuk Tombol Putar Hamparan

Kami akan mengatur lebar dan tinggi menjadi 100% dan juga menambahkan transisi. Yang penting, kita akan menggunakan indeks-z untuk menyimpan video di latar belakang dan tombol di atas video

video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

_

Untuk menyelaraskan pusat tombol video, kami akan menggunakan posisi absolut seperti yang kami lakukan untuk video. Agar tampilan tombol terlihat bagus, kita akan menambahkan warna latar belakang, ukuran font, dan warna

button {
    background-color: #666;
    border: medium none;
    color: #fff;
    display: block;
    font-size: 18px;
    left: 0;
    margin: 0 auto;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    top: 50%;
}

Warna latar tombol akan mengubah status tidak aktif

button.active {
  background-color: #0077a2;
}

JavaScript

Setelah mendefinisikan fungsi ready, kita akan menggunakan fungsi getElementById untuk mendapatkan ID video. Selanjutnya, fungsi klik akan mengatur kelas saat ini ke tingkat aktif tambahan dan memutar video

$( document ).ready(function() {
var ctrlVideo = document.getElementById("video"); 

$('button').click(function(){
  if ($('button').hasClass("active")){
    
        ctrlVideo.play();
    
    $('button').html("Pause");
    $('button').toggleClass("active");
  } else {
    
        ctrlVideo.pause();
    
    $('button').html("play");
    $('button').toggleClass("active");
  }
});

});

_

Itu saja, beri tahu saya melalui komentar di bawah jika Anda dapat menambahkan tombol putar overlay pada video HTML5

Pilihan

Ckin player hadir dengan banyak pilihan

data-ckin akan mengubah ckin. Pilihan. default, minimal, kompak

data-ckin="compact"

data-color akan mengubah warna kontrol

data-color="#fff000"

data-overlay akan menambahkan overlay ke video Anda. Pilihan. 1, 2

data-overlay="2"

poster ditambahkan ke sampul video

poster="video-background-image"

Panduan ini akan mengajari Anda cara membuat pemutar video HTML5 lintas-browser dengan JavaScript menggunakan API Media dan Layar Penuh

Proyek JavaScript untuk pemula (8 seri bagian)

1 Buat Aplikasi JavaScript pertama Anda — Generator Kutipan Acak
2 Cara membuat Aplikasi Pencarian Wikipedia dengan JavaScript
3 Cara membuat Aplikasi Kalkulator dengan JavaScript
4 Cara membuat Aplikasi Daftar Todo dengan JavaScript
5 Cara membuat Pemutar Video HTML5 Khusus dengan JavaScript
6 Cara membuat Game Simon dengan JavaScript
7 Cara membuat Aplikasi Timer Pomodoro dengan JavaScript
8 Cara membuat ekstensi Chrome pertama Anda

Menonton dan berbagi konten video adalah salah satu penggunaan web yang paling umum, dan cara penyematan video di laman web telah berkembang selama bertahun-tahun. Saat ini, menambahkan file video ke halaman web dapat dilakukan dengan menggunakan elemen

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

7 yang berfungsi di semua browser modern dan mendukung berbagai format video

Dukungan video HTML5. Lihat tabel terbaru

Peringatan utama saat menggunakan

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

7 adalah bahwa pemutar video yang dirender akan bervariasi tergantung pada browser yang tidak ideal jika Anda ingin memberikan pengalaman pengguna yang konsisten. Inilah sebabnya mengapa berguna untuk membangun antarmuka Anda sendiri yang menampilkan kontrol khusus alih-alih menggunakan default browser

Dalam tutorial ini, saya akan membawa Anda membuat pemutar video khusus dengan JavaScript. Tujuannya adalah untuk menjelaskan cara memanfaatkan HTML5 Media API di browser untuk membangun pengalaman yang lebih baik dari default

Pemain yang akan kita bangun dalam tutorial ini akan sangat mirip dengan yang ditemukan di YouTube karena menurut saya merupakan ide yang bagus untuk mereplikasi beberapa fungsi yang sudah dikenal oleh kebanyakan orang.

Kami tidak akan menerapkan semua fitur yang ada di pemutar YouTube karena itu akan membuat tutorial menjadi lebih panjang dan rumit. Namun, setelah Anda menyelesaikan tutorial ini, saya yakin Anda akan dapat menyambungkan fungsionalitas baru apa pun dengan mudah

Anda dapat melihat demo langsung dari apa yang akan kami buat, atau lihat kode sumber di GitHub

Prasyarat

Anda harus memiliki pemahaman dasar tentang JavaScript dan DOM untuk dapat melanjutkan dengan tutorial ini. Saya juga merekomendasikan untuk menggunakan Chrome versi terbaru karena beberapa fitur yang akan kami tambahkan (seperti Gambar-dalam-Gambar) hanya berfungsi di Chrome pada saat penulisan.

Memulai

Saya telah menyiapkan file awal untuk tutorial ini di GitHub. Anda perlu mengkloningnya ke mesin Anda dan membuka direktori proyek di editor teks Anda. Anda akan menemukan markup dan gaya untuk pemutar masing-masing di file

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

9 dan

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

0, serta file video yang akan digunakan untuk menguji pemutar. File

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

_1 yang disertakan adalah tempat kami akan menambahkan semua kode yang diperlukan agar pemutar dapat berfungsi

Jalankan

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

_2 di terminal untuk menginstal browser-sync sebagai ketergantungan pengembangan untuk memulai server web dan menyegarkan halaman secara otomatis ketika ada file yang berubah, diikuti oleh

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

3 untuk membuka proyek di browser Anda di http. // localhost. 3000

Apa yang telah dilakukan selama ini

Saat ini, pemutar video mempertahankan kontrol browser asli yang berfungsi seperti yang Anda harapkan. Markup untuk kontrol khusus telah ditentukan dalam elemen

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

4 tetapi mereka disembunyikan secara default

indeks. html

. . .
<div class="video-controls hidden" id="video-controls">
<!-- Custom controls are defined here -->
</div>
. . .

Meskipun kita akan mengimplementasikan antarmuka khusus untuk kontrol, ada baiknya mempertahankan atribut

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

5 pada elemen

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

7 sehingga pengguna yang menonaktifkan JavaScript karena alasan apa pun akan tetap memiliki akses ke kontrol video asli browser. Untuk orang lain, kontrol asli dapat disembunyikan dengan mudah dan diganti dengan kontrol khusus seperti yang akan segera ditunjukkan

Gambar poster juga telah ditambahkan ke video, dan atribut

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

7 disetel ke

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

8 yang memerintahkan browser untuk hanya mengambil metadata video (seperti durasi). Sederhananya, hanya satu file sumber dalam MP4 yang disertakan untuk video dalam format MP4 karena didukung oleh semua browser utama dan merupakan default yang cukup aman. Lihat ini untuk informasi lebih lanjut tentang format video dan kompatibilitas browser

indeks. html

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

Sembunyikan kontrol asli

Hal pertama yang perlu kita lakukan adalah menyembunyikan kontrol video default dan menyediakan antarmuka kita sendiri setelah ditentukan bahwa browser mendukung video HTML5. Masukkan cuplikan kode berikut ke dalam file

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

1 Anda untuk mewujudkannya

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

Properti

const playbackIcons = document.querySelectorAll('.playback-icons use');

_0 adalah cara kami dapat mendeteksi dukungan untuk format video di browser. Untuk menggunakannya, kita perlu membuat instance dari elemen

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

7 dan memeriksa apakah mendukung metode

const playbackIcons = document.querySelectorAll('.playback-icons use');

0. Jika ya, dapat diasumsikan bahwa video HTML5 didukung sehingga kontrol default segera dinonaktifkan demi kontrol kustom kami

Kontrol asli telah digantikan oleh yang khusus

Alihkan status pemutaran

Mari kita mulai dengan dasar-dasarnya. Anda harus dapat memutar dan menjeda video dengan mengeklik tombol putar dan ikon harus berubah agar sesuai dengan status video. Kami akan mulai dengan memilih video dan tombol putar di bagian atas

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

1 sebagai berikut

indeks. js

const playButton = document.getElementById('play');

Kemudian kami akan membuat fungsi yang mengubah status pemutaran video

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

Terakhir, buat event listener yang menjalankan fungsi

const playbackIcons = document.querySelectorAll('.playback-icons use');

4 saat

const playbackIcons = document.querySelectorAll('.playback-icons use');

5 diklik

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

Cukup mudah bukan? . Itu harus memutar dan menjeda video dengan tepat

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Ini sebenarnya mengatur nada untuk sisa tutorial. Kami biasanya akan memilih salah satu kontrol video, membuat fungsi yang mengimplementasikan fungsi tertentu, lalu menghubungkannya melalui event listener

Mari lanjutkan untuk memperbarui ikon putar tergantung pada status video. Ini adalah HTML untuk

const playbackIcons = document.querySelectorAll('.playback-icons use');

5

indeks. html

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

_

Kami memiliki ikon putar dan jeda di elemen

const playbackIcons = document.querySelectorAll('.playback-icons use');

7, tetapi hanya satu yang ditampilkan sekaligus sementara yang lain disembunyikan. Yang perlu kita lakukan sekarang adalah mengaktifkan kelas tersembunyi di setiap ikon sehingga ikon yang sesuai ditampilkan tergantung pada status video

Pertama, pilih ikon di bagian atas

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

1

indeks. js

const playbackIcons = document.querySelectorAll('.playback-icons use');

Selanjutnya, buat fungsi untuk memperbarui tombol putar di bawah

const playbackIcons = document.querySelectorAll('.playback-icons use');

4

indeks. js

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

Dan terakhir, tambahkan pendengar acara berikut di bagian bawah

indeks. js

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

Saat video diputar atau dijeda, fungsi

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

0 dijalankan yang mengaktifkan kelas

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

1 pada setiap tombol. Karena kami memiliki kelas

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

_1 pada ikon jeda secara default, setelah video diputar, ikon ini akan ditampilkan dan ikon putar akan disembunyikan. Jika video dijeda lagi, terjadi kebalikannya. Anda dapat menguji ini di browser Anda

Satu hal tambahan yang harus dilakukan adalah memperbarui teks di tooltip yang muncul saat Anda mengarahkan kursor ke tombol putar. Terbaca

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

_3 secara default, tetapi kami perlu memperbaruinya sehingga terbaca

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

4 saat video diputar.

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

5 adalah pintasan keyboard yang akan kami tambahkan untuk memutar atau menjeda video nanti di tutorial

Perbarui

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

_0 seperti yang ditunjukkan di bawah ini

indeks. js

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_0

Itu akan mengatur teks yang sesuai di tooltip setelah Anda mengarahkan kursor ke tombol saat video diputar atau dijeda

Jika Anda bertanya-tanya bagaimana tooltip ditampilkan, inilah CSS yang relevan

gaya. css

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_1

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Tampilkan durasi video dan waktu berlalu

Panjang video perlu ditampilkan karena itu adalah salah satu hal pertama yang ingin dilihat pengguna, jadi kami akan melakukannya nanti

Berikut adalah markup untuk durasi dan waktu yang telah berlalu

indeks. html

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_2

Pilih kedua kontrol di file

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

_1 Anda sebagai berikut

indeks. js

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_3

Kami akan menampilkan total durasi video setelah halaman dimuat menggunakan properti

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

8 video. Properti ini mewakili jumlah detik video sehingga kita perlu mengonversi angka ini menjadi menit dan detik sebelum kita dapat menampilkannya. Buat fungsi

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

_9 yang membutuhkan waktu dalam detik dan mengubahnya menjadi menit dan detik

indeks. js

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_4

Selanjutnya, buat fungsi

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

_0 di bawah

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

9

indeks. js

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_5

Seperti yang ditunjukkan di atas, durasi video dalam detik dibulatkan ke bilangan bulat terdekat, diformat ke menit dan detik, dan diperbarui di layar. Atribut

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

_2 juga diperbarui menjadi string waktu yang mewakili durasi video

Selanjutnya, mari kaitkan fungsi

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

0 ke acara

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

4 video seperti yang ditunjukkan di bawah ini. Ini akan menyebabkan durasi video diperbarui saat metadata video telah dimuat

indeks. js

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_6

Setelah itu, mari perbarui waktu yang telah berlalu saat video diputar. Inilah fungsi yang membantu kita mencapai apa yang kita inginkan

indeks. js

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_7

Acara yang perlu kita dengarkan di video adalah acara

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

5. Peristiwa ini dipicu setiap kali waktu pemutaran yang ditunjukkan oleh properti

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

6 video diperbarui

indeks. js

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_8

Kode di atas memastikan bahwa setelah

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

6 video diperbarui berdasarkan pemutaran video, waktu yang berlalu juga diperbarui dengan tepat

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Perbarui bilah kemajuan

Hal berikutnya yang akan kami lakukan adalah memperbarui bilah progres saat video diputar. Inilah markup untuk bilah kemajuan

indeks. html

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_9

Di sini, kami memiliki elemen

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

_8 yang tepat untuk menampilkan progres tugas apa pun, sementara input jangkauan akan memungkinkan kami menggosok video dengan cepat dan mulus. Saya telah menata kedua elemen sehingga memiliki lebar dan tinggi yang sama, dan masukan rentang dibuat transparan (kecuali ibu jari yang memiliki warna yang sama dengan nilai di dalam bilah progres)

Jika Anda penasaran, Anda dapat mempelajari CSS untuk mengetahui bagaimana saya melakukannya. Ini semacam retasan untuk membuat bilah progres terlihat seperti elemen tunggal, tetapi saya merasa ini dibenarkan untuk kasus penggunaan kami

Atribut

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

_9 pada keduanya disetel ke nol, dan atribut

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_00 menunjukkan nilai saat ini dari kedua elemen. Mereka juga membutuhkan atribut

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

01 yang akan disetel ke durasi video dalam hitungan detik yaitu dari

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

02 seperti yang telah ditunjukkan di atas. Kita dapat melakukan ini dalam fungsi

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

_0, tetapi kita perlu memilih elemen terlebih dahulu

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

0

Kemudian perbarui

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_04 seperti yang ditunjukkan di bawah ini

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

1

Sekarang, rentang untuk elemen progres dan input rentang adalah antara nol dan durasi video dalam detik seperti yang ditunjukkan oleh atribut

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

9 dan

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

01 pada kedua elemen. Ini memungkinkan kami untuk dengan mudah menyinkronkan bilah kemajuan dengan input rentang kapan saja seperti yang akan Anda lihat

Mari lanjutkan dan perbarui nilai elemen yang disebutkan di atas saat video diputar sehingga bilah progres berfungsi. Buat fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_07 baru di bawah ini

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

2

Kemudian tambahkan pendengar acara

video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);

5 baru pada elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

09 di bawah yang pertama

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

3

Segarkan browser Anda dan cobalah. Anda akan melihat pembaruan bilah kemajuan saat video sedang diputar

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Lewati dulu

Sebagian besar pemutar video memungkinkan Anda mengeklik bilah progres untuk melompat ke titik tertentu dalam video, dan milik kami tidak akan berbeda. Pertama, kita perlu memilih elemen tooltip

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

4

Kemudian tambahkan fungsi untuk menampilkan stempel waktu di elemen tooltip saat kursor berada di atas bilah progres

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

5

Fungsi ini menggunakan posisi kursor pada elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

10 untuk mengetahui secara kasar di mana dalam input rentang tempat pengguna mengarahkan kursor, dan menyimpan posisi dalam atribut

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

11 sambil memperbarui tooltip untuk mencerminkan stempel waktu pada posisi tersebut

Sambungkan fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

12 ke acara

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

13 pada kontrol

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

10 untuk melihat efeknya beraksi

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

6

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Setelah nilai elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

10 diubah baik dengan mengeklik atau menyeret ibu jari, kita ingin video melompat ke waktu yang ditetapkan dalam atribut

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

11. Buat fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_17 baru di bawah

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

12

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

7

Fungsi ini akan dijalankan ketika nilai

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

10 perubahan elemen dapat dipantau menggunakan peristiwa

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

20. Kami kemudian mendapatkan nilai dari atribut

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_11 dan memeriksa apakah itu ada. Jika ya, kami mengambil nilainya dan memperbarui waktu berlalu video dan bilah kemajuan ke nilai itu. Jika properti

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_11 tidak ada (di seluler misalnya), nilai elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

10 akan digunakan sebagai gantinya

Ini menciptakan efek melompat ke depan ke posisi berbeda dalam video

indeks. js

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

8

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Kontrol volume

indeks. html

// Select elements here
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}

_9

Dalam cuplikan di atas, Anda dapat menemukan markup untuk semua kontrol terkait volume. Kami memiliki tombol yang mewakili ikon volume bergantung pada status volume video, dan input jangkauan yang mengontrol volume video

Hal pertama yang perlu kita lakukan adalah memperbarui volume video saat nilai elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

24 berubah. Kami juga perlu memperbarui ikon untuk mencerminkan volume video saat ini

Seperti yang Anda lihat, input volume berkisar dari 0 hingga 1, dan setiap langkah dalam input meningkatkan volume sebesar 0. 01. Ini diatur sedemikian rupa agar konsisten dengan properti volume video yang juga berkisar dari 0 hingga 1 di mana 0 adalah volume terendah dan 1 adalah volume tertinggi

Lanjutkan dan pilih tombol, ikon, dan input di file

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

1 Anda

indeks. js

const playButton = document.getElementById('play');

_0

Selanjutnya, buat fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_26 baru untuk memperbarui volume segera setelah input volume diubah

indeks. js

const playButton = document.getElementById('play');

_1

Dan kaitkan ke elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_27 sebagai berikut

indeks. js

const playButton = document.getElementById('play');

_2

Pada titik ini, Anda akan melihat penurunan volume saat Anda menggeser rentang ke kiri, dan sebaliknya. Kami perlu menambahkan fungsi lain untuk memperbarui ikon setiap kali volume berubah

indeks. js

const playButton = document.getElementById('play');

_3

Saat fungsi ini dijalankan, semua ikon disembunyikan lalu salah satunya ditampilkan tergantung pada kondisi mana yang bernilai true

Kita dapat menjalankan

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

28 setiap kali volume berubah dengan mendengarkan event

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

29 sebagai berikut

indeks. js

const playButton = document.getElementById('play');

_4

Inilah yang harus Anda dapatkan di browser Anda setelah melakukan perubahan ini

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Satu hal lagi yang perlu kami tambahkan adalah kemampuan untuk menonaktifkan dan mengaktifkan video dengan mengklik ikon volume. Kami akan membuat fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

30 baru untuk tujuan ini

indeks. js

const playButton = document.getElementById('play');

_5

Kemudian jalankan fungsi ketika

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_31 diklik

indeks. js

const playButton = document.getElementById('play');

_6

Fungsi ini mengubah status properti

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

32 pada video menjadi benar atau salah. Saat video dibisukan, volume disimpan dalam atribut

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

33 pada elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

27, sehingga saat video dibunyikan, kita dapat memulihkan status volume ke nilai sebelumnya

Begini tampilannya dalam praktik

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Klik video untuk memutar atau menjedanya

Di banyak aplikasi pemutar video, mengeklik video itu sendiri sering kali merupakan cara yang lebih cepat untuk memutar atau menjeda video, jadi mari kita buat di pemutar kami

Yang perlu kita lakukan adalah menambahkan mendengarkan acara

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

35 di

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

09 dan menjalankan fungsi

const playbackIcons = document.querySelectorAll('.playback-icons use');

4 saat acara diaktifkan

indeks. js

const playButton = document.getElementById('play');

_7

Sementara ini berhasil, mari membuatnya lebih menarik dengan menambahkan sedikit umpan balik saat Anda memutar atau menjeda video dengan mengekliknya seperti yang dilakukan di YouTube atau Netflix

Inilah HTML untuk animasi kita

indeks. html

const playButton = document.getElementById('play');

_8

Dan inilah CSS yang relevan

gaya. css

const playButton = document.getElementById('play');

_9

Secara default, elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_38 dibuat sepenuhnya transparan menggunakan properti

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

39. Untuk mereplikasi animasi dari YouTube, kami akan menggunakan Web Animation API untuk menganimasikan opasitas dan skala elemen ini

Pilih terlebih dahulu di bagian atas

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

1

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

0

Kemudian buat fungsi berikut di bawah semua fungsi lainnya di

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

1

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

1

Metode

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_42 mengambil array objek keyframe dan objek pilihan di mana Anda dapat mengontrol durasi animasi antara lain

Sekarang, tambahkan pendengar acara

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_35 kedua pada

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

09

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

2

Efeknya adalah Anda sekarang melihat animasi pendek saat Anda memutar atau menjeda video dengan mengkliknya

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Video layar penuh

Selanjutnya, mari buat tombol layar penuh berfungsi. Untuk membuat video layar penuh (termasuk kontrol), kita harus memilih elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

45 dan meminta browser untuk menempatkannya (dan keturunannya) dalam layar penuh

Pilih tombol dan penampung video di file

. . .
<button data-title="Play (k)" id="play">
  <svg class="playback-icons">
    <use href="#play-icon"></use>
    <use class="hidden" href="#pause"></use>
  </svg>
</button>
. . .

1 Anda

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

3

Kemudian buat fungsi ________18______47 baru

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

4

Dan tambahkan pendengar acara

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_35 pada

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

49 seperti yang ditunjukkan di bawah ini

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

5

Fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_47 memeriksa apakah dokumen dalam mode layar penuh terlebih dahulu, jika ya, keluar kembali ke mode jendela. Jika tidak, itu menempatkan elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_51 di layar penuh

Satu hal lagi yang perlu kita lakukan di bagian ini adalah memperbarui ikon layar penuh dan teks di tooltip yang muncul saat Anda mengarahkan kursor ke tombol. Pertama, pilih ikon

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

6

Kemudian buat fungsi untuk memperbarui tombol saat

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

51 masuk dan keluar dari mode layar penuh

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

7

Terakhir, tetapkan

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

53 ke event handler

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

54 pada elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

51

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

8

Dan itu berfungsi seperti yang diharapkan. Uji di browser Anda atau lihat GIF di bawah ini

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Tambahkan dukungan Picture-In-Picture

API Picture-in-Picture (PiP) memungkinkan pengguna untuk menonton video di jendela mengambang (selalu di atas jendela lain) sehingga mereka dapat mengawasi apa yang mereka tonton saat berinteraksi dengan situs atau aplikasi lain

Saat ini, API ini hanya didukung di beberapa browser sehingga kami harus menggunakan deteksi fitur untuk menyembunyikan tombol PiP di browser yang tidak mendukungnya sehingga pengguna tidak melihat tombol yang tidak dapat mereka gunakan

Lihat untuk tabel terbaru

Inilah kode yang membantu kami mencapainya. Tambahkan di bawah pendengar acara lainnya

indeks. js

// Add functions here

// togglePlay toggles the playback state of the video.
// If the video playback is paused or ended, the video is played
// otherwise, the video is paused
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}

_9

Seperti yang telah kita lakukan sepanjang tutorial ini, kita perlu memilih kontrol yang relevan terlebih dahulu

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

0

Kemudian buat fungsi yang mengaktifkan mode Picture-in-Picture

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

1

Saya telah membuat fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

56 asinkron sehingga kami dapat menemukan kesalahan jika metode

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

57 ditolak, yang dapat terjadi karena sejumlah alasan. Di aplikasi Word sebenarnya, Anda mungkin ingin menampilkan pesan kesalahan kepada pengguna alih-alih mencatatnya ke konsol

Selanjutnya, dengarkan event

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_35 pada

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

59 dan tambahkan fungsi

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

56 sebagai handler untuk event tersebut

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

2

Sekarang, mengklik

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_59 harus masuk atau keluar dari mode Picture-in-Picture. Anda juga dapat menutup jendela PiP dengan mengeklik tombol tutup di kanan atas

Maaf, browser Anda tidak mendukung video HTML5, tetapi jangan khawatir, Anda dapat mengunduhnya dan menontonnya dengan pemutar video favorit Anda

GIF

Alihkan kontrol video

Kontrol video mengambil beberapa ruang dan memblokir tampilan pengguna dari beberapa konten. Lebih baik menyembunyikannya saat tidak digunakan, dan menampilkannya lagi saat mengarahkan kursor ke video

Tulis dua fungsi di bawah ini untuk tujuan ini

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

_3

Yang ingin kami lakukan di sini adalah menyembunyikan kontrol saat kursor meninggalkan antarmuka video. Namun kami ingin memastikan bahwa kontrol selalu ditampilkan saat video dijeda, oleh karena itu kondisional di

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

62

Untuk mencapai ini, kami akan menggunakan event handler

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

63 dan

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

64 pada elemen

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

09 dan

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

66 seperti yang ditunjukkan di bawah ini

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

_4

Tambahkan pintasan keyboard

Fitur terakhir yang akan kami tambahkan ke pemutar kami adalah kemampuan menggunakan keyboard untuk mengontrol pemutaran video. Ini benar-benar hanya masalah menjalankan fungsi yang telah kami tulis saat tombol tertentu ditekan. Pintasan yang akan kami terapkan di sini adalah sebagai berikut

// updatePlayButton updates the playback icon and tooltip
// depending on the playback state
function updatePlayButton() {
  playbackIcons.forEach(icon => icon.classList.toggle('hidden'));
}

5. Putar atau jeda video

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_68. Nonaktifkan atau aktifkan video

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_69. Alihkan layar penuh

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_70. Alihkan mode Gambar-dalam-Gambar

Apa yang akan kita lakukan di sini adalah mendengarkan peristiwa

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

71 pada dokumen, mendeteksi tombol yang ditekan dan menjalankan fungsi yang relevan untuk tombol

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

5

Pernyataan sakelar digunakan di atas untuk mendeteksi tombol mana yang ditekan dan kemudian mengeksekusi kode yang relevan. Alasan

. . .
<video controls class="video" id="video" preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4"></source>
</video>
. . .

_72 dipanggil setelah dua detik adalah untuk meniru perilaku di YouTube di mana, saat menggunakan pintasan keyboard untuk memutar video, kontrol tidak langsung bersembunyi begitu video mulai diputar tetapi melakukannya setelah jeda singkat

indeks. js

// Add eventlisteners here
playButton.addEventListener('click', togglePlay);

_6

Kesimpulan

Ada begitu banyak cara untuk meningkatkan pemutar video tetapi tutorialnya sudah terlalu panjang sehingga saya harus berhenti di sini. Jika Anda tertarik untuk memperluas fungsionalitas pemutar, berikut adalah beberapa ide

Tambahkan dukungan untuk teks dan subtitel
Tambahkan dukungan kecepatan
Tambahkan kemampuan untuk mempercepat atau memundurkan video
Tambahkan kemampuan untuk memilih resolusi video (720p, 480p, 360p, 240p)

Saya harap tutorial ini bermanfaat bagi Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan komentar di bawah dan saya akan menghubungi Anda kembali. Jangan lupa untuk memeriksa kode sumber lengkap di GitHub

Bagaimana cara menyesuaikan kontrol video dalam HTML?

Menyiapkan JavaScript . Create a new JavaScript file called script. js dan tautkan ke halaman HTML Anda menggunakan elemen

Bagaimana cara menyembunyikan kontrol video html5?

Kita dapat menyembunyikan kontrol dengan tidak menambahkan atribut kontrol ke elemen video . Bahkan tanpa atribut kontrol pada elemen, pengguna dapat melihat bagian kontrol dengan mengklik kanan video dan mengaktifkan kontrol tampilkan.

Bagaimana cara menyembunyikan kontrol video di tag video?

Hapus atribut kontrol dari tag video

Tambahkan css ke video tag video. -webkit-media-controls-panel { tampilan. tidak ada. penting; . 1. penting;}

Bagaimana cara menambahkan tombol pada video dalam HTML?

Setel atribut src di sumber ke tautan video Anda dan tentukan jenisnya . Untuk membuat tombol khusus, Anda dapat membuat wadah yang berisi video dan tombol khusus. Tombol akan diposisikan -ed to absolute menggunakan CSS agar muncul pada posisi yang tepat di video (disesuaikan menggunakan CSS).

kode html