Bạn đã chuẩn bị đúng cách tệp video cho web. Bạn đã cung cấp kích thước và độ phân giải chính xác. Bạn thậm chí đã tạo các tệp WebM và tệp MP4 riêng cho các trình duyệt khác nhau.
Để mọi người xem được video của bạn, bạn vẫn cần thêm video đó vào một trang web. Để thực hiện việc này đúng cách, bạn cần thêm hai phần tử HTML: phần tử <video> và phần tử <source>. Ngoài thông tin cơ bản về các thẻ này, bài viết này giải thích các thuộc tính bạn nên thêm vào các thẻ đó để tạo trải nghiệm người dùng tốt.
Chỉ định một tệp
Mặc dù không nên, nhưng bạn có thể sử dụng riêng phần tử video. Luôn sử dụng thuộc tính type như minh hoạ bên dưới. Trình duyệt sử dụng thông tin này để xác định xem trình duyệt có thể phát tệp video được cung cấp hay không. Nếu không thể, văn bản đính kèm sẽ hiển thị.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Chỉ định nhiều định dạng tệp
Hãy nhớ nội dung Kiến thức cơ bản về tệp phương tiện rằng không phải trình duyệt nào cũng hỗ trợ cùng một định dạng video. Phần tử <source> cho phép bạn chỉ định nhiều định dạng làm phương án dự phòng trong trường hợp trình duyệt của người dùng không hỗ trợ một trong các định dạng đó.
Ví dụ bên dưới tạo ra video được nhúng dùng làm ví dụ sau trong bài viết này.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Bạn phải luôn thêm thuộc tính type vào sự kiện thẻ <source> mặc dù thuộc tính này không bắt buộc. Điều này đảm bảo rằng trình duyệt chỉ tải xuống tệp mà trình duyệt có thể phát.
Cách tiếp cận này có một số ưu điểm so với việc phân phát nhiều tập lệnh HTML hoặc phía máy chủ, đặc biệt là trên thiết bị di động:
- Bạn có thể liệt kê các định dạng theo thứ tự ưu tiên.
- Việc chuyển đổi phía máy khách làm giảm độ trễ; chỉ có một yêu cầu được thực hiện để lấy nội dung.
- Việc để trình duyệt chọn định dạng sẽ đơn giản, nhanh chóng và có thể đáng tin cậy hơn so với việc sử dụng cơ sở dữ liệu hỗ trợ phía máy chủ có tính năng phát hiện tác nhân người dùng.
- Việc chỉ định loại của từng nguồn tệp sẽ cải thiện hiệu suất mạng; trình duyệt có thể chọn một nguồn video mà không cần tải một phần video xuống để "ngửi" định dạng.
Những vấn đề này đặc biệt quan trọng trong bối cảnh thiết bị di động, nơi băng thông và độ trễ ở mức cao và người dùng có thể sẽ không kiên nhẫn chờ đợi. Việc bỏ qua thuộc tính type có thể ảnh hưởng đến hiệu suất khi có nhiều nguồn có các loại không được hỗ trợ.
Có một số cách để bạn có thể tìm hiểu thông tin chi tiết. Hãy xem bài viết Kiến thức cơ bản về nội dung nghe nhìn kỹ thuật số dành cho các chuyên gia công nghệ để tìm hiểu thêm về cách hoạt động của video và âm thanh trên web. Bạn cũng có thể sử dụng tính năng gỡ lỗi từ xa trong DevTools để so sánh hoạt động mạng có thuộc tính loại và không có thuộc tính loại.
Chỉ định thời gian bắt đầu và thời gian kết thúc
Tiết kiệm băng thông và giúp trang web phản hồi nhanh hơn: sử dụng các mảnh nội dung đa phương tiện để thêm thời gian bắt đầu và kết thúc vào phần tử video.
Để sử dụng mảnh nội dung đa phương tiện, hãy thêm #t=[start_time][,end_time] vào URL nội dung đa phương tiện. Ví dụ: để phát video từ giây 5 đến 10, hãy chỉ định:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Bạn cũng có thể chỉ định thời gian trong <hours>:<minutes>:<seconds>. Ví dụ: #t=00:01:05 bắt đầu video từ giây thứ 65. Để chỉ phát một phút đầu tiên của video, hãy chỉ định #t=,00:01:00.
Bạn có thể sử dụng tính năng này để phân phối nhiều chế độ xem trên cùng một video (chẳng hạn như điểm tín hiệu trong DVD) mà không cần phải mã hoá và phân phát nhiều tệp.
Để tính năng này hoạt động, máy chủ của bạn phải hỗ trợ các yêu cầu theo phạm vi và bạn phải bật tính năng đó. Hầu hết các máy chủ đều bật yêu cầu theo phạm vi theo mặc định. Vì một số dịch vụ lưu trữ sẽ tắt các yêu cầu này, nên bạn nên xác nhận rằng các yêu cầu phạm vi có sẵn để sử dụng các mảnh trên trang web của bạn.
May mắn là bạn có thể thực hiện việc này trong công cụ dành cho nhà phát triển của trình duyệt. Ví dụ: trong Chrome, tính năng này nằm trong Bảng điều khiển mạng. Tìm tiêu đề Accept-Ranges và xác minh rằng tiêu đề đó là bytes. Trong hình, tôi đã vẽ một hộp màu đỏ xung quanh tiêu đề này. Nếu không thấy giá trị bytes, bạn cần liên hệ với nhà cung cấp dịch vụ lưu trữ.
Thêm hình ảnh áp phích
Thêm thuộc tính áp phích vào phần tử video để người xem có thể biết được nội dung ngay khi phần tử tải, mà không cần tải video xuống hoặc bắt đầu phát.
<video poster="poster.jpg" ...>
…
</video>
Áp phích cũng có thể là phương án dự phòng nếu src video bị hỏng hoặc nếu không có định dạng video nào được cung cấp được hỗ trợ. Điểm bất lợi duy nhất của hình ảnh áp phích là một yêu cầu tệp bổ sung, yêu cầu này sẽ tiêu tốn một số băng thông và cần phải kết xuất.
Để biết thêm thông tin, hãy xem phần Mã hoá hình ảnh hiệu quả.
Đảm bảo video không tràn ra khỏi vùng chứa
Khi các phần tử video quá lớn so với khung nhìn, các phần tử đó có thể tràn ra vùng chứa, khiến người dùng không thể xem nội dung hoặc sử dụng các chế độ điều khiển.
Bạn có thể kiểm soát kích thước video bằng CSS. Nếu CSS không đáp ứng được tất cả nhu cầu của bạn, thì các thư viện và trình bổ trợ JavaScript như FitVids có thể giúp ích, ngay cả đối với video trên YouTube và các nguồn khác. Rất tiếc, những tài nguyên này có thể làm tăng kích thước tải trọng mạng, gây ra hậu quả tiêu cực cho doanh thu và ví của người dùng.
Đối với các trường hợp sử dụng đơn giản như những trường hợp tôi mô tả ở đây, hãy sử dụng truy vấn phương tiện CSS để chỉ định kích thước của các phần tử tuỳ thuộc vào kích thước khung nhìn; max-width:
100% là bạn của bạn.
Đối với nội dung đa phương tiện trong iframe (chẳng hạn như video trên YouTube), hãy thử phương pháp thích ứng (như phương pháp do John Surdakowski đề xuất).
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
So sánh mẫu thích ứng với phiên bản không thích ứng. Như bạn có thể thấy, phiên bản không phản hồi không mang lại trải nghiệm tốt cho người dùng.
Hướng của thiết bị
Hướng thiết bị không phải là vấn đề đối với màn hình máy tính để bàn hoặc máy tính xách tay, nhưng lại cực kỳ quan trọng khi xem xét thiết kế trang web cho thiết bị di động và máy tính bảng.
Safari trên iPhone chuyển đổi linh hoạt giữa hướng dọc và ngang:
Hướng thiết bị trên iPad và Chrome trên Android có thể gặp vấn đề. Ví dụ: nếu không có bất kỳ tuỳ chỉnh nào, video phát trên iPad theo hướng ngang sẽ có dạng như sau:
Việc đặt width: 100% hoặc max-width: 100% của video bằng CSS có thể giải quyết nhiều vấn đề về bố cục hướng thiết bị.
Tự động phát
Thuộc tính autoplay kiểm soát việc trình duyệt có tải xuống và phát video ngay lập tức hay không. Cách hoạt động chính xác của tính năng này phụ thuộc vào nền tảng và trình duyệt.
Chrome: Tuỳ thuộc vào nhiều yếu tố, bao gồm nhưng không giới hạn ở việc người dùng đang xem trên máy tính hay không và liệu người dùng thiết bị di động có thêm trang web hoặc ứng dụng của bạn vào màn hình chính hay không. Để biết thông tin chi tiết, hãy xem phần Các phương pháp hay nhất về tính năng Tự động phát.
Firefox: Chặn tất cả video và âm thanh, nhưng cho phép người dùng nới lỏng các hạn chế này đối với tất cả trang web hoặc một số trang web cụ thể. Để biết thông tin chi tiết, hãy xem bài viết Cho phép hoặc chặn tính năng tự động phát nội dung nghe nhìn trong Firefox
Safari: Trước đây yêu cầu một cử chỉ của người dùng, nhưng đã nới lỏng yêu cầu đó trong các phiên bản gần đây. Để biết thông tin chi tiết, hãy xem phần Chính sách mới về <video> dành cho iOS.
Ngay cả trên các nền tảng có thể tự động phát, bạn vẫn cần cân nhắc xem có nên bật tính năng này hay không:
- Mức sử dụng dữ liệu có thể tốn kém.
- Việc phát nội dung nghe nhìn trước khi người dùng muốn có thể làm hao tổn băng thông và CPU, từ đó làm chậm quá trình hiển thị trang.
- Người dùng có thể đang ở trong bối cảnh mà việc phát video hoặc âm thanh gây phiền toái.
Tải sẵn
Thuộc tính preload cung cấp gợi ý cho trình duyệt về lượng thông tin hoặc nội dung cần tải trước.
| Giá trị | Mô tả |
|---|---|
none |
Người dùng có thể chọn không xem video, vì vậy, đừng tải trước nội dung nào. |
metadata |
Siêu dữ liệu (thời lượng, kích thước, bản lồng tiếng) phải được tải trước, nhưng với video ở mức tối thiểu. |
auto |
Bạn nên tải toàn bộ video xuống ngay lập tức. Chuỗi trống cũng tạo ra kết quả tương tự. |
Thuộc tính preload có các hiệu ứng khác nhau trên các nền tảng.
Ví dụ: Chrome lưu 25 giây video vào bộ đệm trên máy tính nhưng không lưu trên iOS hoặc Android. Điều này có nghĩa là trên thiết bị di động, có thể xảy ra độ trễ khi khởi động chế độ phát mà không xảy ra trên máy tính. Hãy xem phần Phát nhanh bằng tính năng tải trước âm thanh và video hoặc blog của Steve Souders để biết thêm thông tin chi tiết.
Giờ đây, khi đã biết cách thêm nội dung nghe nhìn vào trang web, bạn có thể tìm hiểu về tính năng Hỗ trợ tiếp cận nội dung nghe nhìn. Trong tính năng này, bạn sẽ thêm phụ đề vào video cho người khiếm thính hoặc khi không thể phát âm thanh.