Điều khiển tùy chỉnh video html5 toàn màn hình

Trình phát video ví dụ của chúng tôi hiển thị một clip từ một bộ phim nguồn mở có tên là Tears of Steel và bao gồm các điều khiển video điển hình

Ghi chú. Bạn có thể xem ví dụ đang chạy trực tiếp hoặc xem mã nguồn trên GitHub

Để bắt đầu, chúng ta hãy xem HTML tạo nên trình phát

Trước hết, phần tử

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

<figure id="videoContainer">
  <video id="video" controls preload="metadata" poster="img/poster.jpg">
    <source
      src="video/tears-of-steel-battle-clip-medium.mp4"
      type="video/mp4" />
    <source
      src="video/tears-of-steel-battle-clip-medium.webm"
      type="video/webm" />
    <source
      src="video/tears-of-steel-battle-clip-medium.ogg"
      type="video/ogg" />
    
    <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4a>
  video>
  <figcaption>
    © Blender Foundation |
    <a href="http://mango.blender.org">mango.blender.orga>
  figcaption>
figure>

Mặc dù trình phát này sẽ xác định bộ điều khiển tùy chỉnh của riêng mình, nhưng thuộc tính

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

Hình ảnh áp phích được xác định cho video và thuộc tính

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

Ghi chú. IE9 hoạt động khác với hầu hết các trình duyệt khác khi thuộc tính

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

Ba nguồn video khác nhau được cung cấp cho trình phát. MP4, WebM và Ogg. Việc sử dụng các định dạng nguồn khác nhau này mang lại cơ hội tốt nhất để được hỗ trợ trên tất cả các trình duyệt hỗ trợ video HTML. Để biết thêm thông tin về các định dạng video và khả năng tương thích với trình duyệt, hãy xem

Đoạn mã trên sẽ cho phép phát lại video trong hầu hết các trình duyệt, sử dụng bộ điều khiển mặc định của trình duyệt. Bước tiếp theo là xác định bộ điều khiển tùy chỉnh, cũng bằng HTML, sẽ được sử dụng để điều khiển video

Hầu hết các điều khiển video mặc định của trình duyệt đều có chức năng sau

• Tạm dừng chơi
• Tắt tiếng
• Kiểm soát âm lượng
• Thanh tiến trình
• Tiến về phía trước
• Đi toàn màn hình

Bộ điều khiển tùy chỉnh cũng sẽ hỗ trợ chức năng này, với việc bổ sung nút dừng

Một lần nữa, HTML khá đơn giản, sử dụng một danh sách không có thứ tự với

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Mỗi nút được cấp một

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

Ban đầu, các điều khiển được ẩn bằng CSS

// Hide the default controls
video.controls = false;

// Display the user defined video controls
videoControls.style.display = 'block';

Tất nhiên, bộ điều khiển tùy chỉnh này hiện vô dụng và không làm được gì. Hãy cải thiện tình hình với JavaScript

HTML đi kèm với API phương tiện JavaScript cho phép nhà phát triển truy cập và kiểm soát phương tiện HTML. API này sẽ được sử dụng để làm cho bộ kiểm soát tùy chỉnh được xác định ở trên thực sự làm điều gì đó. Ngoài ra, nút toàn màn hình sẽ sử dụng API toàn màn hình, một API khác của W3C kiểm soát khả năng trình duyệt web hiển thị ứng dụng bằng cách sử dụng toàn màn hình máy tính của bạn

Trước khi xử lý các nút riêng lẻ, cần thực hiện một số cuộc gọi khởi tạo

Để bắt đầu, trước tiên bạn nên kiểm tra xem trình duyệt có thực sự hỗ trợ phần tử

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

const supportsVideo = !!document.createElement('video').canPlayType;
if (supportsVideo) {
   // set up custom controls
   // …
}

Khi đã được xác nhận rằng trình duyệt thực sự hỗ trợ video HTML, đã đến lúc thiết lập các điều khiển tùy chỉnh. Một số biến trỏ đến các phần tử HTML được yêu cầu

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

Như đã đề cập trước đó, các điều khiển mặc định của trình duyệt hiện cần được tắt và các điều khiển tùy chỉnh cần được hiển thị

// Hide the default controls
video.controls = false;

// Display the user defined video controls
videoControls.style.display = 'block';

Khi đã xong, một biến trỏ đến từng nút hiện được yêu cầu

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

Sử dụng các tay cầm này, giờ đây các sự kiện có thể được gắn vào từng nút điều khiển tùy chỉnh khiến chúng có tính tương tác. Hầu hết các nút này đều yêu cầu thêm một trình xử lý sự kiện

// Hide the default controls
video.controls = false;

// Display the user defined video controls
videoControls.style.display = 'block';

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

Khi một sự kiện

// Hide the default controls
video.controls = false;

// Display the user defined video controls
videoControls.style.display = 'block';

// Hide the default controls
video.controls = false;

// Display the user defined video controls
videoControls.style.display = 'block';

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

API Phương tiện không có phương thức

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

mute.addEventListener('click', (e) => {
  video.muted = !video.muted;
});

Nút tắt tiếng là nút chuyển đổi đơn giản sử dụng thuộc tính

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});

Hai nút điều chỉnh âm lượng đã được xác định, một để tăng âm lượng và một để giảm âm lượng. Hàm do người dùng xác định,

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Chức năng này sử dụng thuộc tính

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

Khi phần tử

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

Lý tưởng nhất là giá trị chính xác của thuộc tính

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Thật không may, trong một số trình duyệt dành cho thiết bị di động, khi

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

Một sự kiện khác,

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Khi sự kiện

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

mute.addEventListener('click', (e) => {
  video.muted = !video.muted;
});

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

Quay lại vấn đề

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

stop.addEventListener('click', (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
});

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

playpause.addEventListener('click', (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Ghi chú. để biết thêm thông tin và ý tưởng về thanh tiến trình và phản hồi đệm, hãy đọc Lưu đệm phương tiện, tìm kiếm và phạm vi thời gian

Một tính năng khác của hầu hết các bộ điều khiển video mặc định của trình duyệt là khả năng nhấp vào thanh tiến trình của video để "bỏ qua" đến một điểm khác trong video. Điều này cũng có thể đạt được bằng cách thêm một trình lắng nghe sự kiện

// Hide the default controls
video.controls = false;

// Display the user defined video controls
videoControls.style.display = 'block';

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Đoạn mã này sử dụng vị trí được nhấp để (đại khái) tìm ra vị trí trong phần tử

const videoContainer = document.getElementById('videoContainer');
const video = document.getElementById('video');
const videoControls = document.getElementById('video-controls');

const playpause = document.getElementById('playpause');
const stop = document.getElementById('stop');
const mute = document.getElementById('mute');
const volinc = document.getElementById('volinc');
const voldec = document.getElementById('voldec');
const progress = document.getElementById('progress');
const progressBar = document.getElementById('progress-bar');
const fullscreen = document.getElementById('fs');

API toàn màn hình phải dễ sử dụng. người dùng nhấp vào một nút, nếu video ở chế độ toàn màn hình. hủy nó, nếu không thì vào chế độ toàn màn hình

Than ôi, nó đã được triển khai trong các trình duyệt theo một số cách kỳ lạ và tuyệt vời, đòi hỏi nhiều mã bổ sung để kiểm tra các phiên bản thuộc tính và phương thức có tiền tố khác nhau để gọi đúng.

Khả năng hiển thị của nút toàn màn hình tùy thuộc vào việc trình duyệt có hỗ trợ API toàn màn hình hay không và nó có được bật hay không

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Đương nhiên, nút toàn màn hình cần thực sự làm một việc gì đó, vì vậy, giống như các nút khác, trình xử lý sự kiện

// Hide the default controls
video.controls = false;

// Display the user defined video controls
videoControls.style.display = 'block';

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Hàm

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Nếu trình duyệt đang ở chế độ toàn màn hình thì phải thoát ra và ngược lại. Điều thú vị là

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});

Một hàm do người dùng xác định khác —

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});

<ul id="video-controls" class="controls">
  <li><button id="playpause" type="button">Play/Pausebutton>li>
  <li><button id="stop" type="button">Stopbutton>li>
  <li class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar">span>
    progress>
  li>
  <li><button id="mute" type="button">Mute/Unmutebutton>li>
  <li><button id="volinc" type="button">Vol+button>li>
  <li><button id="voldec" type="button">Vol-button>li>
  <li><button id="fs" type="button">Fullscreenbutton>li>
ul>

Điều này được sử dụng để đặt một số CSS cơ bản nhằm cải thiện kiểu dáng của các điều khiển tùy chỉnh khi chúng ở chế độ toàn màn hình (xem mã mẫu để biết thêm chi tiết). Khi một video chuyển sang chế độ toàn màn hình, nó thường hiển thị một thông báo cho biết rằng người dùng có thể nhấn phím Esc để thoát khỏi chế độ toàn màn hình, do đó, mã cũng cần lắng nghe các sự kiện liên quan để gọi hàm

volinc.addEventListener('click', (e) => {
  alterVolume('+');
});
voldec.addEventListener('click', (e) => {
  alterVolume('-');
});