Thời lượng ẩn âm thanh Html

Plyr là trình phát phương tiện HTML5, YouTube và Vimeo đơn giản, nhẹ, có thể truy cập và tùy chỉnh hỗ trợ các trình duyệt

Kiểm tra bản demo - - Slack

Đặc trưng

• 📼HTML Video & Audio, YouTube & Vimeo - hỗ trợ các định dạng chính
• 💪Có thể truy cập - hỗ trợ đầy đủ cho phụ đề VTT và trình đọc màn hình
• 🔧 - làm cho trình phát trông như bạn muốn với đánh dấu bạn muốn
• 😎HTML sạch - sử dụng đúng thành phần.
  4 cho âm lượng và
  5 cho tiến độ và tốt,
  6 cho các nút. Không có hack nút
  7 hoặc
  8
• 📱Responsive - hoạt động với mọi kích thước màn hình
• 💵 - kiếm tiền từ video của bạn
• 📹 - hỗ trợ cho hls. js, Shaka và dấu gạch ngang. phát lại trực tuyến js
• 🎛 - chuyển đổi phát lại, âm lượng, tìm kiếm, v.v. thông qua API được tiêu chuẩn hóa
• 🎤 - không phải loay hoay với các API của Vimeo và YouTube, tất cả các sự kiện đều được chuẩn hóa theo các định dạng
• 🔎 - hỗ trợ chế độ toàn màn hình gốc với dự phòng ở chế độ "toàn cửa sổ"
• ⌨️ - hỗ trợ phím tắt
• 🖥Hình trong hình - hỗ trợ chế độ hình trong hình
• 📱Playsinline - hỗ trợ thuộc tính
  9
• 🏎Điều khiển tốc độ - điều chỉnh tốc độ nhanh chóng
• 📖Nhiều phụ đề - hỗ trợ nhiều phụ đề gốc
• 🌎i18n hỗ trợ - hỗ trợ quốc tế hóa các điều khiển
• 👌 - hỗ trợ hiển thị hình thu nhỏ xem trước
• 🤟Không có khung - được viết bằng JavaScript ES6 "vanilla", không cần jQuery
• 💁‍♀️Sass - để đưa vào quy trình xây dựng của bạn

trình diễn

Bạn có thể dùng thử Plyr trong Codepen bằng các mẫu tối thiểu của chúng tôi. Video HTML5, âm thanh HTML5, YouTube, Vimeo. Đối với Truyền phát, chúng tôi cũng có tích hợp ví dụ với. dấu gạch ngang. js, Hls. js và Trình phát Shaka

Cài đặt nhanh

HTML

Plyr mở rộng dựa trên đánh dấu phần tử phương tiện HTML5 tiêu chuẩn, vì vậy đó là tất cả những gì bạn cần cho các loại đó

Video HTML5

Ghi chú. Hình ảnh áp phích phải được chỉ định bằng cách sử dụng

0. Điều này là để ngăn nó được tải xuống hai lần. Nếu bạn chắc chắn rằng hình ảnh sẽ được lưu trong bộ nhớ cache, bạn vẫn có thể sử dụng thuộc tính

1 để nâng cao lũy tiến thực sự

Âm thanh HTML5

Đối với trình phát YouTube và Vimeo, Plyr sử dụng tính năng nâng cao lũy tiến để nâng cao các bản nhúng

2 mặc định. Dưới đây là một số ví dụ. Tên lớp

3 sẽ làm cho quá trình nhúng phản hồi nhanh. Bạn có thể thêm các tham số truy vấn

4,

5,

6 [chỉ YouTube] và

9 [chỉ YouTube] vào URL và chúng sẽ tự động được đặt làm tùy chọn cấu hình. Đối với YouTube,

8 phải được cập nhật để phản ánh tên miền mà bạn đang lưu trữ phần nhúng hoặc bạn có thể chọn bỏ qua nó

YouTube

Chúng tôi khuyên bạn nên cải tiến liên tục với các trình phát được nhúng. Bạn có thể chọn sử dụng một

2 làm phần tử nguồn [mà Plyr sẽ dần dần nâng cao] hoặc một tiêu chuẩn không có thật là

80 với hai thuộc tính dữ liệu thiết yếu -

81 và

82

1

Ghi chú. Tên lớp

3 sẽ làm cho trình phát phản ứng nhanh 16. 9 nhúng iframe [phổ biến nhất]. Khi plyr tự khởi động, tùy chọn cấu hình

84 tùy chỉnh của bạn sẽ được sử dụng

Hoặc phương pháp tăng cường không tăng dần

80

Ghi chú.

82 có thể là ID video hoặc URL cho phương tiện

Vimeo

Tương tự như YouTube ở trên

Hoặc phương pháp tăng cường không tăng dần

80

8

JavaScript

Bạn có thể sử dụng Plyr làm mô-đun ES6 như sau

0

Ngoài ra, bạn có thể bao gồm tập lệnh

88 trước thẻ đóng

89 và sau đó trong JS của bạn, hãy tạo một phiên bản Plyr mới như bên dưới

3

Xem để biết thêm thông tin về thiết lập nâng cao

Bạn có thể sử dụng CDN của chúng tôi [do Fastly cung cấp] cho JavaScript. Có 2 phiên bản; . Đề xuất của tôi là quản lý các polyfill một cách riêng biệt như một phần của ứng dụng của bạn nhưng để dễ dàng hơn, bạn có thể sử dụng bản dựng polyfill

4

hoặc là

5

CSS

Bao gồm biểu định kiểu

00 vào

01 của bạn

0

Nếu bạn muốn sử dụng CDN của chúng tôi [do Fastly cung cấp] cho CSS mặc định, bạn có thể sử dụng cách sau

1

Sinh vật SVG

Sprite SVG được tải tự động từ CDN của chúng tôi [do Fastly cung cấp]. Để thay đổi điều này, hãy xem bên dưới. Để tham khảo, sprite SVG được lưu trữ trên CDN có thể được tìm thấy tại

02

Quảng cáo

Plyr đã hợp tác với vi. ai để cung cấp tùy chọn kiếm tiền cho video của bạn. Thiết lập dễ dàng

• Đăng ký một vi. tài khoản ai
• Lấy ID nhà xuất bản của bạn từ đoạn mã
• Bật quảng cáo trong và nhập ID nhà xuất bản của bạn

Mọi thắc mắc liên quan đến quảng cáo có thể gửi thẳng đến vi. ai và bất kỳ vấn đề nào với kết xuất phát sinh thông qua các sự cố GitHub

Nếu bạn không muốn sử dụng Vi, bạn có thể đặt

03 của riêng mình

Nâng cao

Tùy chỉnh CSS

Nếu bạn muốn thay đổi bất kỳ mã thông báo thiết kế nào được sử dụng để hiển thị trình phát, bạn có thể thực hiện bằng cách sử dụng Thuộc tính tùy chỉnh CSS

Đây là danh sách các thuộc tính và những gì chúng được sử dụng cho

NameDescriptionDefault / Fallback

04Màu giao diện người dùng chính.

05

06Màu nền của trình bao bọc áp phích và video để sử dụng video và hình ảnh áp phích của kênh alpha.

07

08Màu được sử dụng cho đường viền chấm khi một phần tử là tiêu điểm bàn phím của

09 [tương đương].

04

31Màu nền cho huy hiệu trong menu. ______332

33Màu chữ của huy hiệu. ______334

35Bán kính đường viền được sử dụng cho huy hiệu.

36

08Màu được sử dụng để đánh dấu tiêu điểm tab [bàn phím].

04

39Màu nền của phụ đề.

40

41Màu được sử dụng cho văn bản phụ đề. ______334

43Kích thước của các biểu tượng được sử dụng trong các điều khiển.

44

45Khoảng cách giữa các điều khiển [đôi khi được sử dụng trong nhiều - e. g.

46].

47

48Phần đệm bên trong điều khiển. ________ 349 [________ 350]________ 351 Bán kính đường viền được sử dụng trên các điều khiển.

52

53Màu nền được sử dụng cho các mục menu đã chọn.

04

55Nền điều khiển video.

56

57Màu văn bản/biểu tượng cho điều khiển video.

34

59Màu văn bản/biểu tượng được sử dụng khi điều khiển video là

00,

01 và

09 [tương đương].

34

04Màu nền được sử dụng khi điều khiển video là

00,

01 và

09 [tương đương].

04

09Nền cho điều khiển âm thanh. ______334

11Màu văn bản/biểu tượng cho điều khiển âm thanh. ______332

13Màu văn bản/biểu tượng được sử dụng khi điều khiển âm thanh là

00,

01 và

09 [tương đương].

34

18Màu nền được sử dụng khi điều khiển video là

00,

01 và

09 [tương đương]. ________ 304 ________ 923 Màu nền của menu.

24

25Màu văn bản/biểu tượng cho các mục menu. ______332

27Bóng tối được sử dụng trên thực đơn.

28

29Bán kính đường viền trên menu.

30

31Kích thước của mũi tên ở dưới cùng của menu. _______ 932 ________ 933 Màu của các mũi tên trong menu. ______934

35Kích thước của các mũi tên trong menu.

30

37Màu đường viền cho phần dưới cùng của nút quay lại ở đầu các trang menu phụ. ______938

39Bóng bên dưới đường viền của nút quay lại ở đầu các trang menu phụ. ______334

41Kích thước của các sọc ở trạng thái tải trong máy lọc.

42

43Màu nền ở trạng thái tải trong bộ lọc.

44

45Màu tô cho chỉ báo bộ đệm trong bộ lọc cho video.

46

47Màu tô cho chỉ báo bộ đệm trong bộ lọc âm thanh.

48

49Chiều cao của tay cầm/ngón cái của máy chà sàn.

50

51Nền của tay cầm/ngón cái của máy chà sàn. ______334

53Bóng của tay cầm/ngón tay cái của máy chà sàn.

54 ________ 955 Chiều rộng của bóng khi tay cầm/ngón tay cái của máy chà sàn là ________ 956 [nhấn].

52

58Chiều cao của máy chà sàn/đường tiến độ.

59

60Màu tô của bộ lọc/tiến trình.

04

62Bối cảnh của máy lọc/tiến độ.

45 ________ 964 Màu của bóng khi tay cầm/ngón tay cái của bộ lọc video là ________ 956 [đã nhấn]. ________ 966 ________ 967 Bối cảnh của máy lọc/tiến độ.

45 ________ 969 Màu của bóng khi tay cầm/ngón tay cái của bộ lọc âm thanh là ________ 956 [đã nhấn].

71

72Màu nền cho chú giải công cụ.

24

74Màu văn bản cho chú giải công cụ. ______332

76Phần đệm cho chú giải công cụ.

77

78Kích thước của mũi tên dưới chú giải công cụ.

30

80Bán kính đường viền trên chú giải công cụ.

52

82Cái bóng trên chú giải công cụ.

28

84Họ phông chữ được sử dụng trong trình phát.

85Cỡ chữ cơ bản. Chủ yếu được sử dụng cho phụ đề.

86

87Cỡ chữ nhỏ hơn. Chủ yếu được sử dụng cho phụ đề.

50

89Cỡ chữ lớn hơn. Chủ yếu được sử dụng cho phụ đề.

44

91Cỡ chữ thậm chí còn lớn hơn. Chủ yếu được sử dụng cho phụ đề.

92

93Kích thước phông chữ cho thời gian.

87

95Cỡ chữ được sử dụng trong menu.

87

97Cỡ chữ được sử dụng cho phù hiệu.

98

99Trọng lượng phông chữ thông thường.

100

101Độ đậm của phông chữ.

102

103Chiều cao dòng được sử dụng trong trình phát.

104

105Có bật tính năng khử răng cưa phông chữ trong trình phát hay không.

106

Bạn có thể đặt chúng trong CSS của mình cho tất cả người chơi

2

hoặc cho một tên lớp cụ thể

3

hoặc trong HTML của bạn

4

ngổ ngáo

Bạn có thể sử dụng tệp

107 có trong

108 như một phần của bản dựng và thay đổi các biến cho phù hợp với thiết kế của bạn. Sass yêu cầu bạn sử dụng autoprefixer [bạn đã. ] vì tất cả các khai báo đều sử dụng định nghĩa W3C

Đánh dấu HTML sử dụng phương pháp BEM với

109 là khối, e. g.

110. Bạn có thể thay đổi các hook của lớp trong các tùy chọn để phù hợp với bất kỳ CSS tùy chỉnh nào mà bạn viết. Kiểm tra nguồn JavaScript để biết thêm về điều này

SVG

Các biểu tượng được sử dụng trong điều khiển Plyr được tải trong SVG sprite. Sprite được tải tự động từ CDN của chúng tôi theo mặc định. Nếu bạn đã có sẵn một hệ thống xây dựng biểu tượng, bạn có thể bao gồm các biểu tượng plyr nguồn [xem

111 để biết các biểu tượng nguồn]

Sử dụng tùy chọn

112

Tuy nhiên, bạn có thể chỉ định tùy chọn

112 của riêng mình và Plyr sẽ xác định xem url có phải là tuyệt đối hay không và có yêu cầu tải bằng AJAX/CORS do hạn chế của trình duyệt hiện tại hay nếu đó là đường dẫn tương đối, chỉ cần sử dụng trực tiếp đường dẫn

Nếu bạn đang sử dụng thẻ

114 trên trang web của mình, bạn có thể cần sử dụng thẻ như thế này. svgfixer. js

Thông tin thêm về SVG sprite tại đây. http. // thủ thuật css. com/svg-sprites-use-better-icon-fonts/ và kỹ thuật AJAX tại đây. http. // thủ thuật css. com/ajaxing-svg-sprite/

Nguồn gốc chéo [CORS]

Bạn sẽ nhận thấy thuộc tính

115 trên các phần tử

116 ví dụ. Điều này là do chú thích TextTrack được tải từ miền khác. Nếu chú thích TextTrack của bạn cũng được lưu trữ trên một miền khác, bạn sẽ cần thêm thuộc tính này và đảm bảo rằng máy chủ lưu trữ của bạn có thiết lập tiêu đề chính xác. Để biết thêm thông tin về CORS, hãy xem tài liệu MDN. https. // nhà phát triển. mozilla. org/en-US/docs/Web/HTTP/Access_control_CORS

chú thích

Phụ đề WebVTT được hỗ trợ. Để thêm phụ đề gốc, hãy xem ví dụ HTML ở trên và tìm phần tử

117. Đảm bảo xác thực tệp phụ đề của bạn

JavaScript

Đang khởi tạo

Bạn có thể chỉ định một loạt các đối số cho hàm tạo để sử dụng

• Bộ chọn chuỗi CSS
• Một
  118
• Một đối tượng jQuery

Ghi chú. Nếu một đối tượng

119,

120 hoặc jQuery được chuyển, phần tử đầu tiên sẽ được sử dụng để thiết lập. Để thiết lập nhiều người chơi, xem bên dưới

Người chơi đơn

Chuyển bộ chọn chuỗi CSS tương thích với

121

5

Đi qua một HTMLElement

6

7

HTMLElement hoặc bộ chọn chuỗi có thể là trình bao bọc đích

116,

123 hoặc

80 để nhúng

Nhiều người chơi

Bạn có hai lựa chọn ở đây. Bạn có thể sử dụng một vòng lặp mảng đơn giản để ánh xạ hàm tạo

8

hoặc sử dụng phương thức tĩnh nơi bạn có thể chuyển bộ chọn chuỗi CSS, NodeList, Mảng HTMLElement hoặc đối tượng JQuery

9

Cả hai tùy chọn cũng sẽ trả về một mảng các phiên bản theo thứ tự của chúng trong DOM cho bộ chọn chuỗi hoặc NodeList hoặc Array nguồn

Tùy chọn

Đối số thứ hai cho hàm tạo là đối tượng

10

Các tùy chọn có thể được chuyển dưới dạng một đối tượng cho hàm tạo như trên hoặc dưới dạng JSON trong thuộc tính

125 trên mỗi phần tử đích của bạn

11

Lưu ý các dấu ngoặc đơn đóng gói JSON và dấu ngoặc kép trên các khóa đối tượng. Chỉ các giá trị chuỗi mới cần dấu ngoặc kép

OptionTypeDefaultDescription

126Boolean

127Completely disable Plyr. Điều này sẽ cho phép bạn thực hiện kiểm tra Tác nhân người dùng hoặc tương tự như bật hoặc tắt Plyr theo chương trình cho một UA nhất định. Ví dụ bên dưới.

128Boolean

106Hiển thị thông tin gỡ lỗi trong bảng điều khiển

130Mảng, Hàm hoặc Phần tử

131Nếu một hàm được truyền, giả định rằng phương thức của bạn sẽ trả về một phần tử hoặc một chuỗi HTML cho các điều khiển. Ba đối số sẽ được chuyển đến chức năng của bạn; . Xem KIỂM SOÁT. md để biết thêm thông tin về cách cấu trúc html.

135Array

136Nếu các điều khiển mặc định được sử dụng, bạn có thể chỉ định cài đặt nào sẽ hiển thị trong menu_______2137ObjectXem mặc định. jsĐược sử dụng để quốc tế hóa [i18n] văn bản trong giao diện người dùng.

138Boolean

127Tải sprite SVG được chỉ định làm tùy chọn

112 [nếu là URL]. Nếu

106, giả định rằng bạn đang tự mình xử lý việc tải sprite.

112String

143Chỉ định một URL hoặc đường dẫn đến sprite SVG. Xem để biết thêm thông tin.

144String

109Chỉ định tiền tố id cho các biểu tượng được sử dụng trong các điều khiển mặc định [e. g. "plyr-play" sẽ là "plyr"]. Điều này là để ngăn xung đột nếu bạn đang sử dụng sprite SVG của riêng mình nhưng với các điều khiển mặc định. Hầu hết mọi người có thể bỏ qua tùy chọn này.

146String

147Chỉ định URL hoặc đường dẫn đến tệp video trống được sử dụng để hủy yêu cầu mạng đúng cách.

4²Boolean

106Tự động phát phương tiện khi tải. Nếu thuộc tính

4 có trên phần tử

116 hoặc

123, thuộc tính này sẽ tự động được đặt thành true.

153¹Boolean

127Chỉ cho phép một người chơi chơi cùng một lúc.

155Số

156Thời gian, tính bằng giây, để tìm kiếm khi người dùng nhấn tua nhanh hoặc tua lại.

157Số

158Một số, từ 0 đến 1, biểu thị âm lượng ban đầu của trình phát. ________ 2159 Boolean ________ 2106 Bắt đầu tắt tiếng có bắt đầu phát lại hay không. Nếu thuộc tính

159 xuất hiện trên phần tử

116 hoặc

123, thuộc tính này sẽ tự động được đặt thành true.

164Boolean

127Nhấp [hoặc nhấn] vào vùng chứa video sẽ chuyển đổi phát/tạm dừng.

166Boolean

127Vô hiệu hóa menu nhấp chuột phải trên video để giúp che giấu nội dung rất nguyên thủy nhằm ngăn tải nội dung xuống.

168Boolean

127Tự động ẩn điều khiển video sau 2 giây không di chuyển chuột hoặc tiêu điểm, khi làm mờ phần tử điều khiển [tab out], khi bắt đầu phát lại hoặc chuyển sang chế độ toàn màn hình. Ngay khi di chuyển chuột, một thành phần điều khiển được tập trung hoặc phát lại bị tạm dừng, các điều khiển sẽ xuất hiện lại ngay lập tức.

170BooleanfalseĐặt lại quá trình phát lại từ đầu sau khi quá trình phát lại hoàn tất.

171Object

172Chỉ bật cho người chơi tập trung hoặc trên toàn cầu

173Object____2174

130. Hiển thị nhãn điều khiển dưới dạng chú giải công cụ trên

00 &

01 [theo mặc định, nhãn chỉ dành cho trình đọc màn hình].

178. Hiển thị chú giải công cụ tìm kiếm để cho biết khi nhấp vào nơi phương tiện sẽ tìm kiếm.

179Số____2143Chỉ định thời lượng tùy chỉnh cho phương tiện.

181Boolean

127Hiển thị thời lượng của phương tiện trong sự kiện "tải siêu dữ liệu" [khi khởi động] trong màn hình thời gian hiện tại. Điều này sẽ chỉ hoạt động nếu thuộc tính

183 không được đặt thành

184 [hoặc hoàn toàn không được đặt] và bạn chọn không hiển thị thời lượng [xem tùy chọn

130].

186Boolean

127Hiển thị thời gian hiện tại dưới dạng bộ đếm ngược thay vì bộ đếm tăng dần.

188Boolean

127Cho phép người dùng nhấp để chuyển đổi ở trên.

190Object

143Cho phép ràng buộc người nghe sự kiện với các điều khiển trước trình xử lý mặc định. Xem

192 để biết người nghe có sẵn. Nếu trình xử lý của bạn ngăn mặc định trong sự kiện [

193], thì trình xử lý mặc định sẽ không kích hoạt.

194Đối tượng

195____2196. Chuyển đổi nếu phụ đề nên hoạt động theo mặc định.

197. Đặt ngôn ngữ mặc định để tải [nếu có]. 'tự động' sử dụng ngôn ngữ trình duyệt.

198. Lắng nghe các thay đổi đối với bản nhạc và menu cập nhật. Điều này là cần thiết cho một số thư viện phát trực tuyến, nhưng có thể dẫn đến các tùy chọn ngôn ngữ không thể chọn].

199Đối tượng

00____2126. Chuyển đổi xem có nên bật chế độ toàn màn hình hay không.

02. Cho phép dự phòng cho giải pháp toàn cửa sổ [

127/

106/

05].

06. có sử dụng chế độ toàn màn hình gốc của iOS khi vào chế độ toàn màn hình hay không [không có điều khiển tùy chỉnh].

07. Bộ chọn cho tổ tiên của phần tử trình phát, cho phép nội dung theo ngữ cảnh duy trì trực quan ở chế độ toàn màn hình. Những người không phải tổ tiên bị bỏ qua.

84String

143Buộc tỷ lệ khung hình cho tất cả video. Định dạng là

10 - e. g.

11 hoặc

12. Nếu điều này không được chỉ định thì mặc định cho HTML5 và Vimeo là sử dụng độ phân giải gốc của video. Vì thứ nguyên không có sẵn từ YouTube thông qua SDK, 16. 9 bị ép buộc như một mặc định hợp lý.

13Đối tượng

14

126. Cho phép sử dụng bộ nhớ cục bộ để lưu trữ cài đặt người dùng.

16. Tên khóa sử dụng.

17Đối tượng

18

19. Tốc độ mặc định để phát lại.

20. Các tùy chọn tốc độ để hiển thị trong giao diện người dùng. YouTube và Vimeo sẽ bỏ qua mọi tùy chọn ngoài 0. Phạm vi 5-2, vì vậy các tùy chọn bên ngoài phạm vi này sẽ tự động bị ẩn.

21Object

22

23 là mức chất lượng mặc định [nếu nó tồn tại trong nguồn của bạn].

20 là các tùy chọn để hiển thị. Điều này được sử dụng để lọc các nguồn có sẵn.

5Đối tượng

26

196. Có lặp lại video hiện tại hay không. Nếu thuộc tính

5 có trên phần tử

116 hoặc

123, thuộc tính này sẽ tự động được đặt thành true Đây là một đối tượng để hỗ trợ chức năng trong tương lai.

31Đối tượng

32____2126. Có bật quảng cáo hay không.

34. vi duy nhất của bạn. ID nhà xuất bản ai.

35 là URL cho thẻ VAST tùy chỉnh nếu bạn không sử dụng Vi.

36ObjectXem nguồn. Nếu bạn muốn ghi đè bất kỳ URL API nào thì bạn có thể làm như vậy tại đây. Bạn cũng có thể đặt URL tải xuống tùy chỉnh cho nút tải xuống.

37Đối tượng

38Xem. Một số được đặt tự động dựa trên các tùy chọn cấu hình khác, cụ thể là.

5,

4,

159,

42,

9

44Đối tượng

45Xem. Tùy chọn tùy chỉnh duy nhất là

46 để sử dụng một giải pháp thay thế cho YouTube không sử dụng cookie [hữu ích cho GDPR, v.v.]. Một số được đặt tự động dựa trên các tùy chọn cấu hình khác, cụ thể là.

4,

6,

130,

50,

9,

52,

53,

54

55Đối tượng

56

126. Có bật hình thu nhỏ xem trước hay không [chúng phải do bạn tạo].

58 phải là một chuỗi hoặc một mảng các chuỗi biểu thị URL cho các tệp VTT chứa [các] URL hình ảnh. Tìm hiểu thêm về bên dưới.

59Object

60Giao diện MediaMetadata của Media Session API cho phép trang web cung cấp siêu dữ liệu đa phương tiện để hiển thị trong giao diện người dùng nền tảng.

61Đối tượng

62____2126. Có bật điểm đánh dấu hay không.

64 là một mảng gồm các đối tượng

65 trong đó

66 đại diện cho vị trí đánh dấu tính bằng giây và

67 là chuỗi HTML sẽ được hiển thị

1. chỉ vimeo
2. Tự động phát thường không được khuyến nghị vì nó được coi là trải nghiệm người dùng tiêu cực. Nó cũng bị vô hiệu hóa trong nhiều trình duyệt. Trước khi nêu vấn đề, hãy làm bài tập về nhà của bạn. Thông tin thêm có thể được tìm thấy ở đây

• https. // webkit. org/blog/6784/new-video-policies-for-ios/
• https. // nhà phát triển. Google. com/web/updates/2017/09/autoplay-policy-changes
• https. // hack. mozilla. org/2019/02/firefox-66-để-chặn-tự-động-phát-nghe-video-và-âm-thanh/

API

Có các phương thức, setters và getters trên một đối tượng Plyr

Mục tiêu

Cách dễ nhất để truy cập đối tượng Plyr là đặt giá trị trả về từ lệnh gọi hàm tạo của bạn thành một biến. Ví dụ

12

Bạn cũng có thể truy cập đối tượng thông qua bất kỳ sự kiện nào

13

phương pháp

Ví dụ sử dụng phương pháp

14

MethodParametersDescription

68¹-Bắt đầu phát lại.

69-Tạm dừng phát lại.

70¹BooleanChuyển đổi phát lại, nếu không có tham số nào được chuyển, nó sẽ chuyển đổi dựa trên trạng thái hiện tại.

71-Dừng phát lại và đặt lại để bắt đầu.

72-Bắt đầu phát lại.

73Tua lại số theo thời gian tìm kiếm đã chỉ định. Nếu không có tham số nào được truyền, thời gian tìm kiếm mặc định sẽ được sử dụng.

74SốTua nhanh theo thời gian tìm kiếm đã chỉ định. Nếu không có tham số nào được truyền, thời gian tìm kiếm mặc định sẽ được sử dụng.

75SốTăng âm lượng theo bước đã chỉ định. Nếu không có tham số nào được truyền, bước mặc định sẽ được sử dụng.

76SốTăng âm lượng theo bước đã chỉ định. Nếu không có tham số nào được truyền, bước mặc định sẽ được sử dụng. ________ 077 Boolean Chuyển đổi phụ đề hiển thị. Nếu không có tham số nào được truyền, nó sẽ chuyển đổi dựa trên trạng thái hiện tại.

78-Nhập toàn màn hình. Nếu chế độ toàn màn hình không được hỗ trợ, thay vào đó, một "cửa sổ/khung nhìn" dự phòng sẽ được sử dụng.

79-Thoát toàn màn hình.

80-Chuyển đổi toàn màn hình.

81-Kích hoạt hộp thoại phát sóng trên các thiết bị được hỗ trợ.

82-Đặt hình thu nhỏ xem trước cho nguồn hiện tại.

83BooleanChuyển đổi điều khiển [chỉ video]. Nhận giá trị trung thực tùy chọn để bật/tắt nó.

84String, FunctionThêm trình xử lý sự kiện cho sự kiện đã chỉ định.

85String, FunctionThêm trình xử lý sự kiện cho sự kiện đã chỉ định một lần.

86String, FunctionXóa trình lắng nghe sự kiện cho sự kiện đã chỉ định.

87Hỗ trợ StringCheck cho loại kịch câm.

88-Hủy bỏ phiên bản và thu gom rác bất kỳ phần tử nào

1. Đối với trình phát HTML5,
   68 sẽ trả lại một
   90 cho hầu hết các trình duyệt - e. g. Chrome, Firefox, Opera, Safari và Edge theo MDN tại thời điểm viết

Getters và Setters

Ví dụ setters

15

getters ví dụ

16

PropertyGetterSetterDescription_______091✓-Trả về giá trị boolean cho biết trình phát hiện tại có phải là HTML5 hay không.

92✓-Trả về giá trị boolean cho biết trình phát hiện tại có phải là trình phát được nhúng hay không.

93✓-Trả về giá trị boolean cho biết trình phát hiện tại có đang chơi hay không.

94✓-Trả về giá trị boolean cho biết trình phát hiện tại có bị tạm dừng hay không.

95✓-Trả về giá trị boolean cho biết trình phát hiện tại có bị dừng hay không.

96✓-Trả về giá trị boolean cho biết trình phát hiện tại đã phát xong chưa.

97✓-Trả về số float từ 0 đến 1 cho biết lượng phương tiện được lưu vào bộ đệm

98✓✓Lấy hoặc đặt Thời gian hiện tại cho trình phát. Setter chấp nhận float trong vài giây.

99✓-Trả về giá trị boolean cho biết liệu trình phát hiện tại có đang tìm kiếm.

179✓-Trả về thời lượng cho phương tiện hiện tại.

157 ✓✓Lấy hoặc đặt âm lượng cho trình phát. Setter chấp nhận float giữa 0 và 1.

159 ✓✓Lấy hoặc đặt trạng thái tắt tiếng của trình phát. Setter chấp nhận một boolean.

03✓-Trả về giá trị boolean cho biết liệu phương tiện hiện tại có rãnh âm thanh hay không.

17✓✓Lấy hoặc đặt tốc độ cho trình phát. Trình thiết lập chấp nhận một giá trị trong các tùy chọn được chỉ định trong cấu hình của bạn. Nói chung tối thiểu phải là 0. 5.

21¹✓✓Nhận hoặc đặt chất lượng cho trình phát. Trình thiết lập chấp nhận một giá trị từ các tùy chọn được chỉ định trong cấu hình của bạn.

5✓✓Lấy hoặc đặt trạng thái vòng lặp hiện tại của trình phát. Setter chấp nhận một boolean.

07✓✓Lấy hoặc đặt nguồn hiện tại cho trình phát. Setter chấp nhận một đối tượng. Xem bên dưới để biết ví dụ.

1 ✓✓Lấy hoặc đặt hình ảnh áp phích hiện tại cho trình phát. Setter chấp nhận một chuỗi; .

55 ✓✓Nhận hoặc đặt nguồn hình thu nhỏ xem trước hiện tại cho trình phát. Trình cài đặt chấp nhận một chuỗi_______74✓✓Lấy hoặc đặt trạng thái tự động phát của trình phát. Setter chấp nhận một boolean.

11✓✓Lấy hoặc đặt phụ đề gốc theo chỉ mục.

12 có nghĩa là bản nhạc bị thiếu hoặc phụ đề không hoạt động

197 ✓✓Nhận hoặc đặt ngôn ngữ phụ đề ưu tiên cho trình phát. Bộ thiết lập chấp nhận mã ngôn ngữ hai ký tự ISO. Hỗ trợ cho các ngôn ngữ phụ thuộc vào phụ đề bạn đưa vào. Nếu phụ đề của bạn không có bất kỳ dữ liệu ngôn ngữ nào hoặc nếu bạn có nhiều bản nhạc có cùng ngôn ngữ, bạn có thể sử dụng

11 để thay thế.

15✓-Trả về giá trị boolean cho biết trình phát hiện tại có ở chế độ toàn màn hình hay không.

16✓-Trả về giá trị boolean cho biết trình phát hiện tại có bật chế độ toàn màn hình hay không.

17¹✓✓Nhận hoặc đặt trạng thái hình trong hình của trình phát. Setter chấp nhận một boolean. Tính năng này hiện chỉ được hỗ trợ trên Safari 10+ [trên MacOS Sierra+ và iOS 10+] và Chrome 70+.

84✓✓Lấy hoặc đặt tỷ lệ khung hình của video. Setter chấp nhận một chuỗi có cùng định dạng với tùy chọn

84.

20✓✓Lấy hoặc đặt URL cho nút tải xuống. Trình thiết lập chấp nhận một chuỗi chứa URL tuyệt đối hợp lệ

1. chỉ HTML5

Trình thiết lập

21

Điều này cho phép thay đổi nguồn trình phát và gõ một cách nhanh chóng

Ví dụ về video

17

Ví dụ về âm thanh

18

ví dụ về YouTube

19

ví dụ vimeo

0

Ghi chú. Thuộc tính

58 cho YouTube và Vimeo có thể là ID video hoặc toàn bộ URL

Loại thuộc tínhMô tả

23Chuỗi Hoặc là

24 hoặc là

25. Ghi chú. YouTube và Vimeo hiện không được hỗ trợ làm nguồn âm thanh.

134ChuỗiTùy chọn. Tiêu đề của phương tiện truyền thông mới. Được sử dụng cho thuộc tính

27 trên nút phát và vùng chứa bên ngoài. YouTube và Vimeo được điền tự động.

28ArrayĐây là một mảng các nguồn. Đối với phương tiện HTML5, các thuộc tính của đối tượng này được ánh xạ trực tiếp tới các thuộc tính HTML để có thể thêm nhiều thuộc tính khác vào đối tượng nếu cần.

1¹ChuỗiURL cho hình ảnh áp phích [chỉ video HTML5].

30¹StringMột mảng các đối tượng theo dõi. Mỗi phần tử trong mảng được ánh xạ trực tiếp tới một phần tử theo dõi và bất kỳ khóa nào được ánh xạ trực tiếp tới các thuộc tính HTML, vì vậy trong ví dụ trên, nó sẽ hiển thị dưới dạng

31 và tương tự đối với phiên bản tiếng Pháp. Booleans được chuyển đổi thành thuộc tính ít giá trị HTML5.

55¹ObjectĐối tượng giống như trong tùy chọn hàm tạo

55. Điều này có nghĩa là bạn có thể thay đổi hình thu nhỏ vtt thông qua phím

58 hoặc tắt plugin hình thu nhỏ cho video tiếp theo bằng cách chuyển qua

35

1. chỉ HTML5

Sự kiện

Bạn có thể lắng nghe các sự kiện trên phần tử đích mà bạn đã thiết lập Plyr [xem ví dụ bên dưới bảng]. Một số sự kiện chỉ áp dụng cho âm thanh và video HTML5. Sử dụng tài liệu tham khảo của bạn đối với phiên bản, bạn có thể sử dụng phương pháp API

36 hoặc

37. Có thể truy cập vào API theo cách này thông qua thuộc tính

38. Đây là một ví dụ

1

Sự kiện truyền thông tiêu chuẩn

Loại sự kiện Mô tả

39Được gửi định kỳ để thông báo cho các bên quan tâm về tiến trình tải xuống phương tiện. Thông tin về số lượng phương tiện hiện tại đã được tải xuống có sẵn trong thuộc tính

97 của phần tử phương tiện.

93Được gửi khi phương tiện bắt đầu phát [lần đầu tiên, sau khi bị tạm dừng hoặc sau khi kết thúc rồi khởi động lại].

42Được gửi khi bắt đầu phát lại phương tiện sau khi đã tạm dừng; .

43Đã gửi khi tạm dừng phát lại.

45Thời gian được chỉ định bởi thuộc tính

98 của phần tử đã thay đổi.

47Được gửi khi âm lượng thay đổi [cả khi âm lượng được đặt và khi trạng thái

159 thay đổi].

99Được gửi khi hoạt động tìm kiếm bắt đầu.

50Được gửi khi hoạt động tìm kiếm hoàn tất.

51Được gửi khi tốc độ phát lại thay đổi.

96Đã gửi khi quá trình phát lại hoàn tất. Ghi chú. Điều này không kích hoạt nếu

4 là đúng.

54Được gửi khi người chơi chuyển sang chế độ toàn màn hình [dự phòng toàn màn hình hoặc toàn cửa sổ thích hợp cho các trình duyệt cũ hơn].

55Được gửi khi người chơi thoát khỏi chế độ toàn màn hình.

56Đã gửi khi bật phụ đề.

57Được gửi khi phụ đề bị tắt.

58Đã gửi khi thay đổi ngôn ngữ phụ đề.

59Đã gửi khi điều khiển bị ẩn.

60Đã gửi khi điều khiển được hiển thị.

61Được kích hoạt khi phiên bản sẵn sàng cho lệnh gọi API

chỉ HTML5

Loại sự kiệnMô tả

62Đã gửi khi quá trình tải phương tiện bắt đầu.

63Khung hình đầu tiên của phương tiện đã tải xong.

64Siêu dữ liệu của phương tiện đã tải xong; .

65Chất lượng phát lại đã thay đổi.

66Được gửi khi có đủ dữ liệu để có thể phát phương tiện, ít nhất là cho một vài khung hình. Điều này tương ứng với ________ 767 ________ 768.

69Được gửi khi trạng thái sẵn sàng thay đổi thành

70, cho biết có thể phát toàn bộ phương tiện mà không bị gián đoạn, giả sử tốc độ tải xuống ít nhất vẫn ở mức hiện tại. Ghi chú. Cài đặt thủ công

98 cuối cùng sẽ kích hoạt sự kiện

69 trong firefox. Các trình duyệt khác có thể không kích hoạt sự kiện này.

73Được gửi khi tác nhân người dùng đang cố tìm nạp dữ liệu phương tiện, nhưng dữ liệu đột ngột không xuất hiện.

74Được gửi khi thao tác được yêu cầu [chẳng hạn như phát lại] bị trì hoãn trong khi chờ hoàn thành thao tác khác [chẳng hạn như tìm kiếm].

75phương tiện truyền thông đã trở nên trống rỗng; .

77Được gửi khi một

78 đã thay đổi tín hiệu hiện đang hiển thị.

79Được gửi khi xảy ra lỗi. Thuộc tính

79 của phần tử chứa nhiều thông tin hơn

chỉ YouTube

Loại sự kiệnMô tả

81Trạng thái của người chơi đã thay đổi. Mã có thể được truy cập thông qua

82. Các giá trị có thể là

12. Chưa bắt đầu,

84. Đã kết thúc,

158. Đang chơi,

86. Tạm dừng,

87. Bộ đệm,

88. Đã chọn video. Xem để biết thêm thông tin

Ghi chú. Những sự kiện này cũng làm bong bóng DOM. Mục tiêu sự kiện sẽ là phần tử vùng chứa

Một số chi tiết sự kiện mượn từ MDN

Nhúng

YouTube và Vimeo hiện được hỗ trợ và hoạt động giống như video HTML5. Các sự kiện và phương thức API tương tự có sẵn cho tất cả các loại. Tuy nhiên, nếu bạn muốn truy cập trực tiếp vào API. Bạn có thể làm như vậy thông qua thuộc tính

89 của đối tượng người chơi của bạn - e. g.

90. Sau đó, bạn có thể sử dụng các phương pháp có liên quan từ API của bên thứ ba. Thông tin thêm về API tương ứng tại đây

• Tham chiếu API iframe YouTube
• trình phát vimeo. tham khảo js

Ghi chú. Không phải tất cả các phương thức API đều có thể hoạt động 100%. Số dặm của bạn có thể thay đổi. Tốt hơn là sử dụng API Plyr nếu có thể

phím tắt

Theo mặc định, trình phát sẽ liên kết các phím tắt sau khi nó có tiêu điểm. Nếu bạn có tùy chọn

91 đến

127 và chỉ có một trình phát trong tài liệu thì các phím tắt sẽ hoạt động khi bất kỳ phần tử nào có tiêu điểm, ngoại trừ phần tử yêu cầu đầu vào

KeyAction

84 đến

94Tìm kiếm tương ứng từ 0 đến 90%

95Chuyển đổi phát lại

96Chuyển đổi phát lại←Tìm kiếm lùi bằng tùy chọn

155→Tìm kiếm tiến theo tùy chọn

155↑Tăng âm lượng↓Giảm âm lượng

99Chuyển đổi tắt tiếng

800Chuyển đổi toàn màn hình

801Chuyển đổi chú thích

802Chuyển đổi vòng lặpXem trước hình thu nhỏ

Có thể hiển thị hình thu nhỏ xem trước theo bản demo khi bạn di chuột qua bộ lọc hoặc trong khi bạn đang xem trong khu vực video chính. Điều này có thể được sử dụng cho tất cả các loại video nhưng tất nhiên là dễ nhất với HTML5. Bạn sẽ cần phải tự tạo sprite hoặc hình ảnh. Điều này có thể thực hiện được bằng cách sử dụng thứ gì đó như bộ chuyển mã AWS để tạo khung và sau đó kết hợp chúng thành hình ảnh sprite. Các sprite được khuyên dùng vì lý do hiệu suất - chúng sẽ tải xuống nhanh hơn nhiều và dễ dàng nén thành một tệp có kích thước nhỏ khiến chúng tải nhanh hơn

Bạn có thể xem các tệp VTT mẫu tại đây và tại đây để biết cách thực hiện các họa tiết. Các tọa độ được đặt dưới dạng hàm băm

803 trên URL theo thứ tự Độ lệch X, Độ lệch Y, Chiều rộng, Chiều cao [e. g.

804 được bù đắp bởi

805 từ bên trái, ________ 1806 từ trên xuống và là ________ 1807. Nếu bạn muốn bao gồm hình ảnh trên mỗi khung hình, điều này cũng có thể thực hiện được nhưng sẽ chậm hơn, dẫn đến trải nghiệm bị giảm sút

Toàn màn hình

Toàn màn hình trong Plyr được hỗ trợ bởi tất cả các trình duyệt

hỗ trợ trình duyệt

Plyr hỗ trợ 2 phiên bản mới nhất của hầu hết các trình duyệt hiện đại

Các trình duyệt được hỗ trợ Safari:Mobile Safari:¹Firefox:Chrome:Opera:Edge:IE11:³IE10:2,3

1. Mobile Safari trên iPhone buộc trình phát gốc cho
   116 trừ khi có thuộc tính
   9. Điều khiển âm lượng cũng bị tắt vì chúng được xử lý trên toàn thiết bị
2. Trình phát bản địa được sử dụng [không hỗ trợ cho
   5 hoặc
   4] nhưng API được hỗ trợ. Không hỗ trợ toàn màn hình gốc, có thể sử dụng dự phòng [xem phần ]
3. yêu cầu polyfill. Xem bên dưới

polyfill

Plyr sử dụng ES6 chưa được hỗ trợ trong tất cả các trình duyệt. Điều này có nghĩa là một số tính năng sẽ cần được điền đầy đủ để khả dụng nếu không bạn sẽ gặp sự cố. Chúng tôi đã quyết định không tạo gánh nặng cho ~90% người dùng hỗ trợ các tính năng này với JS bổ sung và thay vào đó, việc điền polyfill sẽ để bạn xử lý dựa trên nhu cầu của bạn. Phương pháp đơn giản nhất tôi tìm thấy là sử dụng polyfill. io cung cấp polyfill dựa trên tác nhân người dùng. Đây là phương pháp demo sử dụng

Kiểm tra hỗ trợ

Bạn có thể sử dụng phương pháp tĩnh để kiểm tra hỗ trợ. Ví dụ

2

Các lập luận là

• Loại phương tiện [
  25 hoặc
  24]
• Nhà cung cấp [
  814,
  44 hoặc
  37]
• Trình phát có thuộc tính
  9 hay không [chỉ áp dụng cho iOS 10+]

Tắt hỗ trợ theo chương trình

Tùy chọn

126 có thể được sử dụng để vô hiệu hóa một số Tác nhân người dùng nhất định. Ví dụ: nếu bạn không muốn sử dụng Plyr cho điện thoại thông minh, bạn có thể sử dụng

3

Nếu Tác nhân người dùng bị vô hiệu hóa nhưng hỗ trợ

116 và

123 nguyên bản, nó sẽ sử dụng trình phát gốc

Plugin & Thành phần

Một số người tuyệt vời đã tạo plugin cho CMS và Thành phần cho khung JavaScript

TypeMaintainerLinkWordPressBrandon Lavigne [@drrobotnik]https. //wordpress. org/plugins/plyr/AngularSimon Bobrov [@smnbbrv]https. //github. com/smnbbrv/ngx-plyrReactChintan Prajapati [@chintan9]https. //github. com/chintan9/plyr-reactVueGabe Dunn [@redxtech]https. //github. com/redxtech/vue-plyrNeosJon Uhlmann [@jonnito]https. // người đóng gói. org/gói/jonnito/plyrKirbyDominik Pschenitschni [@dpschen]https. //github. com/dpschen/kirby-plyrtagREDAXOFriendsOfRedaxo / skerbis [@skerbis]https. //github. com/FriendsOfREDAXO/plyrsvelte-plyrBen Woodward / benwoodward [@benwoodward]https. //github. com/benwoodward/svelte-plyrIssues

Nếu bạn thấy bất kỳ điều gì kỳ lạ với Plyr, vui lòng cho chúng tôi biết bằng cách sử dụng trình theo dõi vấn đề GitHub

Tác giả

Plyr được phát triển bởi @sam_potts / sampotts. tôi với sự giúp đỡ từ những người đóng góp tuyệt vời

Quyên tặng

Plyr tốn tiền để chạy, không chỉ thời gian của tôi. Tôi tặng miễn phí thời gian của mình vì tôi thích xây dựng Plyr nhưng tiếc là phải trả tiền cho tên miền, dịch vụ lưu trữ, v.v. Mọi trợ giúp về chi phí đều được đánh giá cao

• Quyên góp qua Patreon
• Quyên góp qua PayPal

đề cập

• săn sản phẩm
• nhật ký thay đổi
• HTML5 hàng tuần #177
• Thiết kế đáp ứng #149
• Thiết Kế Web Hàng Tuần #174
• Lấy Nét Trước Kết Thúc #177
• tin tặc
• Nền tảng web hàng ngày
• Tin tức thiết kế LayerVault
• Buổi Trình Diễn Ngôi Nhà Trên Cây #131
• noupe. com

Được sử dụng bởi

• Selz. com
• peugeot. bạn thân
• peugeot. de
• tomtom. com
• DIGBMX
• lưu trữ bụi bẩn
• koel - Máy chủ phát nhạc cá nhân hoạt động
• đài phát thanh oscar
• truyền hình tia lửa
• @halfhalftravel
• BitChute
• Rutheneum-Bote
• Nhấn một phím. com. Blog-Magazin für Videospiele
• DẠY ĐI. Làm việc với Chế độ xem
• Đường băng CFDA360
• NKLAV. nhà làm phim
• GDI. JS. ORG - Chỉ mục Google Drive

Nếu bạn muốn được thêm vào danh sách, hãy mở yêu cầu kéo. Thật tuyệt vời khi thấy bạn đang sử dụng Plyr như thế nào😎

Các liên kết và tín dụng hữu ích

• Trình phát video HTML5 có thể truy cập của PayPal [Plyr ban đầu được chuyển từ đó]
• Hướng dẫn tuyệt vời cho Plyr bằng tiếng Nhật. bởi @arayutw

Thanks

Xin chân thành cảm ơn Fastly đã cung cấp dịch vụ CDN

Vô cùng cảm ơn Sentry đã cung cấp dịch vụ ghi nhật ký cho trang demo

người đóng góp

Người đóng góp mã

Dự án này tồn tại nhờ tất cả những người đóng góp. [Đóng góp]

Người đóng góp tài chính

Trở thành người đóng góp tài chính và giúp chúng tôi duy trì cộng đồng của mình. [Đóng góp]

cá nhân

tổ chức

Hỗ trợ dự án này với tổ chức của bạn. Logo của bạn sẽ hiển thị ở đây với một liên kết đến trang web của bạn. [Đóng góp]

Làm cách nào để ẩn HTML điều khiển âm thanh?

Thời lượng âm thanh là gì?

Làm cách nào để nhúng âm thanh vào HTML?

Tùy chọn nào được sử dụng để tắt âm thanh trong HTML?