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

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

Đặ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.
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    4 cho âm lượng và
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    5 cho tiến độ và tốt,
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    6 cho các nút. Không có hack nút
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    7 hoặc
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    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
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    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

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
video>

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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
1 để nâng cao lũy tiến thực sự

Âm thanh HTML5

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>

Đố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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
2 mặc định. Dưới đây là một số ví dụ. Tên lớp
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
4,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
5,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
6 (chỉ YouTube) và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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à
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
80 với hai thuộc tính dữ liệu thiết yếu -
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
81 và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
82

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
1

Ghi chú. Tên lớp

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
80

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>

Ghi chú.

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
82 có thể là ID video hoặc URL cho phương tiện

Vimeo

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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
80

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
8

JavaScript

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
0

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
88 trước thẻ đóng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
4

hoặc là

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
5

CSS

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
00 vào
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
01 của bạn

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
04Màu giao diện người dùng chính.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
05
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
07
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
09 (tương đương).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
04
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
31Màu nền cho huy hiệu trong menu. ______332
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
33Màu chữ của huy hiệu. ______334
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
35Bán kính đường viền được sử dụng cho huy hiệu.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
36
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
08Màu được sử dụng để đánh dấu tiêu điểm tab (bàn phím).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
04
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
39Màu nền của phụ đề.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
40
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
41Màu được sử dụng cho văn bản phụ đề. ______334
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
43Kích thước của các biểu tượng được sử dụng trong các điều khiển.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
44
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
45Khoảng cách giữa các điều khiển (đôi khi được sử dụng trong nhiều - e. g.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
46).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
47
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
52
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
53Màu nền được sử dụng cho các mục menu đã chọn.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
04
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
55Nền điều khiển video.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
56
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
57Màu văn bản/biểu tượng cho điều khiển video.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
34
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
59Màu văn bản/biểu tượng được sử dụng khi điều khiển video là
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
00,
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
01 và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
09 (tương đương).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
34
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
04Màu nền được sử dụng khi điều khiển video là
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
00,
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
01 và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
09 (tương đương).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
04
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
09Nền cho điều khiển âm thanh. ______334
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
11Màu văn bản/biểu tượng cho điều khiển âm thanh. ______332
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
13Màu văn bản/biểu tượng được sử dụng khi điều khiển âm thanh là
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
00,
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
01 và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
09 (tương đương).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
34
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
18Màu nền được sử dụng khi điều khiển video là
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
00,
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
01 và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
09 (tương đương). ________ 304 ________ 923 Màu nền của menu.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
24
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
25Màu văn bản/biểu tượng cho các mục menu. ______332
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
27Bóng tối được sử dụng trên thực đơn.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
28
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
29Bán kính đường viền trên menu.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
30
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
35Kích thước của các mũi tên trong menu.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
30
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
39Bóng bên dưới đường viền của nút quay lại ở đầu các trang menu phụ. ______334
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
41Kích thước của các sọc ở trạng thái tải trong máy lọc.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
42
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
43Màu nền ở trạng thái tải trong bộ lọc.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
44
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
45Màu tô cho chỉ báo bộ đệm trong bộ lọc cho video.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
46
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
47Màu tô cho chỉ báo bộ đệm trong bộ lọc âm thanh.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
48
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
49Chiều cao của tay cầm/ngón cái của máy chà sàn.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
50
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
51Nền của tay cầm/ngón cái của máy chà sàn. ______334
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
53Bóng của tay cầm/ngón tay cái của máy chà sàn.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
52
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
58Chiều cao của máy chà sàn/đường tiến độ.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
59
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
60Màu tô của bộ lọc/tiến trình.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
04
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
62Bối cảnh của máy lọc/tiến độ.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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 độ.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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).
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
71
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
72Màu nền cho chú giải công cụ.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
24
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
74Màu văn bản cho chú giải công cụ. ______332
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
76Phần đệm cho chú giải công cụ.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
77
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
78Kích thước của mũi tên dưới chú giải công cụ.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
30
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
80Bán kính đường viền trên chú giải công cụ.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
52
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
82Cái bóng trên chú giải công cụ.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
28
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
84Họ phông chữ được sử dụng trong trình phát.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
85Cỡ chữ cơ bản. Chủ yếu được sử dụng cho phụ đề.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
86
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
87Cỡ chữ nhỏ hơn. Chủ yếu được sử dụng cho phụ đề.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
50
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
89Cỡ chữ lớn hơn. Chủ yếu được sử dụng cho phụ đề.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
44
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
91Cỡ chữ thậm chí còn lớn hơn. Chủ yếu được sử dụng cho phụ đề.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
92
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
93Kích thước phông chữ cho thời gian.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
87
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
95Cỡ chữ được sử dụng trong menu.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
87
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
97Cỡ chữ được sử dụng cho phù hiệu.
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
98
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
99Trọng lượng phông chữ thông thường.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
100
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
101Độ đậm của phông chữ.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
102
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
103Chiều cao dòng được sử dụng trong trình phát.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
104
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
105Có bật tính năng khử răng cưa phông chữ trong trình phát hay không.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
106

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

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
2

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

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
3

hoặc trong HTML của bạn

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
4

ngổ ngáo

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
107 có trong
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
109 là khối, e. g.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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ẻ

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
115 trên các phần tử
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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ử

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    118
  • Một đối tượng jQuery

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
119,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
121

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
5

Đi qua một HTMLElement

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
6

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
7

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
116,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
123 hoặc
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
125 trên mỗi phần tử đích của bạn

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
126Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
128Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
106Hiển thị thông tin gỡ lỗi trong bảng điều khiển
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
130Mảng, Hàm hoặc Phần tử
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
135Array
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
138Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
127Tải sprite SVG được chỉ định làm tùy chọn
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
112 (nếu là URL). Nếu
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
106, giả định rằng bạn đang tự mình xử lý việc tải sprite.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
112String
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
143Chỉ định một URL hoặc đường dẫn đến sprite SVG. Xem để biết thêm thông tin.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
144String
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
146String
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
4²Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
106Tự động phát phương tiện khi tải. Nếu thuộc tính
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
4 có trên phần tử
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
116 hoặc
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
123, thuộc tính này sẽ tự động được đặt thành true.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
153¹Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
127Chỉ cho phép một người chơi chơi cùng một lúc.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
155Số
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
157Số
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
159 xuất hiện trên phần tử
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
116 hoặc
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
123, thuộc tính này sẽ tự động được đặt thành true.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
164Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
127Nhấp (hoặc nhấn) vào vùng chứa video sẽ chuyển đổi phát/tạm dừng.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
166Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
168Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
171Object
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
172Chỉ bật cho người chơi tập trung hoặc trên toàn cầu
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
173Object____2174
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
130. Hiển thị nhãn điều khiển dưới dạng chú giải công cụ trên
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
00 &
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
audio>
01 (theo mặc định, nhãn chỉ dành cho trình đọc màn hình).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
179Số____2143Chỉ định thời lượng tùy chỉnh cho phương tiện.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
181Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
183 không được đặt thành
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
130).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
186Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
188Boolean
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
127Cho phép người dùng nhấp để chuyển đổi ở trên.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
190Object
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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 (
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
193), thì trình xử lý mặc định sẽ không kích hoạt.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
194Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
195____2196. Chuyển đổi nếu phụ đề nên hoạt động theo mặc định.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
199Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
00____2126. Chuyển đổi xem có nên bật chế độ toàn màn hình hay không.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
02. Cho phép dự phòng cho giải pháp toàn cửa sổ (
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
127/
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
106/
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
05).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
84String
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
143Buộc tỷ lệ khung hình cho tất cả video. Định dạng là
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
10 - e. g.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
11 hoặc
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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ý.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
13Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
14
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
126. Cho phép sử dụng bộ nhớ cục bộ để lưu trữ cài đặt người dùng.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
16. Tên khóa sử dụng.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
17Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
18
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
19. Tốc độ mặc định để phát lại.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
21Object
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
22
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
5Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
26
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
196. Có lặp lại video hiện tại hay không. Nếu thuộc tính
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
5 có trên phần tử
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
116 hoặc
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
31Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
32____2126. Có bật quảng cáo hay không.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
34. vi duy nhất của bạn. ID nhà xuất bản ai.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
35 là URL cho thẻ VAST tùy chỉnh nếu bạn không sử dụng Vi.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
37Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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à.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
5,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
4,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
159,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
42,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
9
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
44Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
45Xem. Tùy chọn tùy chỉnh duy nhất là
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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à.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
4,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
6,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
130,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
50,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
9,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
52,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
53,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
54
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
55Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
56
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
126. Có bật hình thu nhỏ xem trước hay không (chúng phải do bạn tạo).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
59Object
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
61Đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
62____2126. Có bật điểm đánh dấu hay không.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
64 là một mảng gồm các đối tượng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
65 trong đó
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
66 đại diện cho vị trí đánh dấu tính bằng giây và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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ụ

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
12

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
13

phương pháp

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
14

MethodParametersDescription
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
68¹-Bắt đầu phát lại.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
69-Tạm dừng phát lại.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
71-Dừng phát lại và đặt lại để bắt đầu.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
72-Bắt đầu phát lại.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
79-Thoát toàn màn hình.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
80-Chuyển đổi toàn màn hình.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
81-Kích hoạt hộp thoại phát sóng trên các thiết bị được hỗ trợ.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
82-Đặt hình thu nhỏ xem trước cho nguồn hiện tại.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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ó.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
84String, FunctionThêm trình xử lý sự kiện cho sự kiện đã chỉ định.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
85String, FunctionThêm trình xử lý sự kiện cho sự kiện đã chỉ định một lần.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
86String, FunctionXóa trình lắng nghe sự kiện cho sự kiện đã chỉ định.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
87Hỗ trợ StringCheck cho loại kịch câm.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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,
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    68 sẽ trả lại một
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
15

getters ví dụ

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
93✓-Trả về giá trị boolean cho biết trình phát hiện tại có đang chơi hay không.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
95✓-Trả về giá trị boolean cho biết trình phát hiện tại có bị dừng hay không.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
96✓-Trả về giá trị boolean cho biết trình phát hiện tại đã phát xong chưa.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
179✓-Trả về thời lượng cho phương tiện hiện tại.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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ụ.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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; .
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
11✓✓Lấy hoặc đặt phụ đề gốc theo chỉ mục.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
12 có nghĩa là bản nhạc bị thiếu hoặc phụ đề không hoạt động
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
11 để thay thế.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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+.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
84.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
17

Ví dụ về âm thanh

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
18

ví dụ về YouTube

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
19

ví dụ vimeo

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
0

Ghi chú. Thuộc tính

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
58 cho YouTube và Vimeo có thể là ID video hoặc toàn bộ URL

Loại thuộc tínhMô tả
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
23Chuỗi Hoặc là
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
24 hoặc là
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
25. Ghi chú. YouTube và Vimeo hiện không được hỗ trợ làm nguồn âm thanh.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
27 trên nút phát và vùng chứa bên ngoài. YouTube và Vimeo được điền tự động.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
1¹ChuỗiURL cho hình ảnh áp phích (chỉ video HTML5).
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
55¹ObjectĐối tượng giống như trong tùy chọn hàm tạo
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
58 hoặc tắt plugin hình thu nhỏ cho video tiếp theo bằng cách chuyển qua
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
36 hoặc
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
37. Có thể truy cập vào API theo cách này thông qua thuộc tính
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
38. Đây là một ví dụ

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
1

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

Loại sự kiện Mô tả
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
97 của phần tử phương tiện.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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).
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
42Được gửi khi bắt đầu phát lại phương tiện sau khi đã tạm dừng; .
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
43Đã gửi khi tạm dừng phát lại.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
45Thời gian được chỉ định bởi thuộc tính
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
98 của phần tử đã thay đổi.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
47Được gửi khi âm lượng thay đổi (cả khi âm lượng được đặt và khi trạng thái
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
159 thay đổi).
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
99Được gửi khi hoạt động tìm kiếm bắt đầu.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
50Được gửi khi hoạt động tìm kiếm hoàn tất.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
51Được gửi khi tốc độ phát lại thay đổi.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
4 là đúng.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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).
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
55Được gửi khi người chơi thoát khỏi chế độ toàn màn hình.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
56Đã gửi khi bật phụ đề.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
57Được gửi khi phụ đề bị tắt.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
58Đã gửi khi thay đổi ngôn ngữ phụ đề.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
59Đã gửi khi điều khiển bị ẩn.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
60Đã gửi khi điều khiển được hiển thị.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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ả
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
62Đã gửi khi quá trình tải phương tiện bắt đầu.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
63Khung hình đầu tiên của phương tiện đã tải xong.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
64Siêu dữ liệu của phương tiện đã tải xong; .
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
65Chất lượng phát lại đã thay đổi.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
69Được gửi khi trạng thái sẵn sàng thay đổi thành
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
98 cuối cùng sẽ kích hoạt sự kiện
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
69 trong firefox. Các trình duyệt khác có thể không kích hoạt sự kiện này.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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).
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
75phương tiện truyền thông đã trở nên trống rỗng; .
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
77Được gửi khi một
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
78 đã thay đổi tín hiệu hiện đang hiển thị.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
79Được gửi khi xảy ra lỗi. Thuộc tính
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
79 của phần tử chứa nhiều thông tin hơn

chỉ YouTube

Loại sự kiệnMô tả
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
81Trạng thái của người chơi đã thay đổi. Mã có thể được truy cập thông qua
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
82. Các giá trị có thể là
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
12. Chưa bắt đầu,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
84. Đã kết thúc,
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
158. Đang chơi,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
86. Tạm dừng,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
87. Bộ đệm,
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
89 của đối tượng người chơi của bạn - e. g.
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
91 đến
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
84 đến
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
94Tìm kiếm tương ứng từ 0 đến 90%
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
95Chuyển đổi phát lại
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
96Chuyển đổi phát lại←Tìm kiếm lùi bằng tùy chọn
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
155→Tìm kiếm tiến theo tùy chọn
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
155↑Tăng âm lượng↓Giảm âm lượng
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  >iframe>
div>
99Chuyển đổi tắt tiếng
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
800Chuyển đổi toàn màn hình
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
801Chuyển đổi chú thích
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
803 trên URL theo thứ tự Độ lệch X, Độ lệch Y, Chiều rộng, Chiều cao (e. g.
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
804 được bù đắp bởi
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    116 trừ khi có thuộc tính
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    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
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    5 hoặc
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    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ụ

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
2

Các lập luận là

  • Loại phương tiện (
    <div class="plyr__video-embed" id="player">
      <iframe
        src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
        allowfullscreen
        allowtransparency
        allow="autoplay"
      >iframe>
    div>
    25 hoặc
    <div class="plyr__video-embed" id="player">
      <iframe
        src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
        allowfullscreen
        allowtransparency
        allow="autoplay"
      >iframe>
    div>
    24)
  • Nhà cung cấp (
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    814,
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    44 hoặc
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    37)
  • Trình phát có thuộc tính
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
    9 hay không (chỉ áp dụng cho iOS 10+)

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

Tùy chọn

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
3

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

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
116 và
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY">div>
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?

Thuộc tính hidden ẩn phần tử . Bạn có thể chỉ định 'hidden' (không có giá trị) hoặc 'hidden="hidden"'. Cả hai đều hợp lệ. Phần tử

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

Một số biểu thị độ dài của âm thanh, tính bằng giây .

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?

Thuộc tính muted là thuộc tính boolean. Khi xuất hiện, nó chỉ định rằng đầu ra âm thanh sẽ bị tắt tiếng.