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ơnTrong 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
0 vào thẻ HTML để nó hiển thị.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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ó.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ả
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ử
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
4.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Đ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
5.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Điều này sẽ làm cho màn hình hiển thị
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
7.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
8.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
1video::-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
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
2video::-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
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
3video::-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
Điều này sẽ đặt chiều rộng thành
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Lưu ý rằng chúng tôi sử dụng thuộc tính
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
20.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Đ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
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..video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Cuối cùng, chúng ta sẽ tạo kiểu cho đường thời gian
21.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
22.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
23.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Chúng tôi cũng đã thêm biến
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Nếu video bị tạm dừng, chúng tôi sẽ phát video đó, chúng tôi thêm lớp
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Chúng tôi sử dụng
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 đó.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Chúng tôi cũng sẽ thêm một người nghe vào sự kiện
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
28.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Lưu ý rằng chúng tôi sử dụng
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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
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.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
Lưu ý rằng khi tạo video toàn màn hình, chúng tôi sử dụng
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ợ.video-player { width: 30rem; height: 16.5rem; position: relative; } video { width: 100%; height: 100%; background:black; }
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ẻ tag . Để 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ẻ