Hướng dẫn what attribute is used to add player control on the audio and video html? - thuộc tính nào được sử dụng để thêm điều khiển trình phát trên html âm thanh và video?

Question

❮ Thẻ HTML

Nội dung chính Show

Định nghĩa và cách sử dụng
Hỗ trợ trình duyệt
Định nghĩa và cách sử dụng
Hỗ trợ trình duyệt
Thuộc tính
Sự kiện
Ghi chú sử dụng
Kiểu dáng với CSS
Phát hiện bổ sung và loại bỏ các bản nhạc
Cách sử dụng cơ bản
phần tử với phần tử
với nhiều yếu tố
Mối quan tâm tiếp cận
Tóm tắt kỹ thuật
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Thuộc tính nào được sử dụng để thêm điều khiển người chơi trên âm thanh và video?
Những thuộc tính nào được sử dụng để kiểm soát thẻ âm thanh và video trong HTML?
Thuộc tính nào được sử dụng để thêm điều khiển video trong HTML?
Thẻ nào được sử dụng để chèn âm thanh và video trong HTML?

Thí dụ

Một phần tử có điều khiển mặc định trình duyệt:

& nbsp; & nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.

Your browser does not support the video tag.

Hãy tự mình thử »

Định nghĩa và cách sử dụng

Thuộc tính controls là một thuộc tính Boolean.

Khi có mặt, nó chỉ định rằng các điều khiển video nên được hiển thị.

Điều khiển video nên bao gồm:

Chơi
Tạm ngừng
Tìm kiếm
Âm lượng
Chuyển đổi toàn màn hình
Chú thích/phụ đề (khi có sẵn)
Theo dõi (khi có sẵn)

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Thuộc tính
kiểm soát	4.0	9.0	3.5	3.1	11.5

Cú pháp

❮ Thẻ HTML

Thí dụ

Một phần tử có điều khiển mặc định trình duyệt:

& nbsp; & nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ các yếu tố âm thanh.

Your browser does not support the audio element.

Hãy tự mình thử »

Định nghĩa và cách sử dụng

Thuộc tính controls là một thuộc tính Boolean.

Khi có mặt, nó chỉ định rằng các điều khiển âm thanh nên được hiển thị.

Điều khiển âm thanh nên bao gồm:

Chơi
Tạm ngừng
Tìm kiếm
Âm lượng

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Thuộc tính
kiểm soát	4.0	9.0	3.5	4.0	11.5

Cú pháp

❮ Thẻ HTML

Phần tử HTML được sử dụng để nhúng nội dung âm thanh trong các tài liệu. Nó có thể chứa một hoặc nhiều nguồn âm thanh, được biểu thị bằng cách sử dụng thuộc tính

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

0 hoặc phần tử

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1: Trình duyệt sẽ chọn loại phù hợp nhất. Nó cũng có thể là đích đến cho phương tiện truyền thông, sử dụng

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2. HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

0 attribute or the

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1 element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2.

Thử nó

Ví dụ trên cho thấy cách sử dụng đơn giản của phần tử . Theo cách tương tự như phần tử

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

4, chúng tôi bao gồm một đường dẫn đến phương tiện mà chúng tôi muốn nhúng bên trong thuộc tính

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

0; Chúng tôi có thể bao gồm các thuộc tính khác để chỉ định thông tin như liệu chúng tôi có muốn nó tự động phát và vòng lặp hay không, liệu chúng tôi có muốn hiển thị các điều khiển âm thanh mặc định của trình duyệt hay không, v.v.

Nội dung bên trong các thẻ mở và đóng

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

6 được hiển thị dưới dạng dự phòng trong các trình duyệt không hỗ trợ phần tử.

Thuộc tính

Các thuộc tính của yếu tố này bao gồm các thuộc tính toàn cầu.

const elem = document.querySelector("audio"); elem.audioTrackList.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTrackList.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };
7

Một thuộc tính Boolean: Nếu được chỉ định, âm thanh sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy, mà không cần chờ toàn bộ tệp âm thanh để hoàn tất tải xuống.

Lưu ý: Các trang web tự động phát âm thanh (hoặc video có bản nhạc âm thanh) có thể là một trải nghiệm khó chịu cho người dùng, vì vậy nên tránh khi có thể. Nếu bạn phải cung cấp chức năng Autoplay, bạn nên thực hiện chọn tham gia (yêu cầu người dùng cụ thể bật nó). Tuy nhiên, điều này có thể hữu ích khi tạo các yếu tố phương tiện có nguồn sẽ được đặt sau, dưới sự kiểm soát của người dùng. Xem Hướng dẫn Autoplay của chúng tôi để biết thêm thông tin về cách sử dụng autoplay đúng cách. Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

controls

Nếu thuộc tính này có mặt, trình duyệt sẽ cung cấp các điều khiển để cho phép người dùng điều khiển phát lại âm thanh, bao gồm âm lượng, tìm kiếm và tạm dừng/tiếp tục phát lại.

const elem = document.querySelector("audio"); elem.audioTrackList.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTrackList.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };
9ExperimentalNon-standard Experimental Non-standard

Thuộc tính

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

9, khi được chỉ định, giúp trình duyệt chọn những điều khiển nào để hiển thị cho phần tử


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

1 bất cứ khi nào trình duyệt hiển thị bộ điều khiển của riêng mình (nghĩa là khi thuộc tính controls được chỉ định).

Các giá trị được phép là


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

3,


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

4 và


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

5.

<audio src="AudioTest.ogg" autoplay> <a href="AudioTest.ogg">Download OGG audioa>. audio>
6

Thuộc tính được liệt kê này cho biết có nên sử dụng CORS để tìm nạp tệp âm thanh liên quan hay không. Tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

7 mà không bị nhiễm độc. Các giá trị được phép là:


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

8

Gửi một yêu cầu có nguồn gốc chéo mà không cần chứng chỉ. Nói cách khác, nó gửi tiêu đề


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

9 HTTP mà không cần cookie, chứng chỉ X.509 hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc (bằng cách không đặt tiêu đề

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav">Download WAV audioa>.
audio>

0 HTTP), tài nguyên sẽ bị ô nhiễm và việc sử dụng của nó bị hạn chế.

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav">Download WAV audioa>.
audio>

1

Gửi một yêu cầu có nguồn gốc chéo với thông tin xác thực. Nói cách khác, nó gửi tiêu đề


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

9 HTTP với cookie, chứng chỉ hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc (thông qua tiêu đề

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav">Download WAV audioa>.
audio>

3 HTTP), tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế.

Khi không có, tài nguyên được tìm nạp mà không có yêu cầu CORS (tức là mà không gửi tiêu đề


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

9 HTTP), ngăn chặn việc sử dụng không bị lỗi trong các yếu tố ____27. Nếu không hợp lệ, nó được xử lý như thể từ khóa được liệt kê ẩn danh được sử dụng. Xem các thuộc tính CASS Cài đặt để biết thêm thông tin.anonymous was used. See CORS settings attributes for additional information.

<audio controls> <source src="foo.wav" type="audio/wav" /> <a href="foo.wav">Download WAV audioa>. audio>
6Experimental Experimental

Một thuộc tính boolean được sử dụng để vô hiệu hóa khả năng phát lại từ xa trong các thiết bị được gắn bằng dây có dây (HDMI, DVI, v.v.) và các công nghệ không dây (Miracast, Chromecast, DLNA, AirPlay, v.v.). Xem đặc điểm kỹ thuật đề xuất này để biết thêm thông tin.

<audio controls> <source src="foo.wav" type="audio/wav" /> <a href="foo.wav">Download WAV audioa>. audio>
7

Một thuộc tính Boolean: Nếu được chỉ định, trình phát âm thanh sẽ tự động tìm kiếm trở lại bắt đầu khi đạt đến cuối âm thanh.

<audio controls> <source src="foo.wav" type="audio/wav" /> <a href="foo.wav">Download WAV audioa>. audio>
8

Một thuộc tính Boolean cho biết liệu âm thanh ban đầu có bị im lặng hay không. Giá trị mặc định của nó là

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav">Download WAV audioa>.
audio>

9.

<audio controls> <source src="foo.opus" type="audio/ogg; codecs=opus" /> <source src="foo.ogg" type="audio/ogg; codecs=vorbis" /> <source src="foo.mp3" type="audio/mpeg" /> audio>
0

Thuộc tính được liệt kê này nhằm cung cấp một gợi ý cho trình duyệt về những gì tác giả nghĩ sẽ dẫn đến trải nghiệm người dùng tốt nhất. Nó có thể có một trong các giá trị sau:

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
audio>

1: Chỉ ra rằng âm thanh không nên được tải sẵn.

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
audio>

2: chỉ ra rằng chỉ có siêu dữ liệu âm thanh (ví dụ: độ dài) được tìm nạp.

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
audio>

3: Cho biết rằng toàn bộ tệp âm thanh có thể được tải xuống, ngay cả khi người dùng không dự kiến sẽ sử dụng nó.

Chuỗi trống: Một từ đồng nghĩa của giá trị

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
audio>

3.

Giá trị mặc định là khác nhau cho mỗi trình duyệt. Thông số kỹ thuật khuyên nó sẽ được đặt thành

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
audio>

2.

Note:

Thuộc tính

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

7 được ưu tiên hơn

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
audio>

0. Nếu

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

7 được chỉ định, trình duyệt rõ ràng sẽ cần bắt đầu tải xuống âm thanh để phát lại.

Trình duyệt không bị buộc bởi đặc điểm kỹ thuật để tuân theo giá trị của thuộc tính này; Nó chỉ là một gợi ý.

const elem = document.querySelector("audio"); elem.audioTrackList.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTrackList.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };
0

URL của âm thanh để nhúng. Điều này phải chịu các điều khiển truy cập HTTP. Đây là tùy chọn; Thay vào đó, bạn có thể sử dụng phần tử

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1 trong khối âm thanh để chỉ định âm thanh để nhúng.

Sự kiện

Ghi chú sử dụng

Các trình duyệt không hỗ trợ tất cả các loại tệp và codec âm thanh giống nhau; Bạn có thể cung cấp nhiều nguồn bên trong các yếu tố

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1 lồng nhau và sau đó trình duyệt sẽ sử dụng nguồn đầu tiên mà nó hiểu:

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

Chúng tôi cung cấp một hướng dẫn thực chất và kỹ lưỡng về các loại tệp phương tiện và các codec âm thanh có thể được sử dụng trong đó. Cũng có sẵn là một hướng dẫn cho các codec được hỗ trợ cho video.

Ghi chú sử dụng khác:

Nếu bạn không chỉ định thuộc tính controls, trình phát âm thanh sẽ không bao gồm các điều khiển mặc định của trình duyệt. Tuy nhiên, bạn có thể tạo các điều khiển tùy chỉnh của riêng mình bằng JavaScript và API

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

3.

Để cho phép kiểm soát chính xác nội dung âm thanh của bạn,
```
1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
```
3S bắn nhiều sự kiện khác nhau. Điều này cũng cung cấp một cách để giám sát quá trình tìm nạp âm thanh để bạn có thể xem lỗi hoặc phát hiện khi đủ để bắt đầu chơi hoặc thao tác nó.
Bạn cũng có thể sử dụng API API Web Audio để tạo trực tiếp và thao tác các luồng âm thanh từ mã JavaScript thay vì phát trực tuyến các tệp âm thanh đã tồn tại trước.

Các yếu tố không thể có phụ đề hoặc chú thích được liên kết với chúng theo cùng một cách mà các yếu tố

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

6 có thể. Xem WebVTT và Audio của Ian Devlin để biết một số thông tin và cách giải quyết hữu ích.

Một nguồn thông tin chung tốt về việc sử dụng HTML là hướng dẫn của người mới bắt đầu nội dung video và âm thanh.

Kiểu dáng với CSS

Phần tử không có đầu ra trực quan nội tại của riêng mình trừ khi thuộc tính controls được chỉ định, trong trường hợp đó, các điều khiển mặc định của trình duyệt được hiển thị.

Các điều khiển mặc định có giá trị

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

0 là

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

1 theo mặc định và thường là một ý tưởng tốt để đặt giá trị thành

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

2 để cải thiện kiểm soát định vị và bố cục, trừ khi bạn muốn nó nằm trong một khối văn bản hoặc tương tự.

Bạn có thể tạo kiểu cho các điều khiển mặc định với các thuộc tính ảnh hưởng đến khối dưới dạng một đơn vị, vì vậy bạn có thể cung cấp cho nó một

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

3 và

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

4,

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

5,

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

6, v.v. Tuy nhiên, bạn không thể tạo kiểu cho các thành phần riêng lẻ bên trong trình phát âm thanh (ví dụ: Thay đổi kích thước nút hoặc biểu tượng, thay đổi phông chữ, v.v.) và các điều khiển khác nhau trên các trình duyệt khác nhau.

Để có được một cái nhìn và cảm nhận nhất quán trên các trình duyệt, bạn sẽ cần tạo các điều khiển tùy chỉnh; Chúng có thể được đánh dấu và tạo kiểu theo bất cứ cách nào bạn muốn, và sau đó JavaScript có thể được sử dụng cùng với API

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

3 để tăng chức năng của chúng.

Khái niệm cơ bản về kiểu máy chơi video cung cấp một số kỹ thuật tạo kiểu hữu ích - nó được viết trong bối cảnh

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

6, nhưng phần lớn có thể áp dụng như nhau cho .

Phát hiện bổ sung và loại bỏ các bản nhạc

Bạn có thể phát hiện khi các bản nhạc được thêm vào và xóa khỏi phần tử bằng các sự kiện controls1 và controls2. Tuy nhiên, những sự kiện này không được gửi trực tiếp đến chính phần tử . Thay vào đó, chúng được gửi đến đối tượng danh sách theo dõi trong phần tử

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

của tương ứng với loại bản nhạc được thêm vào phần tử:

controls6

Một controls7 chứa tất cả các bản nhạc âm thanh của yếu tố phương tiện. Bạn có thể thêm trình nghe cho controls1 vào đối tượng này để được cảnh báo khi các bản nhạc âm thanh mới được thêm vào phần tử.

controls9

Thêm trình nghe controls1 vào đối tượng controls1 này để được thông báo khi các bản nhạc video được thêm vào phần tử.

controls2

Thêm trình nghe sự kiện controls1 vào controls4 này để được thông báo khi các bản nhạc văn bản mới được thêm vào phần tử.

Lưu ý: Mặc dù đó là một yếu tố , nhưng nó vẫn có danh sách video và văn bản và trên thực tế có thể được sử dụng để trình bày video, mặc dù ý nghĩa giao diện người dùng có thể là kỳ lạ. Even though it's an element, it still has video and text track lists, and can in fact be used to present video, although the user interface implications can be odd.

Ví dụ: để phát hiện khi các rãnh âm thanh được thêm hoặc xóa khỏi phần tử , bạn có thể sử dụng mã như thế này:

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Mã này theo dõi các bản nhạc âm thanh được thêm và xóa khỏi phần tử và gọi chức năng giả thuyết trên trình chỉnh sửa theo dõi để đăng ký và xóa bản nhạc khỏi danh sách các bản nhạc có sẵn của trình soạn thảo.

Bạn cũng có thể sử dụng controls7 để nghe các sự kiện controls1 và controls2.

Ví dụ

Cách sử dụng cơ bản

Ví dụ sau đây cho thấy cách sử dụng đơn giản của phần tử để phát tệp OGG. Nó sẽ tự động phát do thuộc tính

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

7 nếu trang có quyền làm như vậy và cũng bao gồm nội dung dự phòng.


<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">Download OGG audioa>.
audio>

Để biết chi tiết về thời điểm autoplay hoạt động, làm thế nào để có quyền sử dụng autoplay và cách thức và thời điểm phù hợp để sử dụng autoplay, hãy xem hướng dẫn tự động phát của chúng tôi.

phần tử với phần tử

Ví dụ này chỉ định bản nhạc âm thanh nào được nhúng bằng thuộc tính

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

0 trên phần tử

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1 lồng nhau thay vì trực tiếp vào phần tử . Luôn luôn hữu ích khi bao gồm loại MIME của tệp bên trong thuộc tính 5, vì trình duyệt có thể biết ngay lập tức nếu nó có thể phát tệp đó và không lãng phí thời gian cho nó nếu không.

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav">Download WAV audioa>.
audio>

với nhiều yếu tố

Ví dụ này bao gồm nhiều yếu tố

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1. Trình duyệt cố gắng tải phần tử nguồn đầu tiên (opus) nếu nó có thể chơi nó; Nếu không, nó trở lại lần thứ hai (Vorbis) và cuối cùng trở lại mp3:

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
audio>

Mối quan tâm tiếp cận

Âm thanh với hộp thoại bằng nói sẽ cung cấp cả chú thích và bảng điểm mô tả chính xác nội dung của nó. Chú thích, được chỉ định bằng WebVTT, cho phép những người đang bị mất thính giác để hiểu nội dung của bản ghi âm khi bản ghi đang được phát, trong khi bảng điểm cho phép những người cần thêm thời gian để có thể xem lại nội dung của bản ghi theo tốc độ và định dạng mà thoải mái cho họ.

Nếu các dịch vụ chú thích tự động được sử dụng, điều quan trọng là phải xem xét nội dung được tạo để đảm bảo nó thể hiện chính xác âm thanh nguồn.

Phần tử không trực tiếp hỗ trợ WebVTT. Bạn sẽ phải tìm một thư viện hoặc khung cung cấp khả năng cho bạn hoặc viết mã để hiển thị chú thích. Một tùy chọn là phát âm thanh của bạn bằng phần tử

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

6, hỗ trợ WebVTT.

Ngoài hộp thoại nói, phụ đề và bảng điểm cũng nên xác định các hiệu ứng âm nhạc và âm thanh truyền đạt thông tin quan trọng. Điều này bao gồm cảm xúc và giai điệu. Ví dụ, trong WebVTT bên dưới, lưu ý việc sử dụng dấu ngoặc vuông để cung cấp sự hiểu biết về âm thanh và cảm xúc cho người xem; Điều này có thể giúp thiết lập tâm trạng được cung cấp bằng cách sử dụng âm nhạc, âm thanh phi ngôn ngữ và hiệu ứng âm thanh quan trọng, v.v.

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

Ngoài ra, đó là một thực tiễn tốt để cung cấp một số nội dung (chẳng hạn như liên kết tải xuống trực tiếp) như một dự phòng cho người xem sử dụng trình duyệt trong đó phần tử không được hỗ trợ:

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3a> or
    <a href="myAudio.ogg">OGGa> audio.
  p>
audio>

Định dạng theo dõi văn bản video Web (WebVTT)
Webaim: chú thích, bảng điểm và mô tả âm thanh
MDN Hiểu WCAG, Hướng dẫn 1.2 Giải thích
Hiểu tiêu chí thành công 1.2.1 | W3C Hiểu WCAG 2.0
Hiểu tiêu chí thành công 1.2.2 | W3C Hiểu WCAG 2.0

Tóm tắt kỹ thuật

Thông số kỹ thuật

Sự chỉ rõ
Tiêu chuẩn HTML # Phần tử Audio # the-audio-element

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Thuộc tính nào được sử dụng để thêm điều khiển người chơi trên âm thanh và video?

Thuộc tính điều khiển thêm các điều khiển video, như chơi, tạm dừng và âm lượng. adds video controls, like play, pause, and volume.

Những thuộc tính nào được sử dụng để kiểm soát thẻ âm thanh và video trong HTML?

Attributes.

Thuộc tính nào được sử dụng để thêm điều khiển video trong HTML?

Thuộc tính điều khiển là một thuộc tính Boolean.Khi có mặt, nó chỉ định rằng các điều khiển video nên được hiển thị.Điều khiển video nên bao gồm: Chơi. is a boolean attribute. When present, it specifies that video controls should be displayed. Video controls should include: Play.

Thẻ nào được sử dụng để chèn âm thanh và video trong HTML?

Thẻ được sử dụng để nhúng nội dung video vào tài liệu, chẳng hạn như clip phim hoặc các luồng video khác.Thẻ chứa một hoặc nhiều thẻ với các nguồn video khác nhau.Trình duyệt sẽ chọn nguồn đầu tiên mà nó hỗ trợ.

programming html Audio HTML HTML5 video player HTML video autoplay Video tag Audio tag Audio HTML CSS Video HTML

Hướng dẫn what attribute is used to add player control on the audio and video html? - thuộc tính nào được sử dụng để thêm điều khiển trình phát trên html âm thanh và video?

Thí dụ

Định nghĩa và cách sử dụng

Hỗ trợ trình duyệt

Cú pháp

Thí dụ

Định nghĩa và cách sử dụng

Hỗ trợ trình duyệt

Cú pháp

Thử nó

Thuộc tính

Sự kiện

Ghi chú sử dụng

Kiểu dáng với CSS

Phát hiện bổ sung và loại bỏ các bản nhạc

Ví dụ

Cách sử dụng cơ bản

phần tử với phần tử

với nhiều yếu tố

Mối quan tâm tiếp cận

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Thuộc tính nào được sử dụng để thêm điều khiển người chơi trên âm thanh và video?

Những thuộc tính nào được sử dụng để kiểm soát thẻ âm thanh và video trong HTML?

Thuộc tính nào được sử dụng để thêm điều khiển video trong HTML?

Thẻ nào được sử dụng để chèn âm thanh và video trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội