Bạn đã chuẩn bị đúng cách tệp video cho web. Bạn đã cung cấp đúng 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 một cách chính xác, 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ạ dưới đây. 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 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ù 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.
- Tính năng chuyển đổi phía máy khách giúp giảm độ trễ; chỉ cần một yêu cầu được thực hiện để nhận 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 từng loại 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 phải tải một phần của video xuống để "nắm bắt" đị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ể 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 A Digital Media Outline for Geeks để 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 Công cụ cho nhà phát triển để so sánh hoạt động mạng với 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 phạm vi theo mặc định. Vì một số dịch vụ lưu trữ 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, biểu tượ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 ả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ữ của mình.
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 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ử này có thể tràn vùng chứa, khiến người dùng không thể xem nội dung hoặc không sử dụng được 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 nội dung đa 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 video width: 100% hoặc max-width: 100% bằng CSS có thể giải quyết nhiều vấn đề về bố cục hướng trên 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 xem trên máy tính hay không và 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 bài viết Các phương pháp hay nhất cho 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 phần Cho phép hoặc chặn tính năng tự động phát nội dung nghe nhìn trên 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ể bật tính năng 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 bất kỳ nội dung nào. |
metadata |
Siêu dữ liệu (thời lượng, kích thước, bản âm thanh) phải được tải trước, nhưng với video 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ó tác độ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 để hỗ trợ người khiếm thính hoặc khi không thể phát âm thanh.