Điều khiển trong video html là gì?

---

Sử dụng thuộc tính điều khiển trong HTML để bao gồm các điều khiển âm thanh/video trong HTML

Thí dụ

Bạn có thể thử chạy đoạn mã sau để triển khai thuộc tính điều khiển -

   
      HTML video Tag
   
   
      
Online Compiler
      

      
         
         This browser doesn't support video tag.
      
   

Cập nhật ngày 03-Mar-2020 09. 38. 51

Chúng tôi đã trình bày những điều cơ bản về cách thêm video vào trang web của bạn bằng phần tử

2 và liệt kê ngắn gọn các tính năng nâng cao hơn của phần tử

2 trong một bài đăng trên blog trước đó

Trong bài đăng trên blog này, chúng tôi sẽ xem xét kỹ hơn 10 trong số các tính năng nâng cao đó và giải thích bằng các ví dụ mã về cách bạn có thể sử dụng chúng trên trang web của mình trong trình phát video HTML của bạn

Chúng tôi sẽ bao gồm

1. Chỉ định nhiều nguồn cho một video
2. Hiển thị hoặc ẩn các điều khiển của trình phát video
3. Bắt đầu hoặc dừng video tại một điểm hoặc dấu thời gian nhất định
4. Hiển thị áp phích video hoặc hình thu nhỏ trước khi video bắt đầu
5. Tải trước video trước khi phát lại
6. Phát video trực tiếp trong Safari trên iOS
7. Tự động phát, lặp lại và tắt tiếng
8. Hiển thị chú thích hoặc phụ đề trong khi phát lại
9. Truy cập nhiều chức năng hơn thông qua JavaScript
10. Điều chỉnh video dọc trong trình phát ngang bằng thuộc tính CSS phù hợp với đối tượng

Chỉ định nhiều nguồn cho một video

Không phải tất cả các trình duyệt đều hỗ trợ tất cả các bộ chứa video và codec. Để phù hợp với tất cả các trình duyệt, bạn có thể cung cấp nhiều tệp video làm nguồn cho một trình phát video

Có thể chỉ định nhiều nguồn bằng cách sử dụng các phần tử

4. Bạn cũng nên chỉ định loại MIME bằng thuộc tính

5 tùy chọn

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

Danh sách các nguồn được thử từ trên xuống dưới

Nếu chỉ có một định dạng video, nó có thể được chỉ định trực tiếp bằng thuộc tính

6

Hiển thị hoặc ẩn các điều khiển của trình phát video

Có thể dễ dàng bật/tắt các điều khiển như phát/tạm dừng, âm lượng, chuyển đổi toàn màn hình và thanh trượt tìm kiếm bằng cách sử dụng thuộc tính

7

Nếu bạn không chỉ định thuộc tính, các điều khiển sẽ không được hiển thị

Ví dụ: một số điều khiển cụ thể có thể được ẩn riêng bằng cách sử dụng thuộc tính

8 (chỉ dành cho Chrome 58+)

1

Trong ví dụ trên, các nút tải xuống và toàn màn hình sẽ bị tắt hoặc ẩn nhưng chỉ khi người dùng đang sử dụng Chrome

Bạn có thể tìm thêm ví dụ về cách kiểm soát giao diện người dùng trình phát video Chrome mặc định tại đây

Bắt đầu hoặc dừng video tại một điểm hoặc dấu thời gian nhất định

Sử dụng Media Fragments (dấu neo

9 trong

6), bạn có thể chỉ định thời gian mà video sẽ bắt đầu phát lại và kết thúc phát lại. Trong ví dụ này, quá trình phát lại video sẽ bắt đầu ở giây 15 và kết thúc ở giây 20

4

Thêm ví dụ

1 => kết quả là khoảng thời gian

2
_______93 => kết quả là khoảng thời gian

4

5 => kết quả là khoảng thời gian

6

Hiển thị áp phích video hoặc hình thu nhỏ trước khi video bắt đầu

Nếu video không được phát tự động, bạn nên hiển thị hình thu nhỏ của video và do đó giúp người xem có cái nhìn thoáng qua về nội dung

Để video có áp phích, bạn chỉ cần thêm thuộc tính

7 và URL vào ảnh áp phích

2

Tải trước video trước khi phát lại

Một video có thể được tải trước theo nhiều cách bằng cách thêm thuộc tính

8

Các tùy chọn sau tồn tại

• không - không tải trước được thực hiện
• siêu dữ liệu – chỉ siêu dữ liệu được tải trước. kích thước, khung hình đầu tiên, danh sách theo dõi, thời lượng, v.v.
• tự động – âm thanh/video sẽ bắt đầu tải ngay khi tải trang

Trong hầu hết các trình phát ở trên, chúng tôi đã sử dụng

9 để ngăn tải video cùng với trang web vì nó có thể sử dụng dữ liệu đáng kể ngay cả khi người dùng không phát video. Chúng tôi có thể nhận được hóa đơn chuyển dữ liệu cao từ nhà cung cấp dịch vụ lưu trữ của bạn nếu bài đăng trên blog này nhận được nhiều lượt xem

Đây là cách cho phép trình duyệt chỉ tải trước siêu dữ liệu video và hiển thị khung hình đầu tiên dưới dạng áp phích

5

Phát video trực tiếp trong Safari trên iOS

Safari trên iOS 10+ hỗ trợ phát lại video trực tuyến. Cho đến và bao gồm cả iOS9, các video trên web khi được phát sẽ hiển thị toàn màn hình trên thiết bị. Để bật phát lại nội tuyến, cần sử dụng thuộc tính

10

7

Tự động phát, lặp lại và tắt tiếng

Tự chạy

Có thể tự động phát video ngay khi sẵn sàng bằng cách thêm thuộc tính

11

9

Muted autoplay works in Safari on iOS10+ (while not in low power mode) and in Chrome 53+ on Android. Check New

Vòng

Nếu bạn muốn video phát theo vòng lặp, bạn có thể sử dụng thuộc tính

12

1

Tắt âm thanh

Đôi khi âm thanh của video là không cần thiết. Để tắt âm thanh của video, bạn chỉ cần thêm thuộc tính

13 vào mã

2

0

Đây là cùng một video được nhúng nhưng lần này có thêm thuộc tính tắt tiếng

Hiển thị chú thích hoặc phụ đề trong khi phát lại

Bằng cách sử dụng phần tử

15, bạn có thể thêm phụ đề, mô tả trình đọc màn hình và chú thích cho video

Phần tử

15 hoạt động chính xác như phần tử

4 bên trong phần tử

2. Nó có thuộc tính

6 trỏ đến một tệp ở định dạng WebVTT. Bằng cách sử dụng

40, bạn có thể chỉ định tên sẽ được hiển thị cho người dùng trong giao diện người dùng. Với

41, bạn có thể chỉ định ngôn ngữ cho phụ đề. Thuộc tính

42 sẽ đặt cách sử dụng bản nhạc với các tùy chọn sau. phụ đề (mặc định), chú thích, mô tả, chương và siêu dữ liệu

Khi tải phụ đề gốc chéo, bạn có thể phải chỉ định thuộc tính

43. Máy chủ web phục vụ cho. các tệp vtt cũng có thể phải cung cấp tiêu đề

44 cho. tập tin vtt

1

Để biết thêm thông tin về chủ đề này, tôi đề xuất các bài viết của Ian Devlin về chủ đề này. Trợ giúp với WebVTT, Google Chrome hỗ trợ Phụ đề WebVTT, WebVTT và Âm thanh và Chú thích video HTML5 – Trạng thái trình duyệt hiện tại

Truy cập nhiều chức năng hơn thông qua JavaScript

Phần tử

2 cũng có các phương thức, thuộc tính và sự kiện chỉ có thể được truy cập thông qua JavaScript. Chúng bao gồm kiểm soát tốc độ phát lại, tìm ra các phần được đệm của video, đọc bất kỳ trạng thái lỗi nào, v.v. Bạn có thể tìm thấy danh sách đầy đủ ở đây

Điều chỉnh video dọc trong trình phát ngang bằng cách sử dụng đối tượng phù hợp

Thuộc tính CSS

46 chỉ định cách thay đổi kích thước nội dung của các phần tử img và video để phù hợp với vùng chứa của chúng.

46 có thể nhận nhiều giá trị

• 48 – video sẽ được thu nhỏ để vừa với vùng chứa trong khi vẫn giữ nguyên tỷ lệ khung hình, hộp chữ sẽ xuất hiện xung quanh video

• 49 – video được thu nhỏ để lấp đầy vùng chứa trong khi vẫn giữ nguyên tỷ lệ khung hình, video sẽ bị cắt bớt

• 20 – video được thu nhỏ để lấp đầy vùng chứa mà không giữ nguyên tỷ lệ khung hình, video sẽ bị kéo dài

• 21 – video không được thay đổi kích thước

Đây là video dọc được đặt trong trình phát video ngang bằng CSS

22. Video được thu nhỏ lại để vừa với vùng chứa. Tỷ lệ khung hình dọc của video được duy trì để không làm biến dạng video dẫn đến hộp chữ ở các bên

Điều khiển trong thẻ video trong HTML LÀ GÌ?

Điều khiển có nghĩa là gì trong HTML?

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

Video có nghĩa là gì trong HTML?