Điều khiển video tùy chỉnh html

Trước đó trong khóa học này, bạn đã học cách thêm video vào các trang web bằng phần tử. Sau khi làm như vậy, bạn nhận thấy rằng trình phát video tích hợp hơi khác một chút trong mọi trình duyệt. Nếu bạn muốn một trình phát trông nhất quán trên tất cả các trình duyệt hoặc nếu bạn chỉ muốn một trình phát duy nhất của riêng bạn, bạn hoàn toàn có thể làm điều đó với JavaScript

Trong bài học này, bạn sẽ sử dụng JavaScript để xây dựng các điều khiển tùy chỉnh để phát video của mình và sẽ sử dụng các điều khiển tùy chỉnh của bạn để thay thế các điều khiển tích hợp sẵn của trình duyệt

Kết quả của người học

Khi hoàn thành bài tập này

• bạn sẽ có thể giải thích API là gì và cách bạn có thể sử dụng nó để kiểm soát nội dung của các trang web
• bạn sẽ có thể sử dụng JavaScript để kiểm soát phần tử video HTML5

API phương tiện HTML5

Khi bạn đã nhúng phương tiện vào trang web của mình bằng các phần tử HTML5 mới, bạn có thể kiểm soát chúng bằng mã JavaScript. Điều này là do HTML5 có API cho phép kiểm soát bên ngoài các phần tử này. API là viết tắt của "giao diện chương trình ứng dụng" và nó bao gồm một tập hợp các biến và phương thức có thể được truy cập bằng các tập lệnh hoặc chương trình bên ngoài. API phổ biến trên web. Một vài ví dụ phổ biến bao gồm

Tài liệu về các API chẳng hạn như các API được liên kết ở trên là tài liệu kỹ thuật và ban đầu có thể khiến bạn choáng ngợp, nhưng bên trong tất cả các chi tiết kỹ thuật thường là một số ví dụ đơn giản để giúp bạn bắt đầu

Tài liệu chính thức cho API phương tiện HTML5 có trong thông số HTML5. Các hoạt động sau đây cung cấp cho bạn cái nhìn đơn giản hơn nhiều về những điều cơ bản

Các hoạt động

• Mở video. html trong cả trình chỉnh sửa web và trình duyệt của bạn
• Trong mã nguồn của bạn, hãy thêm thuộc tính id vào phần tử của bạn. Id có thể là bất kỳ thứ gì, nhưng giả sử bạn sử dụng id="myvideo". Việc thêm id giúp tham chiếu video bằng JavaScript dễ dàng hơn
• Xóa thuộc tính điều khiển khỏi phần tử. Bạn sẽ xây dựng các điều khiển của riêng mình, vì vậy bạn không cần các điều khiển tích hợp của trình duyệt nữa
• Bên dưới thành phần video, hãy thêm một thành phần mới

  phần tử và lấp đầy nó bằng các phần tử sẽ được sử dụng để điều khiển trình phát, như thế này.

  Phát Tạm dừng Nhanh hơn Chậm hơn To hơn Nhẹ nhàng hơn

  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, phần tử này sẽ là nơi chứa phần tử video và các điều khiển

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

  2

  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ó

  

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  4

  Đ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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  5

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

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

  40 để đả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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  7

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  8

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  41 và

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

  42 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::-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

  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::-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

  2

  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::-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 sẽ đặt chiều rộng thành

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

  43, trong đó

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

  44 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

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

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

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

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

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

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

  46 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  20

  Đ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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  49. 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  21

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  22

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  23

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

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

  50 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  51. 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  24

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  52 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  52 là vì 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

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

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

  25

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  55 đượ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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  26

  Chúng tôi sử dụng

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

  56 và

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

  57 để 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  46 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  59 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  27

  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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  28

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

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

  70 để 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  50. 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  29

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

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

  72,

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

  73 hoặc

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

  74 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-player {
    width: 30rem;
    height: 16.5rem;
    position: relative;
  }
  video {
    width: 100%;
    height: 100%;
    background:black;
  }

  75,

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

  76 hoặc

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

  77 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

  Sự 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

  Điều khiển trong HTML video LÀ GÌ?

  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.

  Làm cách nào để thêm tùy chọn video trong HTML?

  HTML cho phép phát video trong trình duyệt web bằng cách sử dụng thẻ . Để nhúng video vào trang web, chúng tôi sử dụng phần tử src để đề cập đến địa chỉ tệp và các thuộc tính chiều rộng và chiều cao được sử dụng để xác định kích thước của nó. Thí dụ. Trong ví dụ này, chúng tôi đang sử dụng thẻ