Hướng dẫn html5 video hide fullscreen button - nút ẩn video html5 toàn màn hình

Tôi nghĩ rằng bạn có thể thực hiện điều này bằng cách thay đổi CSS cho #document fragments, đây là những thông số kỹ thuật của DOM1 và được hỗ trợ bởi tất cả các trình duyệt, nhưng về kiểu dáng, tôi không chắc chắn.

Trình duyệt webkit đơn giản (Chrome trên Windows) Giải pháp cụ thể

Giải pháp sau đây là webkit cụ thể

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

Đây là fiddle cho nó.

Warning:

1. Điều này sẽ không hoạt động trên các trình duyệt có công cụ kết xuất ngoài webkit, ví dụ: Firefox hoặc Internet Explorer, hoặc các phiên bản Opera lỗi thời có chớp mắt/Presto.
2. Điều này có thể không hoạt động với việc triển khai các trình duyệt webkit trong các hệ điều hành khác với Windows, ví dụ: Safari trên macOS.

Update:

Sau khi nhiều độc giả phàn nàn rằng giải pháp nói trên không hoạt động cho một số trình duyệt nhất định, tôi đang cập nhật câu trả lời.

Chăm sóc các triển khai cụ thể của nhà cung cấp:

• Giải pháp trên là

  ::-webkit-slider-thumb

  3 cụ thể của trình duyệt và đã được kiểm tra bằng Chrome trên Windows.
• Việc triển khai Shadow Dom không được tiêu chuẩn hóa, và do đó, có thể thay đổi từ nhà cung cấp trình duyệt này sang nhà cung cấp khác.
• Hầu như tất cả các trình duyệt ngày nay đều có các công cụ phát triển tuyệt vời, nhưng một số tính năng đều bị khóa cố tình, nhưng có thể được mở với một nỗ lực nhỏ, ví dụ, trong Firefox, hầu hết các cấu hình như vậy có thể được truy cập trong trang

  ::-webkit-slider-thumb

  4.
• Các nhà phát triển được khuyên nên mở khóa các tính năng DOM bóng trong trình duyệt của họ.
• Sau đó, họ có thể kiểm tra thành phần

  ::-webkit-slider-thumb

  5

Cách kích hoạt lựa chọn Dom Shadow trong Chrome

• Truy cập Chrome> Công cụ phát triển> Cài đặt (Biểu tượng Gear)
• Dưới

  ::-webkit-slider-thumb

  6 Hãy tìm tùy chọn Show Tác nhân người dùng DOM DOMShow user agent shadow DOM option
• Kiểm tra (chọn) hộp
• Bạn sẽ có thể kiểm tra Shadow Dom bên dưới
• Quan sát kiểu dáng tương ứng của họ
• Bạn sẽ nhận thấy rằng chúng tương tự như các bộ chọn lớp giả

Một số tư vấn miễn phí không được yêu cầu cho ::-webkit-slider-thumb7

• Tìm giải pháp có thể dễ dàng như viết CSS với bộ chọn lớp giả
• Nhưng giống như mọi CSS khác, nó có thể đòi hỏi rất nhiều thử dùng thử
• Và bạn có thể trải qua rất nhiều sự thất vọng khi làm cho nó hoạt động
• Nhưng luôn luôn nhớ, nó đáng giá.

Ngoài ra, như @paulitto gợi ý, các phương thức DOM có thể được thực hiện sau khi xóa thuộc tính

::-webkit-slider-thumb

::-webkit-slider-thumb

Sau đây là một bài đăng của khách của Sara Soueidan. Tôi biết Sara thông qua tất cả các tác phẩm xuất sắc của cô ấy trên Codepen. Cô đã làm việc trên một số điều khiển video HTML5 tùy chỉnh và nhận thấy rằng các tùy chỉnh đã bị mất khi video chuyển sang chế độ toàn màn hình (ví dụ về điều đó xảy ra). Đào vào Shadow Dom, Sara tìm thấy một giải pháp

Nếu bạn đã từng làm việc với video HTML5 thì có lẽ bạn đã tự hỏi làm thế nào bạn có được một loạt các nút điều khiển, thanh trượt và ngón tay cái trượt trên trang của bạn, khi bạn chỉ thêm một thẻ

::-webkit-slider-thumb

Các trình duyệt thêm các điều khiển này dưới dạng một cây con Sub Sub của thẻ video vào kết xuất của tài liệu. Các yếu tố này (nút, thanh trượt, v.v.) là một phần của DOM, nhưng bạn có thể thực sự nhìn thấy chúng trong cây Dom chính, bạn chỉ thấy chúng được hiển thị trên trang. Nhiều hơn về điều này trong thời gian ngắn.

Vấn đề điều khiển video HTML5 ở chế độ toàn màn hình

Trong khi làm việc trên một khung video HTML5 tùy chỉnh gần đây, tôi đã tình cờ thấy một vấn đề mà rất nhiều nhà thiết kế và nhà phát triển vấp ngã trong lĩnh vực này. Thay vì hiển thị các điều khiển tùy chỉnh mà tôi đang thực hiện, các điều khiển trình duyệt gốc xuất hiện trên video khi nó vào chế độ toàn màn hình. Giống như rất nhiều người khác, tôi đã tìm kiếm xung quanh để tìm câu trả lời cho vấn đề này nhưng không gặp may mắn khi tìm thấy bất kỳ. (Cập nhật: Lỗi này được nộp trong Trình theo dõi lỗi Chrome).

Sau một số kiểm tra trong các công cụ phát triển, tôi thấy rằng:

1. Các điều khiển bản địa vẫn còn đó. Bằng cách đặt thuộc tính

   ::-webkit-slider-thumb

   8 của phần tử video thành

   ::-moz-range-track

   2, chúng tôi có thể ẩn các điều khiển nhưng vì một số lý do, khi vào chế độ toàn màn hình, chúng xuất hiện lại, mặc dù được ẩn trong chế độ màn hình bình thường. (Tại sao?). By setting the

   ::-webkit-slider-thumb

   8 attribute of the video element to

   ::-moz-range-track

   2, we are able to hide the controls but for some reason, when entering full-screen mode they reappear, despite being hidden in normal screen mode. (Why?)
2. Các điều khiển tùy chỉnh được ẩn bên dưới video ở chế độ toàn màn hình. Kiểm tra các điều khiển bằng các công cụ Dev cho thấy lý do các điều khiển được ẩn bên dưới là vì bảng kiểu của tác nhân người dùng (trong trường hợp này là bảng kiểu của Chrome) đã ghi đè các kiểu được áp dụng cho các điều khiển, với giá trị ____23 rất kỳ lạ, tôi phải nói !!. Inspecting the controls with the dev tools showed that the reason the controls were hidden below is because the user agent’s style sheet (in this case Chrome’s style sheet) was overriding the styles applied to the controls, with a very weird

   ::-moz-range-track

   3 value, I must say!

Làm thế nào để chúng ta làm cho công việc này? Làm thế nào để chúng tôi ngăn các điều khiển gốc xuất hiện ở chế độ toàn màn hình và hiển thị các điều khiển theo kiểu tùy chỉnh của riêng chúng tôi?

Điểm thứ hai rất dễ dàng: Chỉ cần ghi đè lên biểu định kiểu tác nhân người dùng. Chúng tôi làm điều đó tất cả thời gian trong các kiểu dáng của chúng tôi. Chúng tôi sẽ sớm nhận được điều này. Nhưng những gì về điểm đầu tiên? Làm thế nào chúng ta có thể ẩn các yếu tố mà trình duyệt nói thêm nhưng chúng ta có thể thấy trong cây Dom mà chúng ta đang làm việc?

Lưu ý rằng kỹ thuật được giải thích trong bài viết này để ẩn các điều khiển gốc chỉ hoạt động trong các trình duyệt hỗ trợ Shadow Dom.

Giới thiệu nhanh về Shadow Dom

Subtree của các phần tử dom được tạo bởi trình duyệt là cái mà chúng ta gọi là bóng tối của Dom Dom. Nói một cách rõ ràng, đó là một loạt các yếu tố DOM, giống như những yếu tố bạn đã quen thuộc, như

::-moz-range-track

::-moz-range-track

James Edwards tóm tắt chức năng của Shadow Dom một cách hoàn hảo trong bài viết của mình cho SitePoint:

Shadow Dom gói gọn nội dung bằng cách tạo các đoạn tài liệu. Thực tế, nội dung của DOM Shadow là một tài liệu khác, được hợp nhất với tài liệu chính để tạo ra đầu ra được hiển thị tổng thể.

Trong thực tế, một số trình duyệt đã sử dụng điều này để hiển thị một số tiện ích gốc của họ.

Lý do tại sao các trình duyệt làm điều này là do các nhà phát triển trình duyệt quyết định gói gọn một số yếu tố DOM để ẩn chúng với các nhà phát triển chúng tôi, vì vậy chúng tôi không quan tâm đến việc thực hiện các chi tiết của các yếu tố này, trong nỗ lực giúp chúng tôi dễ dàng hơn. Ngoài ra, như James Edwards cũng đã nói trong bài viết của mình:

Bởi vì nó bị cô lập, người dùng có thể vô tình phá vỡ nó, nên không có khả năng đặt tên xung đột với bất kỳ lớp học hoặc ID nào bạn sử dụng và CSS trên trang chính đã giành được ảnh hưởng đến nó.

Vì vậy, bây giờ chúng tôi biết rằng các điều khiển được thêm vào thẻ video chỉ là một phần của cây con Dom Dom được tạo cho thẻ này bởi trình duyệt.

Che giấu các điều khiển video gốc

Chúng ta cần có khả năng tạo kiểu cho các điều khiển là một phần của Shadow Dom, nhưng làm thế nào để chúng ta làm điều đó nếu các bộ chọn CSS thông thường mà chúng ta biết có thể truy cập vào các yếu tố Dom Shadow?

Sau khi đọc bài viết giới thiệu tuyệt vời này của Dimitri Glazkov, tôi đã học được rằng, có một khả năng thuộc tính giả tiện dụng, cho phép Shadow Dom Subtrees liên kết một mã định danh giả giả tùy tiện với một yếu tố trong phần con.

Điều đó có nghĩa là một số yếu tố bên trong Subtree Shadow Dom có ​​thể được tạo kiểu bằng cách nhắm mục tiêu chúng thông qua yếu tố giả liên quan của chúng. Nghe thật tuyệt!

Nhưng làm thế nào để chúng ta xác định yếu tố giả nào được liên kết với phần tử DOM bóng mà chúng ta cần tạo kiểu? Một số yếu tố ít nhiều được biết đến, giống như đầu vào phạm vi, có sẵn phần tử giả để tạo ra ngón tay cái của nó trong các trình duyệt WebKit

::-webkit-slider-thumb

Firefox cũng cung cấp hai yếu tố giả cho các đầu vào phạm vi kiểu ngay bây giờ khi nó hỗ trợ chúng bắt đầu từ phiên bản 23.0:

::-moz-range-track

và

::-moz-range-thumb

Nhưng những gì về các yếu tố giả ít được biết đến khác liên quan đến các yếu tố Dom Shadow khác? Những yếu tố giả nào được liên kết với họ? Để tìm hiểu, các công cụ Chrome Dev đến giải cứu!

Xác định các yếu tố giả liên quan đến các yếu tố DOM bóng tối

Một trong những tính năng tuyệt vời của các công cụ Chrome Dev là bạn có thể kiểm tra các mục tiêu của Shadow Dom trong bảng điều khiển các yếu tố giống như bạn sẽ kiểm tra cây Dom Dom thông thường. Tất cả những gì bạn phải làm là kích hoạt tính năng này:

1. Chuyển đến Cài đặt công cụ Dev (bằng cách nhấp vào biểu tượng bánh răng nhỏ ở phía dưới bên phải của công cụ Dev)
2. Trong tab Chung, hãy kiểm tra tùy chọn Show Show Shadow Dom
3. Khởi động lại các công cụ Dev (đóng và mở lại)

Bây giờ, khi bạn kiểm tra phần tử

::-webkit-slider-thumb

::-webkit-slider-thumb

Sau đó, giống như bạn có thể nhận được các quy tắc kiểu cho bất kỳ phần tử HTML nào nếu bạn nhấp vào nó trong bảng yếu tố, bạn có thể thấy các yếu tố giả liên quan đến cây con của bóng tối. Khá gọn gàng, hả? :)

::-moz-range-track

Vì vậy, đối với các điều khiển video, chúng ta có thể thấy từ ảnh chụp màn hình rằng có một phần tử giả gọi là

::-moz-range-track

Đặt

::-moz-range-thumb

::-webkit-media-controls {
  display:none !important;
}

Nhưng hãy nhớ rằng phần tử giả này được liên kết với

::-moz-range-track

::-moz-range-thumb

Vì vậy, trừ khi bạn muốn ẩn tất cả các điều khiển phương tiện gốc của trình duyệt, bạn sẽ cần chỉ định loại điều khiển phương tiện nào cần ẩn yếu tố giả:

video::-webkit-media-controls {
  display:none !important;
}

Điều này sẽ ẩn hoàn toàn các điều khiển gốc.

Một tùy chọn khác là bạn có thể đi sâu hơn trong cây con để tìm phần tử giả liên quan đến bên trong và cụ thể hơn

::-moz-range-thumb

Vì vậy, đi sâu hơn một cấp, chúng tôi có được phần tử giả liên quan đến bên trong

::-moz-range-thumb

video::-webkit-media-controls-enclosure {
  display:none !important;
}

Đặt thuộc tính

::-moz-range-thumb

::-moz-range-thumb

::-moz-range-thumb

::-moz-range-thumb

Và điều đó khá nhiều tất cả những gì bạn cần làm để ẩn các điều khiển gốc ở chế độ toàn màn hình. Đơn giản, phải không?

Hiển thị các điều khiển video tùy chỉnh

Đối với các điều khiển tùy chỉnh, chúng vẫn không xuất hiện trong bản demo của tôi sau khi ẩn các bản gốc, bởi vì, như bạn đã thấy trong ảnh chụp màn hình ở trên, bảng kiểu tác nhân người dùng có giá trị cho chỉ số z thành toàn bộ Chế độ màn hình:

Tôi không biết tại sao các nhà phát triển chọn giá trị này nói riêng, nhưng có thể là do, như Nate Volker đã chỉ ra trong nhận xét của mình dưới đây rằng số này là giá trị tối đa cho số nguyên có chữ ký 32 bit, có thể là kiểu dữ liệu của trình duyệt Các nhà phát triển sử dụng để biểu diễn các giá trị cho chỉ số z. Vì vậy, để đảm bảo các điều khiển tùy chỉnh có thể hiển thị, bạn cần đặt chỉ số z cho các điều khiển tùy chỉnh bằng hoặc cao hơn giá trị này.set the z-index for the custom controls to be equal to or higher than this value.

Đặt nó thành 2147483646 đã làm cho các điều khiển biến mất ở chế độ toàn màn hình trên Firefox và đôi khi (một lỗi?), Trong Chrome, vì vậy chỉ số Z cho thùng chứa điều khiển phải> = 2147483647.

.custom-video-controls {
  z-index: 2147483647;
}

Bản tóm tắt

Để ẩn các điều khiển gốc ở chế độ toàn màn hình trong các trình duyệt hỗ trợ bóng tối bạn cần:

1. Nhắm mục tiêu phần tử giả được liên kết với chúng:

   ::-moz-range-thumb

   9, mà bạn có thể tìm thấy bằng cách sử dụng các công cụ của Chrome, và kiểm tra Shadow Dom, và đặt nó hiển thị của nó thành không có, sau đó hiển thị các điều khiển theo kiểu tùy chỉnh của bạn
2. Đặt chỉ số z của các điều khiển tùy chỉnh của bạn thành giá trị cao hơn chỉ số z được cung cấp bởi bảng kiểu tác nhân người dùng.

Và điều đó khá nhiều nó!

Thử nghiệm

Xem các điều khiển video HTML5 tùy chỉnh PEN trong toàn màn hình của Chris Coyier (@Chriscoyier) trên CodePen.

Thế còn các trình duyệt khác mà don ủng hộ Shadow Dom?

Trong khi làm việc, tôi cũng đã kiểm tra kết quả trong Firefox. Đặt

::-moz-range-track

Chắc chắn, bạn có thể mong đợi hành vi tương tự trong các trình duyệt khác mà không ủng hộ Shadow Dom.

Cách duy nhất mà tôi tìm thấy để ẩn các điều khiển gốc trong các trình duyệt này là bao gồm các điều khiển gốc bằng các điều khiển tùy chỉnh, bằng cách định vị các điều khiển tùy chỉnh trên đầu chúng bằng cách sử dụng các kiểu CSS đơn giản và cơ bản nhắm mục tiêu vào chế độ toàn màn hình. Điều này che giấu các điều khiển gốc, nhưng cũng có một giới hạn: các điều khiển tùy chỉnh có thể có một nền tảng trong suốt, nếu không các điều khiển gốc sẽ hiển thị thông qua.
This hides the native controls, but also has a limitation: the custom controls can’t have a transparent background, otherwise the native controls will show through.

Có một giải pháp khả thi khác ở đây. Ông James Edwards đã lưu ý trong nhận xét của mình dưới đây rằng các điều khiển gốc có thể được ẩn trong chế độ toàn màn hình theo cách khác, mà không phải sử dụng Shadow Dom, bằng cách áp dụng chế độ toàn màn hình cho một phần tử, ví dụ,

Làm thế nào để bạn ẩn các điều khiển của một video trong HTML?

Làm thế nào tôi có thể ẩn một video HTML5 khi nó hoàn thành chơi?

Làm cách nào để tạo một thẻ video toàn màn hình?

Cú pháp chính xác để thêm video MP4 có thể điều khiển được của người dùng vào HTML là gì?