Hướng dẫn custom video controls html - điều khiển video tùy chỉnh html

• 1 Xây dựng ứng dụng JavaScript đầu tiên của bạn - Trình tạo báo giá ngẫu nhiên Build your first JavaScript App — A Random Quote Generator
• 2 Cách xây dựng ứng dụng tìm kiếm Wikipedia với JavaScript How to build a Wikipedia Search App with JavaScript
• 3 Cách xây dựng ứng dụng máy tính với JavaScript How to build a Calculator App with JavaScript
• 4 Cách xây dựng ứng dụng danh sách việc cần làm với JavaScript How to build a Todo List App with JavaScript
• 5 Cách xây dựng trình phát video HTML5 tùy chỉnh với JavaScript How to build a Custom HTML5 Video Player with JavaScript
• 6 Cách xây dựng một trò chơi Simon với JavaScript How to build a Simon Game with JavaScript
• 7 Cách xây dựng ứng dụng hẹn giờ Pomodoro với JavaScript How to build a Pomodoro Timer App with JavaScript
• 8 Cách tạo tiện ích mở rộng Chrome đầu tiên của bạn How to create your first Chrome extension

Xem và chia sẻ nội dung video là một trong những cách sử dụng phổ biến nhất của web và cách video được nhúng trên trang web đã phát triển trong nhiều năm qua. Ngày nay, việc thêm các tệp video vào trang web có thể đạt được bằng cách sử dụng phần tử

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

Hỗ trợ video HTML5. Xem Caniuse.com để biết bảng cập nhật.

Triển lãm chính khi sử dụng

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

Trong hướng dẫn này, tôi sẽ đưa bạn qua việc xây dựng một trình phát video tùy chỉnh với JavaScript. Mục đích được mô tả cách tận dụng API phương tiện HTML5 trong trình duyệt để xây dựng trải nghiệm cải thiện trên các mặc định.

Người chơi mà chúng tôi sẽ xây dựng trong hướng dẫn này sẽ trông rất giống người được tìm thấy trên YouTube bởi vì tôi nghĩ rằng đó là một ý tưởng tốt để sao chép một số chức năng trong điều gì đó mà hầu hết mọi người đã quen thuộc.

Chúng tôi đã giành chiến thắng khi thực hiện tất cả các tính năng được tìm thấy trong trình phát YouTube vì điều đó sẽ tạo ra một hướng dẫn dài hơn, phức tạp hơn. Tuy nhiên, một khi bạn đã hoàn thành hướng dẫn này, tôi sẽ tự tin rằng bạn sẽ có thể dễ dàng cắm vào bất kỳ chức năng mới nào.

Bạn có thể xem bản demo trực tiếp về những gì chúng tôi sẽ xây dựng hoặc xem mã nguồn trên GitHub.

Điều kiện tiên quyết

Bạn cần có một sự hiểu biết cơ bản về JavaScript và DOM để có thể tiến lên phía trước với hướng dẫn này. Tôi cũng khuyên bạn nên sử dụng phiên bản Chrome mới nhất vì một số tính năng mà chúng tôi sẽ thêm (chẳng hạn như hình ảnh trong ảnh) chỉ hoạt động trong Chrome tại thời điểm viết.

Bắt đầu

Tôi đã chuẩn bị các tập tin khởi động cho hướng dẫn này trên GitHub. Bạn cần sao chép nó vào máy của mình và mở thư mục dự án trong trình soạn thảo văn bản của bạn. Bạn sẽ tìm thấy đánh dấu và kiểu cho trình phát trong các tệp

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

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

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

Chạy

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

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

Những gì đã được thực hiện cho đến nay

Hiện tại, trình phát video giữ lại các điều khiển trình duyệt gốc hoạt động giống như bạn mong đợi. Đánh dấu cho các điều khiển tùy chỉnh đã được xác định trong phần tử

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

. . .
<div class="video-controls hidden" id="video-controls">

div>
. . .

Mặc dù chúng tôi sẽ triển khai giao diện tùy chỉnh cho các điều khiển, nhưng bạn có ý tưởng giữ lại thuộc tính

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

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

Một hình ảnh áp phích cũng đã được thêm vào video và thuộc tính

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

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

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

Ẩn các điều khiển gốc

Điều đầu tiên chúng ta cần làm là ẩn các điều khiển video mặc định và cung cấp giao diện của riêng chúng tôi một khi xác định rằng trình duyệt hỗ trợ video HTML5. Nhập đoạn mã sau vào tệp

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

// 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');
}

Thuộc tính

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

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

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

Các điều khiển gốc đã được thay thế bằng các điều khiển tùy chỉnh

Chuyển đổi trạng thái phát lại

Hãy bắt đầu với những điều cơ bản. Bạn sẽ có thể phát và tạm dừng video bằng cách nhấp vào nút phát và biểu tượng sẽ thay đổi để phù hợp với trạng thái của video. Chúng tôi sẽ bắt đầu bằng cách chọn video và nút phát ở đầu

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

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

Sau đó, chúng tôi sẽ tạo một chức năng chuyển đổi trạng thái phát lại của video:

// 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();
  }
}

Cuối cùng, hãy tạo một trình nghe sự kiện thực thi chức năng

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

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

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

Đủ dễ dàng phải không? Kiểm tra nó bằng cách nhấp vào nút phát trong trình duyệt của bạn. Nó nên chơi và tạm dừng video một cách thích hợp.

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Điều này thực sự thiết lập giai điệu cho phần còn lại của hướng dẫn. Chúng tôi thường chọn một trong các điều khiển video, tạo một chức năng thực hiện một chức năng cụ thể, sau đó kết nối nó thông qua trình nghe sự kiện.

Hãy cùng di chuyển để cập nhật biểu tượng phát tùy thuộc vào trạng thái của video. Đây là HTML cho

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

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

Chúng tôi có cả biểu tượng chơi và tạm dừng trong phần tử

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

Đầu tiên, chọn các biểu tượng ở đầu

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

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

Tiếp theo, hãy tạo chức năng để cập nhật nút phát theo

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

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

Và cuối cùng, thêm những người nghe sự kiện sau ở phía dưới:

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

Khi video được phát hoặc tạm dừng, chức năng

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

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

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

Một điều cần làm là cập nhật văn bản trong công cụ xuất hiện khi bạn di chuột qua nút phát. Nó đọc

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

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

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

Cập nhật

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

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

Điều đó sẽ đặt văn bản thích hợp trong chú giải công cụ khi bạn di chuột trên nút khi video đang phát hoặc tạm dừng.

Nếu bạn đang tự hỏi làm thế nào công cụ được hiển thị, thì đây là CSS có liên quan:

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

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Hiển thị thời lượng video và thời gian trôi qua

Nó cần thiết để hiển thị độ dài của một video vì đó là một trong những điều đầu tiên mà người dùng muốn thấy, vì vậy chúng tôi sẽ làm điều đó tiếp theo.

Đây là đánh dấu trong thời gian và thời gian trôi qua:

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

Chọn cả hai điều khiển trong tệp

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

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

Chúng tôi sẽ hiển thị tổng thời lượng của video khi trang tải bằng cách sử dụng thuộc tính video ____ ____102. Thuộc tính này biểu thị số giây của video vì vậy chúng tôi cần chuyển đổi số này thành phút và giây trước khi chúng tôi có thể hiển thị nó. Tạo hàm

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

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

Tiếp theo, tạo chức năng

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

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

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

Như được hiển thị ở trên, thời lượng video của Video tính bằng giây được làm tròn đến số nguyên gần nhất, được định dạng thành phút và giây và được cập nhật trên màn hình. Thuộc tính

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

Tiếp theo, hãy để Lát kết nối chức năng

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

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

Sau đó, hãy để cập nhật thời gian trôi qua khi video được phát. Ở đây, chức năng giúp chúng tôi đạt được những gì chúng tôi muốn:

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

Sự kiện chúng ta cần nghe trên video là sự kiện

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

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

Mã trên đảm bảo rằng một khi video

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

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Hiển thị thời lượng video và thời gian trôi qua

Nó cần thiết để hiển thị độ dài của một video vì đó là một trong những điều đầu tiên mà người dùng muốn thấy, vì vậy chúng tôi sẽ làm điều đó tiếp theo.

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

Đây là đánh dấu trong thời gian và thời gian trôi qua:

Chọn cả hai điều khiển trong tệp

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

Chúng tôi sẽ hiển thị tổng thời lượng của video khi trang tải bằng cách sử dụng thuộc tính video ____ ____102. Thuộc tính này biểu thị số giây của video vì vậy chúng tôi cần chuyển đổi số này thành phút và giây trước khi chúng tôi có thể hiển thị nó. Tạo hàm

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

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

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

// 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');
}

Như được hiển thị ở trên, thời lượng video của Video tính bằng giây được làm tròn đến số nguyên gần nhất, được định dạng thành phút và giây và được cập nhật trên màn hình. Thuộc tính

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

// 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');
}

Tiếp theo, hãy để Lát kết nối chức năng

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

Sau đó, hãy để cập nhật thời gian trôi qua khi video được phát. Ở đây, chức năng giúp chúng tôi đạt được những gì chúng tôi muốn:

// 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');
}

Sự kiện chúng ta cần nghe trên video là sự kiện

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

// 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');
}

Mã trên đảm bảo rằng một khi video

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

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Tiến về phía trước

Hầu hết các trình phát video cho phép bạn nhấp vào thanh tiến trình để nhảy đến một điểm cụ thể trong video và chúng tôi sẽ không khác. Đầu tiên, chúng ta cần chọn phần tử công cụ:

// 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');
}

Sau đó thêm một chức năng để hiển thị dấu thời gian trong phần tử Tooltip khi con trỏ qua thanh tiến trình:

// 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');
}

Hàm này sử dụng vị trí của con trỏ trên phần tử

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

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

Kết nối chức năng

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

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

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

// 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');
}

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Khi giá trị của phần tử

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

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

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

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

// 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');
}

Hàm này sẽ được thực thi khi giá trị của các thay đổi phần tử

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

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

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

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

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

Điều này tạo ra hiệu quả của việc nhảy về phía trước một vị trí khác trong video.

// 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');
}

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Khi giá trị của phần tử . . . . . .24 được thay đổi bằng cách nhấp hoặc kéo ngón tay cái, chúng tôi muốn video nhảy vào thời gian được đặt trong thuộc tính . . . . . .25. Tạo chức năng . . . . . .31 mới dưới . . . . . .26:

// 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');
}

Hàm này sẽ được thực thi khi giá trị của các thay đổi phần tử

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

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

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

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

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

Điều này tạo ra hiệu quả của việc nhảy về phía trước một vị trí khác trong video.

Điều khiển âm lượng

Trong đoạn trích trên, bạn có thể tìm thấy đánh dấu cho tất cả các điều khiển liên quan đến âm lượng. Chúng tôi có một nút đại diện cho biểu tượng âm lượng tùy thuộc vào trạng thái của âm lượng video và đầu vào phạm vi điều khiển âm lượng của video.

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

Điều đầu tiên chúng ta cần làm là cập nhật âm lượng của video khi giá trị của phần tử

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

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

Như bạn có thể thấy, đầu vào âm lượng nằm trong khoảng từ 0 đến 1 và mỗi bước trong đầu vào làm tăng âm lượng lên 0,01. Nó được đặt theo cách này để làm cho nó phù hợp với thuộc tính âm lượng video Video cũng dao động từ 0 đến 1 trong đó 0 là âm lượng thấp nhất và 1 là cao nhất.

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

Đi trước và chọn nút, biểu tượng và đầu vào trong tệp

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

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

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

Và kết nối nó với phần tử

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

Tại thời điểm này, bạn sẽ nhận thấy mức giảm âm lượng khi bạn trượt phạm vi sang trái và ngược lại. Chúng ta cần thêm một chức năng khác để cập nhật biểu tượng bất cứ khi nào âm lượng thay đổi:

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

index.js

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Khi giá trị của phần tử

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

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

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

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

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

Hàm này sẽ được thực thi khi giá trị của các thay đổi phần tử

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

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

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

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

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

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

Điều này tạo ra hiệu quả của việc nhảy về phía trước một vị trí khác trong video.

Điều khiển âm lượng

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Khi giá trị của phần tử . . . . . .24 được thay đổi bằng cách nhấp hoặc kéo ngón tay cái, chúng tôi muốn video nhảy vào thời gian được đặt trong thuộc tính . . . . . .25. Tạo chức năng . . . . . .31 mới dưới . . . . . .26:

Hàm này sẽ được thực thi khi giá trị của các thay đổi phần tử

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

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

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

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

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

Điều này tạo ra hiệu quả của việc nhảy về phía trước một vị trí khác trong video.

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

Điều khiển âm lượng

Ở đây, HTML cho hoạt hình của chúng tôi:

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

Và ở đây, các CSS có liên quan:

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

Theo mặc định, phần tử

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

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

Chọn nó đầu tiên ở đầu

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

// 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();
  }
}

Sau đó tạo chức năng sau đây bên dưới tất cả các chức năng khác trong

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

// 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();
  }
}

Phương thức

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

Bây giờ, hãy thêm một người nghe sự kiện

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

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

// 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();
  }
}

Hiệu ứng là bây giờ bạn thấy một hình ảnh động ngắn khi bạn phát hoặc tạm dừng video bằng cách nhấp vào nó.

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Video toàn màn hình

Tiếp theo, hãy để Lừa làm cho nút toàn màn hình chức năng. Để tạo video toàn màn hình (bao gồm cả các điều khiển), chúng tôi phải chọn phần tử

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

Chọn cả nút và bộ chứa video trong tệp

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

// 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();
  }
}

Sau đó tạo chức năng

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

// 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();
  }
}

Và thêm Trình nghe sự kiện

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

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

// 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();
  }
}

Hàm

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

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

Một điều nữa chúng ta cần làm trong phần này là cập nhật biểu tượng toàn màn hình và văn bản trong Tooltip xuất hiện khi bạn di chuột trên nút. Đầu tiên, chọn các biểu tượng:

// 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();
  }
}

Sau đó tạo chức năng để cập nhật nút khi

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

// 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();
  }
}

Cuối cùng, gán

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

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

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

// 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();
  }
}

Và nó hoạt động như mong đợi! Kiểm tra nó trong trình duyệt của bạn hoặc xem GIF bên dưới.

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Video toàn màn hình

Tiếp theo, hãy để Lừa làm cho nút toàn màn hình chức năng. Để tạo video toàn màn hình (bao gồm cả các điều khiển), chúng tôi phải chọn phần tử

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

Chọn cả nút và bộ chứa video trong tệp

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

Sau đó tạo chức năng

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

Và thêm Trình nghe sự kiện

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

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

// 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();
  }
}

Hàm

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

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

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

Một điều nữa chúng ta cần làm trong phần này là cập nhật biểu tượng toàn màn hình và văn bản trong Tooltip xuất hiện khi bạn di chuột trên nút. Đầu tiên, chọn các biểu tượng:

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

Sau đó tạo chức năng để cập nhật nút khi

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

Cuối cùng, gán

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

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

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

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

Và nó hoạt động như mong đợi! Kiểm tra nó trong trình duyệt của bạn hoặc xem GIF bên dưới.

Xin lỗi, trình duyệt của bạn không hỗ trợ video HTML5, nhưng đừng lo lắng, bạn có thể tải xuống và xem nó với trình phát video yêu thích của bạn!

GIF

Video toàn màn hình

Tiếp theo, hãy để Lừa làm cho nút toàn màn hình chức năng. Để tạo video toàn màn hình (bao gồm cả các điều khiển), chúng tôi phải chọn phần tử

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

Chọn cả nút và bộ chứa video trong tệp

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

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

Sau đó tạo chức năng

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

Và thêm Trình nghe sự kiện

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

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

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

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

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

Một điều nữa chúng ta cần làm trong phần này là cập nhật biểu tượng toàn màn hình và văn bản trong Tooltip xuất hiện khi bạn di chuột trên nút. Đầu tiên, chọn các biểu tượng:

Sau đó tạo chức năng để cập nhật nút khi

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

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

  9: Phát hoặc tạm dừng video

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

  82: tắt tiếng hoặc bật tiếng

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

  83: Chuyển đổi toàn màn hình

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

  84: Chuyển đổi chế độ hình ảnh trong hình ảnh

Những gì chúng tôi sẽ làm ở đây là lắng nghe sự kiện

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

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

Một câu lệnh chuyển đổi được sử dụng ở trên để phát hiện khóa nào đã được nhấn và sau đó thực thi mã có liên quan. Lý do

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

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

Sự kết luận

Có rất nhiều cách để cải thiện trình phát video nhưng hướng dẫn đã trở nên quá lâu nên tôi phải dừng lại ở đây. Nếu bạn quan tâm đến việc mở rộng chức năng của người chơi, đây là một số ý tưởng:

• Thêm hỗ trợ cho chú thích và phụ đề.
• Thêm hỗ trợ tốc độ.
• Thêm khả năng chuyển tiếp nhanh hoặc tua lại video.
• Thêm khả năng chọn độ phân giải video (720p, 480p, 360p, 240p).

Tôi hy vọng hướng dẫn này là hữu ích cho bạn. Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng để lại nhận xét bên dưới và tôi sẽ liên hệ lại với bạn. Don Tiết quên kiểm tra mã nguồn đầy đủ trên GitHub.

Cảm ơn bạn đã đọc, và mã hóa hạnh phúc!

• #JavaScript