Làm cách nào để thêm nút phát vào video trong css?

Question

❮ Tham chiếu DOM âm thanh/video HTML

Nội dung chính Show

Ví dụ

Video có các nút phát và tạm dừng

var vid = tài liệu. getElementById("Video của tôi");

function playVid() {
vid. phát();
}

function pauseVid() {
vid. tạm dừng();
}

Tự mình thử »

Định nghĩa và cách sử dụng

Phương thức play() bắt đầu phát âm thanh hoặc video hiện tại

Mẹo. Sử dụng phương thức pause() để tạm dừng âm thanh/video hiện tại

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương thức

Phương pháp chơi () Yes9. 0CóCóCó

cú pháp

Thông số

Giá trị trả về

❮ Tham chiếu DOM âm thanh/video HTML

Trong hướng dẫn trước, chúng ta đã tìm hiểu cách tạo kiểu cho phần tử âm thanh bằng CSS. Chúng tôi đã xem xét cách thực hiện với bộ chọn giả của âm thanh và cách tạo trình phát âm thanh của riêng chúng tôi để linh hoạt hơn trong việc tạo kiểu cho nó

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo kiểu cho phần tử video bằng CSS. Tương tự như hướng dẫn trước, chúng ta sẽ xem cách thực hiện với bộ chọn giả và cách tạo trình phát video của riêng mình

Sử dụng bộ chọn phần tử giả

Theo mặc định, các phần tử video không hiển thị. Chúng ta cần thêm thuộc tính

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

0 vào thẻ HTML để nó hiển thị

Phần tử video mặc định

Theo mặc định, đây là giao diện của phần tử video

Lưu ý rằng phần tử video mặc định trông khác nhau trên mọi trình duyệt

Bộ chọn phần tử giả video

Dưới đây là bộ chọn phần tử giả video mà chúng ta có thể sử dụng để tạo kiểu cho phần tử video

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

Tuy nhiên, chúng ta sẽ thấy trong các ví dụ bên dưới rằng kiểu dáng với các bộ chọn này hầu như chỉ hoạt động với Chrome

Vì vậy, bạn nên xem các ví dụ bên dưới trên Chrome để biết cách hoạt động của kiểu dáng

Style Video Player Tổng Container

Để định kiểu vùng chứa chung của trình phát video, bao gồm tất cả các phần tử trong trình phát video, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

1. Trong ví dụ dưới đây, chúng tôi sử dụng nó để thay đổi màu nền của trình phát video

Nút phát phong cách

Để tạo kiểu cho nút phát của trình phát video, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

2. Trong ví dụ dưới đây, chúng tôi thêm màu nền và bán kính đường viền cho nút phát

Thanh trượt âm lượng kiểu

Để tạo kiểu cho thanh trượt âm lượng, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

3. Trong ví dụ bên dưới, chúng tôi thêm màu nền vào thanh trượt âm lượng cũng như thực hiện một số thay đổi trong phần đệm và lề của nó

Nút tắt tiếng kiểu

Để tạo kiểu cho nút tắt tiếng, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

4. Trong ví dụ bên dưới, chúng tôi thêm màu nền cũng như bán kính đường viền cho nút tắt tiếng

Dòng thời gian phong cách

Để tạo kiểu cho dòng thời gian của video, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

5. Trong ví dụ bên dưới, chúng tôi thêm màu nền cũng như chơi với phần đệm và lề của dòng thời gian

Phong cách Giờ hiện tại

Để tạo kiểu cho thời gian hiện tại của video, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

6. Trong ví dụ bên dưới, chúng tôi thay đổi màu văn bản của thời gian hiện tại

Phong cách thời gian còn lại

Để tạo kiểu cho thời gian còn lại của video, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

7. Trong ví dụ dưới đây, chúng tôi thay đổi màu văn bản của thời gian còn lại

Tạo kiểu cho nút toàn màn hình

Để tạo kiểu cho nút toàn màn hình của trình phát video, chúng ta có thể sử dụng bộ chọn phần tử giả

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

8. Trong ví dụ bên dưới, chúng tôi thay đổi màu nền cũng như bán kính đường viền của nút

Tạo trình phát tùy chỉnh

Trong phần này, chúng tôi sẽ giới thiệu cách tạo trình phát video tùy chỉnh. Tạo trình phát video tùy chỉnh đảm bảo rằng video trông giống nhau trên tất cả các trình duyệt, thay vì kiểu của chúng tôi được hỗ trợ bởi một số trình duyệt chứ không phải trình duyệt khác

Khi tạo trình phát tùy chỉnh, điều đó có nghĩa là chúng tôi cũng phải thêm hệ thống dây trong JavaScript để đảm bảo tất cả các chức năng của video được thêm vào video

Trước tiên, chúng ta sẽ bắt đầu với kiểu dáng, sau đó chuyển sang JavaScript. Bạn có thể tìm thấy trình phát video đầy đủ ở cuối phần này

Video là từ W3Schools và các biểu tượng là từ Heroicons

Tạo kiểu với CSS

Trước tiên, chúng tôi sẽ thêm video bên trong phần tử

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

9, đây sẽ là vùng chứa cho phần tử video và các điều khiển

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

1

Sau đó, chúng tôi sẽ thêm một kiểu dáng đơn giản liên quan đến kích thước của phần tử video

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

Điều này sẽ hiển thị video, nhưng nó sẽ không có bất kỳ điều khiển nào nên chúng tôi chưa thể tương tác với nó

Làm cách nào để thêm nút phát vào video trong css?

Tiếp theo, chúng ta sẽ thêm các điều khiển. Thêm phần sau vào sau phần tử video

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

3

Điều này bao gồm nút phát, dòng thời gian dưới dạng phần tử phạm vi, phần tử âm thanh để tắt tiếng và bật tiếng video cũng như nút toàn màn hình

Đầu tiên, chúng ta sẽ thêm kiểu dáng cho vùng chứa các điều khiển. Thêm CSS sau

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

4

Điều này sẽ làm cho màn hình hiển thị

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

30 để đảm bảo các mục được đặt cạnh nhau một cách hoàn hảo. Nó cũng sẽ định vị các điều khiển ở cuối video và thêm nền chuyển màu từ trong suốt sang đen

Chúng tôi cũng sẽ thêm một số CSS để ẩn các điều khiển khi video đang phát và chỉ hiển thị chúng khi di chuột

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

6

Tiếp theo, chúng ta sẽ tạo kiểu cho các nút. Chúng tôi sẽ thêm kiểu dáng chung sẽ phổ biến cho tất cả các nút

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

7

Thao tác này sẽ xóa màu nền và đường viền mặc định của nút và thêm một số chuyển đổi độ mờ đẹp mắt khi di chuột. Chúng tôi cũng đang đặt

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

31 và

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

32 của các biểu tượng SVG bên trong các nút

Sau đó, chúng tôi sẽ thêm kiểu dáng cụ thể hơn cho từng nút để chỉ định kích thước của các biểu tượng. Điều này chỉ là do một số nút có thể lớn hơn các nút khác

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

0

Cuối cùng, chúng ta cần tạo kiểu cho dòng thời gian. Dòng thời gian là một yếu tố phạm vi đầu vào

Để tạo kiểu cho phần tử đầu vào phạm vi, chúng ta có thể sử dụng các bộ chọn giả CSS sau

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

1

Ba cái đầu tiên là bộ chọn giả trên nhiều trình duyệt cho ngón tay cái được sử dụng để thay đổi giá trị phạm vi. Ba cái thứ hai là bộ chọn giả trên nhiều trình duyệt cho rãnh của đầu vào phạm vi

Trước tiên, chúng tôi sẽ thêm kiểu dáng cho toàn bộ thành phần phạm vi dòng thời gian

.video-player {
  width: 30rem;
  height: 16.5rem;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  background:black;
}

2

Điều này sẽ đặt chiều rộng thành

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

33, trong đó

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

34 là chiều rộng của các nút kết hợp với khoảng trống thừa. Chúng tôi cũng đặt màu nền của bản nhạc

Lưu ý rằng chúng tôi sử dụng thuộc tính

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

35 để biểu thị thời gian đã trôi qua trong video.

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

36 sẽ được sử dụng để biểu thị tiến trình của video. Ban đầu, nó là

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

37. Sau này, chúng tôi sẽ thay đổi

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

36 dựa trên tiến độ video trong JavaScript

Tiếp theo, chúng ta sẽ tạo kiểu ngón tay cái được sử dụng để thay đổi thời gian hiện tại của video

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

10

Điều này đặt màu của nó thành màu trắng với một số độ mờ. Sau đó, khi di chuột, chúng tôi đặt độ mờ thành

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

39. Lưu ý rằng các thuộc tính kiểu được lặp lại cho các bộ chọn giả đa nền tảng. Chúng tôi cũng đang đặt chiều rộng, chiều cao, bán kính đường viền, v.v.

Cuối cùng, chúng ta sẽ tạo kiểu cho đường thời gian

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

11

Thao tác này chỉ xóa giao diện mặc định của bản nhạc

Trình phát của chúng tôi đã sẵn sàng trực quan và sẽ trông như thế này

Việc còn lại là kết nối các điều khiển bằng JavaScript và thêm các chức năng video

Thêm chức năng với JavaScript

Chúng tôi sẽ bắt đầu bằng cách khai báo một số biến mà chúng tôi sẽ sử dụng trong mã của mình. Chúng ta sẽ khai báo các biến liên quan đến biểu tượng của các nút

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

12

Lý do chúng tôi khai báo chúng trong JavaScript là để thay đổi giữa biểu tượng tạm dừng và phát dựa trên việc video có đang phát hay không và để thay đổi giữa biểu tượng âm thanh và tắt tiếng dựa trên việc video có bị tắt tiếng hay không

Sau đó, chúng tôi sẽ khai báo các biến cho các thành phần HTML mà chúng tôi đã tạo để có thể đính kèm trình xử lý sự kiện và hơn thế nữa

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

13

Chúng tôi cũng đã thêm biến

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

40 mà chúng tôi sẽ sử dụng sau này để chuyển trạng thái toàn màn hình

Chúng ta sẽ bắt đầu với chức năng cơ bản nhất trong trình phát video đang phát hoặc tạm dừng video. Chúng tôi sẽ thêm một trình lắng nghe sự kiện vào sự kiện nhấp chuột của

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

41. Bên trong bộ nghe, chúng tôi sẽ kiểm tra xem video có bị tạm dừng hay không với thuộc tính bị tạm dừng trên các phần tử video và phương tiện

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

14

Nếu video bị tạm dừng, chúng tôi sẽ phát video đó, chúng tôi thêm lớp

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

42 vào vùng chứa video và chúng tôi thay đổi biểu tượng thành biểu tượng tạm dừng. Lý do chúng tôi thêm lớp

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

42 là trong CSS trước đó chúng tôi đã thêm kiểu dáng để ẩn các điều khiển khi phát video

Nếu dùng thử ngay bây giờ, bạn sẽ thấy trình phát video hiện cho phép bạn phát và tạm dừng video

Chúng tôi cũng sẽ thêm một trình nghe vào sự kiện

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

44, được kích hoạt khi video kết thúc, để thay đổi biểu tượng phát lại

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

15

Tiếp theo, chúng tôi sẽ thêm chức năng cho dòng thời gian. Trước tiên, chúng tôi sẽ thêm một trình nghe vào sự kiện phần tử phương tiện

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

45 được kích hoạt khi video đang phát để cho biết thời gian hiện tại của video đang thay đổi. Chúng tôi sẽ sử dụng nó để thay đổi kích thước nền của đường thời gian như chúng tôi đã đề cập ở trên trong phần CSS

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

16

Chúng tôi sử dụng

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

46 và

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

47 để tính toán tiến trình theo tỷ lệ phần trăm, sau đó thay đổi giá trị của phần tử phạm vi dòng thời gian và thuộc tính CSS

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

36 của nó dựa trên tỷ lệ phần trăm đó

Chúng tôi cũng sẽ thêm một người nghe vào sự kiện

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

49 trên phần tử phạm vi dòng thời gian. Khi người dùng kéo ngón tay cái, thời gian hiện tại của video sẽ thay đổi dựa trên vị trí người dùng đã chọn

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

17

Nếu bạn kiểm tra nó ngay bây giờ, bạn sẽ thấy rằng khi video tiến triển, bạn sẽ có thể xem tiến trình trong phần tử dòng thời gian. Bạn cũng có thể tìm kiếm video bằng dòng thời gian

Tiếp theo, chúng tôi sẽ thêm chức năng cho nút âm thanh. Khi bấm vào đó, trong phần nghe chúng ta sẽ tắt tiếng video nếu có âm thanh và bật tiếng nếu ngược lại. Chúng tôi cũng sẽ thay đổi biểu tượng của nút âm thanh dựa trên việc video có bị tắt tiếng hay không

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

18

Lưu ý rằng chúng tôi sử dụng

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

60 để xác định xem video hiện có bị tắt tiếng hay không và để thay đổi xem video đó có bị tắt tiếng hay không

Nếu bạn kiểm tra ngay bây giờ, bạn sẽ có thể tắt tiếng và bật tiếng video bằng nút âm thanh

Cuối cùng, chúng tôi sẽ thêm chức năng của nút toàn màn hình. Khi nút được nhấp, chúng tôi sẽ kiểm tra xem video có ở chế độ toàn màn hình hay không bằng cách sử dụng biến

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

40. Nếu video không ở chế độ toàn màn hình, chúng tôi sẽ tạo toàn màn hình. Nếu nó đã ở chế độ toàn màn hình, chúng tôi sẽ thoát toàn màn hình

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

19

Lưu ý rằng khi tạo video toàn màn hình, chúng tôi sử dụng

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

62,

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

63 hoặc

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

64 dựa trên những gì trình duyệt hiện tại hỗ trợ. Tương tự, để thoát toàn màn hình, chúng tôi sử dụng

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

65,

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

66 hoặc

video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

67 dựa trên những gì trình duyệt hiện tại hỗ trợ

Nếu bạn kiểm tra nút toàn màn hình ngay bây giờ, bạn sẽ có thể chuyển sang và từ chế độ toàn màn hình cho video

Trình phát video cuối cùng

Video của chúng tôi hiện đã hoạt động đầy đủ với các chức năng phát, tạm dừng, tắt tiếng, bật tiếng, toàn màn hình và tìm kiếm. Bạn có thể xem đầy đủ trình phát video bên dưới

Phần kết luận

Khi tạo kiểu cho các thành phần video, bạn có thể sử dụng bộ chọn giả. Tuy nhiên, kiểu dáng sẽ không được hỗ trợ bởi tất cả các trình duyệt và kiểu dáng trình phát giống nhau không được đảm bảo

Thay vào đó, bạn sẽ cần tạo trình phát video tùy chỉnh của riêng mình như chúng tôi đã làm ở trên. Bạn có thể thêm bao nhiêu chức năng tùy thích. Tạo trình phát tùy chỉnh của riêng bạn là một giải pháp linh hoạt và tốt hơn nhiều

Thuộc tính nào giúp bạn thêm nút phát vào video?

Thuộc tính điều khiển là thuộc tính boolean. Khi xuất hiện, nó chỉ định rằng các điều khiển video sẽ được hiển thị. Điều khiển video nên bao gồm. Chơi.

Bạn có thể nhúng video vào CSS không?

Với những tiến bộ gần đây trong ngành công nghệ, nhà phát triển có thể nhúng video vào nhiều trang web khác nhau. HTML và CSS đã nổi lên như một số công cụ phổ biến để nhúng video .

Làm cách nào để thêm các điều khiển video trong JavaScript?

4. 1 Thêm một video đơn giản . createElement("video") rồi đặt các thuộc tính của video như nguồn, điều khiển, v.v. . Đây là một ví dụ thêm video bên trong div có id = "myVideo".

Phần tử HTML chính xác để phát video là gì?

Phần tử HTML

được sử dụng để hiển thị video trên trang web.

programming css