Bạn đã chuẩn bị tệp video đúng cách cho web. Bạn đã cung cấp cho 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à MP4 riêng cho các trình duyệt khác nhau.
Để mọi người có thể nhìn thấy video của bạn, bạn vẫn cần phải thêm video đó vào một trang web. Để làm vậy, bạn phải thêm 2 phần tử HTML: phần tử <video> và phần tử <source>. Ngoài kiến thức 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 ra trải nghiệm người dùng tốt.
Hãy chỉ định một tệp duy nhất
Mặc dù bạn không nên dùng phần tử này, 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 tuỳ chọn này để xác định xem
có thể phát tệp video đã 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ớ lại bài viết Kiến thức cơ bản về tệp nội dung nghe nhìn: 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 mà bạn dùng làm ví dụ ở phần sau của 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>
Dùng thử trên giao diện Glitch
Bạn phải luôn thêm thuộc tính type vào sự kiện thẻ <source> (không bắt buộc). Điều này đảm bảo rằng trình duyệt chỉ tải tệp mà trình duyệt có thể phát.
Phương pháp này có một số ưu điểm so với việc phân phát nhiều HTML hoặc tập lệnh 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 giúp giảm độ trễ; chỉ một yêu cầu được thực hiện để nhận nội dung.
- Việc cho phép trình duyệt chọn một định dạng sẽ đơn giản, nhanh hơn 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 nguồn tệp sẽ giúp 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 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 di động, khi băng thông và độ trễ phải ở mức cao và sự kiên nhẫn của người dùng có thể bị hạn chế. 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 chứa các loại không được hỗ trợ.
Có một số cách bạn có thể tìm hiểu chi tiết. Hãy tham khảo Digital Media Primer 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à làm cho trang web của bạn phản hồi nhanh hơn: sử dụng các mảnh nội dung nghe nhìn để thêm thời gian bắt đầu và thời gian kết thúc cho phần tử video.
Để sử dụng một mảnh nội dung nghe nhìn, hãy thêm #t=[start_time][,end_time] vào URL nội dung nghe nhìn. Ví dụ: để phát video từ giây 5 đến giây 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 bằng <hours>:<minutes>:<seconds>. Ví dụ: #t=00:01:05 bắt đầu video tại thời điểm 1 phút 5 giây. Để chỉ phá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 lượt xem trên cùng một video (như điểm tín hiệu trong đĩa DVD) mà không 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 về phạm vi và bạn phải bật tính năng đó. Hầu hết các máy chủ đều cho phép yêu cầu phạm vi theo mặc định. Vì một số dịch vụ lưu trữ tắt tính năng này, bạn nên xác nhận rằng bạn có thể yêu cầu phạm vi để sử dụng các mảnh trên trang web của mình.
May mắn là bạn có thể thực hiện việc này trong công cụ cho nhà phát triển trình duyệt của mình. Chẳng hạn như trong Chrome, tệp này nằm trong Bảng điều khiển mạng. Hãy tìm tiêu đề Accept-Ranges và xác minh rằng tiêu đề đó có nội dung 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 bytes dưới dạng giá trị, bạn cần liên hệ với nhà cung cấp dịch vụ lưu trữ của mình.
Bao gồ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 biết nội dung ngay khi phần tử này 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 video src bị hỏng hoặc nếu không định dạng video nào được cung cấp được hỗ trợ. Nhược điểm duy nhất của hình ảnh áp phích là
yêu cầu tệp bổ sung, tiêu tốn một số băng thông và đòi hỏi kết xuất.
Để biết thêm thông tin, hãy xem bài viết Mã hoá hình ảnh hiệu quả.
Đảm bảo video không tràn vùng chứa
Khi các thành phần video quá lớn so với khung nhìn, các thành phần này có thể tràn vùng chứa, khiến người dùng không thể xem được nội dung hoặc sử dụng các nút đ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 toàn bộ 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 các video trên YouTube và các nguồn khác. Thật không may, các tài nguyên này có thể làm tăng kích thước tải trọng mạng và gây ra hậu quả tiêu cực đối với doanh thu của bạn và ví của người dùng.
Để sử dụng đơn giản như những gì tôi đang mô tả ở đây, hãy sử dụng truy vấn nội dung nghe nhìn CSS để chỉ định kích thước của các phần tử phụ 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 nghe nhì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 phản hồi. Như bạn có thể thấy, phiên bản không phản hồi không phải là trải nghiệm người dùng tuyệt vời.
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 hoặc máy tính xách tay nhưng là 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 thực hiện tốt việc chuyển đổi 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 ở 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 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 video xuống và phát ngay lập tức hay không. Cách thức hoạt động chính xác phụ thuộc vào nền tảng và trình duyệt.
Chrome: Phụ 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 có 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 của họ 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 về tính năng tự động phát.
Firefox: Chặn mọi video và âm thanh nhưng cho phép người dùng nới lỏng các quy tắc hạn chế này đối với tất cả trang web hoặc các 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 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 <video> mới dành cho iOS.
Ngay cả trên các nền tảng có thể sử dụng 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:
- Việc sử dụng dữ liệu có thể gây tốn kém.
- Việc phát nội dung đa phương tiện trước khi người dùng muốn có thể tiêu tốn nhiều băng thông và CPU, từ đó trì hoãn việc hiển thị trang.
- Người dùng có thể đang ở trong trường hợp phát video hoặc âm thanh bị xâm phạm.
Tải sẵn
Thuộc tính preload 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ị | Nội dung 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 |
Bạn nên tải trước siêu dữ liệu (thời lượng, kích thước, bản văn bản) nhưng chỉ cung cấp ít video nhất. |
auto |
Việc tải toàn bộ video xuống ngay lập tức được xem là mong muốn. Chuỗi trống sẽ dẫn đến cùng một kết quả. |
Thuộc tính preload có các hiệu ứng khác nhau trên các nền tảng khác nhau.
Ví dụ: Chrome lưu vào bộ đệm 25 giây của video trên máy tính nhưng không lưu vào bộ đệm nào trên iOS hoặc Android. Điều này có nghĩa là trên thiết bị di động, có thể có độ trễ khởi động phát không xảy ra trên máy tính để bàn. Xem phần Phát nhanh với 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, bạn đã biết cách thêm nội dung nghe nhìn vào trang web, đã đến lúc tìm hiểu về Hỗ trợ tiếp cận nội dung nghe nhìn, trong đó bạn sẽ thêm phụ đề vào video dành cho người khiếm thính hoặc không thể dùng cách phát âm thanh.