Bạn đã chuẩn bị đúng cách một tệp video cho web. Bạn đã cung cấp đúng kích thước và độ phân giải. Bạn thậm chí đã tạo các tệp WebM và MP4 riêng biệt cho các trình duyệt khác nhau.
Để mọi người có thể xem 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 những thông tin cơ bản về các thẻ này, bài viết này còn giải thích các thuộc tính mà bạn nên thêm vào các thẻ đó để tạo ra trải nghiệm tốt cho người dùng.
Chỉ định một tệp duy nhất
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 có thể phát tệp video được cung cấp hay không. Nếu không, văn bản đính kèm sẽ xuất hiện.
<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 phần Kiến thức cơ bản về tệp đa 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ụ dưới đây tạo ra video được nhúng và được dùng làm ví dụ ở phần sau của bài viết này.
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="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 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 tệp mà trình duyệt có thể phát xuống.
Phương pháp này có một số lợi thế so với việc phân phát HTML hoặc tập lệnh phía máy chủ khác nhau, đặ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ỉ có một yêu cầu được thực hiện để lấy nội dung.
- Việc cho phép trình duyệt chọn định dạng sẽ đơn giản hơn, nhanh hơn và có khả năng đá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 để "đánh hơ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ễ là yếu tố then chốt, 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 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 xem bài viết Sách vỡ lòng về nội dung nghe nhìn kỹ thuật số cho người đam mê công nghệ để tìm hiểu thêm về cách video và âm thanh hoạt động 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 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 của bạn có cảm giác thích ứng hơn: sử dụng các đoạn nội dung nghe nhìn để thêm thời gian bắt đầu và kết thúc vào phần tử video.
Để sử dụng một đoạn nội dung nghe nhìn, hãy thêm #t=[start_time][,end_time] vào URL của nội dung nghe nhìn. Ví dụ: để phát video từ giây thứ 5 đến giây thứ 10, hãy chỉ định:
<source src="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 sẽ bắt đầu video ở phút thứ nhất, giây thứ năm. Để 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 để cung cấp nhiều chế độ xem trên cùng một video (như điểm chèn quảng cáo 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 về dải ô và bạn phải bật chức năng đó. Hầu hết các máy chủ đều bật yêu cầu dải ô 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 cần xác nhận rằng các yêu cầu theo dải ô có thể 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ụ cho nhà phát triển của trình duyệt. Ví dụ: trong Chrome, thông tin 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 đề đó có nội dung 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ữ 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 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à một phương án dự phòng nếu video src bị hỏng hoặc nếu không có đị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, điều này tiêu tốn một số băng thông và yêu cầu 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 ra ngoài vùng chứa
Khi các phần tử video quá lớn so với khung nhìn, chúng có thể tràn ra khỏi vùng chứa, khiến người dùng không thể xem 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 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 của bạn và ví của người dùng.
Đối với các mục đích sử dụng đơn giản như những mục đích tôi đang 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 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 thích ứng. Như bạn có thể thấy, phiên bản không thích ứng 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 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 có thể chuyển đổi tốt giữa hướng dọc và hướng 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 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 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 hay không. Để biết thông tin chi tiết, hãy xem 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 quy định 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 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 bài viết Chính sách mới về <video> cho iOS.
Ngay cả trên các nền tảng có thể tự động phát, bạn cũng 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ể 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 tiêu tốn băng thông và CPU, từ đó làm chậm quá trình kết xuất trang.
- Người dùng có thể đang ở trong bối cảnh mà việc phát video hoặc âm thanh sẽ 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 chỉ có một lượng video tối thiểu. |
auto |
Việc tải toàn bộ video xuống ngay lập tức được coi là mong muốn. Chuỗi trống cũng cho 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 khác nhau.
Ví dụ: Chrome lưu vào vùng đệm 25 giây video 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 tình trạng trễ khi bắt đầu phát,
nhưng không xảy ra trên máy tính. Hãy xem bài viết 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 nên 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 cho người khiếm thính hoặc khi không thể phát âm thanh.