programming html

Âm thanh html5 ẩn thanh tiến trình

HTML5 giới thiệu hỗ trợ phương tiện tích hợp với thẻ âm thanh, giúp dễ dàng nhúng phương tiện trực tiếp vào bất kỳ tài liệu HTML nào với mã hạn chế. Nó đi kèm với các điều khiển trình duyệt tích hợp, nếu bạn chỉ định và phát âm thanh hay và hiệu quả

Đây thường là giao diện trong trình duyệt của bạn

bạn có thể đang nghĩ. “Nếu tôi muốn tạo kiểu cho trình phát âm thanh của riêng mình bằng các nút và thanh cuộn riêng thì sao?”

Với phần tử âm thanh, phần tử tiến trình và một vài nút, bạn có thể tạo trình phát âm thanh của riêng mình ngay lập tức. Phần tử tiến trình chủ yếu được sử dụng để theo dõi việc hoàn thành một tác vụ và có thể được thao tác dễ dàng bằng Javascript. Trong trường hợp của chúng tôi, nó sẽ theo dõi độ dài của một bài hát. Và điều tuyệt vời là HTML5 và các khả năng của trình duyệt giúp bạn dễ dàng lấy thời lượng bài hát, thời gian hiện tại, v.v.

Nếu bạn muốn chơi với mã, hãy bắt đầu. Thật không may, các bản nhúng Codepen không hoạt động với tôi nên liên kết ở bên dưới

Xem trên Codepen tại đây

Và dưới đây là mã. Lưu ý rằng chúng là hai chức năng riêng biệt. Một theo dõi trình phát âm thanh thực sự phát âm thanh [chức năng initPlayers] và một theo dõi âm thanh cho phần tử tiến trình [chức năng initProgressBar]. Tôi đã cố gắng giữ jQuery ở mức tối thiểu nhưng đã sử dụng nó để thực sự gọi hàm, xin lỗi, tôi không xin lỗi những người theo chủ nghĩa thuần túy JS

Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, tôi sẽ lắng nghe. Gửi email cho tôi tại luke. sẽ. duncan@gmail. com hoặc đánh tôi trên twitter @luke__duncan

Tài liệu và ví dụ về cách sử dụng các thanh tiến trình tùy chỉnh của Bootstrap có hỗ trợ cho các thanh xếp chồng lên nhau, hình nền động và nhãn văn bản

Làm thế nào nó hoạt động

Các thành phần tiến trình được xây dựng với hai thành phần HTML, một số CSS để đặt chiều rộng và một vài thuộc tính. Chúng tôi không sử dụng phần tử HTML5

6, đảm bảo bạn có thể xếp chồng các thanh tiến trình, tạo hiệu ứng động cho chúng và đặt nhãn văn bản lên trên chúng

Chúng tôi sử dụng
```
  
```
7 làm trình bao bọc để chỉ ra giá trị tối đa của thanh tiến trình
Chúng tôi sử dụng
```
  
```
0 bên trong để biểu thị tiến trình cho đến nay
```
  
```
0 yêu cầu kiểu nội tuyến, lớp tiện ích hoặc CSS tùy chỉnh để đặt chiều rộng của chúng
```
  
```
0 cũng yêu cầu một số thuộc tính
```
  
```
3 và
```
  
```
4 để có thể truy cập được

Đặt tất cả lại với nhau, và bạn có các ví dụ sau

Bootstrap cung cấp một số tiện ích để thiết lập chiều rộng. Tùy thuộc vào nhu cầu của bạn, những điều này có thể giúp nhanh chóng cấu hình tiến độ

nhãn

Thêm nhãn vào thanh tiến trình của bạn bằng cách đặt văn bản trong

________số 8

Chiều cao

Chúng tôi chỉ đặt giá trị

6 trên

7, vì vậy nếu bạn thay đổi giá trị đó, thì

0 bên trong sẽ tự động thay đổi kích thước cho phù hợp

Tầng lớp

Sử dụng các lớp tiện ích nền để thay đổi giao diện của các thanh tiến trình riêng lẻ

Nhiều thanh

Bao gồm nhiều thanh tiến trình trong một thành phần tiến trình nếu bạn cần

sọc

Thêm

9 vào bất kỳ

0 nào để áp dụng một sọc qua CSS gradient trên màu nền của thanh tiến trình

hoạt hình sọc

Độ dốc sọc cũng có thể được làm động. Thêm

25%

1 vào

0 để tạo hoạt ảnh cho các sọc từ phải sang trái thông qua hoạt ảnh CSS3

Bạn có thể sử dụng các phần tử

90 và

91 của HTML5 để phát trực tuyến các tệp đa phương tiện mà không cần trình cắm riêng

Sử dụng JavaScript, quá trình phát lại có thể được kiểm soát bằng. Phần tử âm thanh và video được sử dụng làm phần tử phương tiện kế thừa tất cả các thuộc tính và phương thức của giao diện

92 [trong , và ứng dụng]

Các tính năng chính của phần tử âm thanh và video với JavaScript bao gồm

Tạo Trình phát âm thanh và video

Để cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách tạo trình phát đơn giản để phát lại trực tuyến

Để tạo trình phát âm thanh, hãy tạo phần tử
```
  
```
90 bao gồm các thuộc tính cần thiết
```
  
```
9
Để tạo trình phát video, hãy tạo phần tử
```
  
```
91 bao gồm các thuộc tính cần thiết. Ngoài các thuộc tính có sẵn cho phần tử
```
  
```
90, bạn cũng có thể sử dụng các thuộc tính
```
  
```
96,
```
  
```
97 và
```
  
```
98
```
  
```
9
Trình phát có điều khiển phát [điều khiển tích hợp được cung cấp trong trình duyệt] được tạo. Điều khiển chỉ hiển thị khi thêm thuộc tính
```
  
```
99. Nếu thuộc tính
```
  
```
98 không được xác định, khung hình đầu tiên của video sẽ được hiển thị trên màn hình trước khi phát lại. Hình dưới đây hiển thị trình phát video trước và trong khi phát lại

Lưu ý
Thuộc tính
  
21 được đặt thành
  
22 theo mặc định, nghĩa là siêu dữ liệu phương tiện được tải tự động. Nếu bạn không muốn tải siêu dữ liệu, hãy đặt giá trị thuộc tính là
  
23 hoặc
  
24.

Lưu ý
Cân nhắc cẩn thận trước khi sử dụng tính năng
  
25 [trong , và ứng dụng], tính năng tự động phát nội dung trong môi trường di động mà không cần sự tương tác của người dùng. Người dùng có thể phải đối mặt với phí gói Internet ngoài ý muốn hoặc các yếu tố gây nhiễu, chẳng hạn như việc phát lại bị dừng ngoài ý muốn.