Tìm hiểu kiến thức cơ bản về video. Tăng mức độ tương tác.
Bạn đang cân nhắc việc thêm video vào trang web của mình? Khi các thiết bị và kết nối mạng ngày càng nhanh và mạnh mẽ hơn, bạn có thể vượt ra ngoài hình ảnh và thêm video vào bộ công cụ kỹ thuật để xây dựng web. Nghiên cứu cho thấy rằng những trang web có video sẽ giúp tăng mức độ tương tác và doanh số bán hàng. Vì vậy, ngay cả khi bạn chưa thêm video vào trang web, thì có thể bạn sẽ sớm làm việc này.
Rất có thể các tệp video mà bạn thêm vào trang web của mình sẽ là những tệp lớn nhất được tải xuống. Vì lý do đó, điều cực kỳ quan trọng là bạn phải đảm bảo rằng các tệp được tạo để phát nhanh và ổn định cho tất cả khách hàng.
Mặc dù video có thể làm tăng mức độ tương tác và sự hài lòng của khách hàng, nhưng một video không phát hoặc bị giật trong khi phát có thể khiến khách hàng thất vọng.
Bài đăng này tập trung vào việc sử dụng thẻ <video> HTML5 để phân phối video và do đó, sẽ không đề cập đến video phát trực tuyến.
Hãy cùng bắt đầu nào!
Thẻ <video>
Điều này có vẻ hiển nhiên, phải không? Để thêm video, bạn phải thêm thẻ <video>, trỏ đến một nguồn rồi bắt đầu!
<video src="myVideo.mp4">
Bạn nói đúng. Ở cấp cao nhất, đây là tất cả những gì bạn cần để thêm video vào web. Tuy nhiên, có nhiều thuộc tính mà bạn có thể thêm vào thẻ video để cải thiện bố cục và cách phân phối video.
Thẻ <source>
Có lẽ cách tốt nhất để cải thiện việc phân phối video trên web là tối ưu hoá các tệp được phân phối đến trình duyệt. Cách thực hiện việc này là sử dụng thẻ <source>:
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
Mã này tham chiếu đến 3 tệp nguồn riêng biệt. Trình duyệt khởi động ở trên cùng và chọn định dạng cũng như bộ mã hoá và giải mã đầu tiên có thể sử dụng. Trong thế giới video, định dạng tệp, thường được gọi là vùng chứa, có thể được lưu bằng nhiều bộ mã hoá và giải mã, mỗi bộ có các thuộc tính khác nhau. (Xem thêm về vấn đề này tại đây.) Trong ví dụ trên, lựa chọn đầu tiên là định dạng WebM (có thể được mã hoá bằng bộ mã hoá và giải mã VP8 hoặc VP9) và được 78% người dùng trên toàn cầu hỗ trợ (tại thời điểm viết). Lựa chọn thứ hai là bộ mã hoá và giải mã H.265 của mp4 được hỗ trợ trên các máy Mac chạy iOS và mới hơn. Các bộ mã hoá và giải mã này mới hơn và cải thiện khả năng nén dữ liệu, đồng thời cung cấp video có chất lượng tương đương với các định dạng video cũ.
Lựa chọn cuối cùng trong danh sách của chúng tôi là H.264 mp4. Định dạng này được 92% người dùng trên toàn cầu hỗ trợ, nhưng là một định dạng cũ và do đó, thường lớn hơn nhiều so với video WebM hoặc H.265. Trong ví dụ sau, bạn có thể thấy sự khác biệt đối với một bộ phim dài 2 phút:
| Bộ mã hoá và giải mã | Kích thước tệp |
|---|---|
| VP8 | 5,5 MB |
| Văn bản 9 | 4,2 MB |
| H.265 | 5,4 MB |
| H.264 | 16,1 MB |
Phân phối các tệp có kích thước nhỏ hơn là cách tối ưu hoá hiệu suất tốt nhất để bạn có thể phân phối video hiệu quả hơn. Khi tải một video có kích thước nhỏ hơn, quá trình phát video sẽ diễn ra sớm hơn và vùng đệm video sẽ được lấp đầy nhanh hơn. Điều này giúp giảm tình trạng bị treo trong khi phát video. Ngoài ra, tải máy chủ sẽ giảm xuống, bù cho yêu cầu về dung lượng lưu trữ tăng lên của nhiều tệp video.
Thuộc tính tải trước
Video không thể bắt đầu phát cho đến khi có một số video được tải xuống và lưu trữ cục bộ. Khi sử dụng thuộc tính tải trước, bạn có thể kiểm soát lượng video sẽ tải xuống khi tải trang. Có 3 giá trị cho thuộc tính tải trước: auto, metadata và none.
preload='auto'
Nếu bạn sử dụng 'auto', toàn bộ video sẽ được tải xuống, bất kể người dùng có nhấn nút phát hay không. Điều này cho phép phát video nhanh vì video được tải xuống cục bộ trước khi người dùng nhấn nút phát. Từ góc độ sử dụng dữ liệu (và tải máy chủ), bạn chỉ nên sử dụng tính năng này khi có nhiều khả năng người dùng sẽ xem video. Nếu không, tất cả dữ liệu của một video tải xuống đầy đủ sẽ bị lãng phí.
preload='metadata'
Đây là chế độ cài đặt mặc định cho tính năng tải trước trên Chrome và Safari. Khi sử dụng 'metadata', 3% đầu tiên của video sẽ được tải xuống. Mặc dù có cùng các lưu ý với 'auto', nhưng việc chỉ tải 3% video xuống sẽ có chi phí sử dụng máy chủ/dữ liệu nhỏ hơn nhiều so với toàn bộ video, trong khi vẫn đảm bảo một phần video được lưu trữ cục bộ để khởi động video nhanh.
preload='none'
Chế độ này tiết kiệm nhiều dữ liệu nhất, nhưng sẽ làm chậm quá trình khởi động video khi nhấn nút phát, vì như trạng thái cài đặt, 0 kilobyte video sẽ được tải trước cục bộ trên thiết bị. Đây là chế độ cài đặt phù hợp đối với những video có sẵn nhưng khó có thể phát. Tính năng này cũng có thể được sử dụng nếu người dùng đã bật chế độ Lite trong trình duyệt của họ.
áp phích
Bạn nên có một hình ảnh áp phích hiển thị trên cửa sổ video trước khi video bắt đầu phát:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Video không có áp phích sẽ hiển thị màn hình đen trước khi bắt đầu.
Video có áp phích sẽ thu hút người xem hơn nhiều.
Bằng cách thêm ảnh thay vì hộp màu đen trên trang, bạn sẽ giúp trang web của mình trở nên hấp dẫn và tương tác hơn. Tuy nhiên, việc sử dụng thuộc tính poster sẽ thêm một lượt tải hình ảnh xuống trước khi quá trình tải video xuống bắt đầu. Vì lý do đó, bạn nên cân nhắc việc tránh thêm áp phích cho những video tự động phát (vì lượt tải xuống bổ sung sẽ làm chậm quá trình tải video xuống).
Bộ điều khiển chế độ phát
Việc thêm thuộc tính controls sẽ thêm các chế độ điều khiển phát. Nếu không có các nút này,
khách hàng sẽ không thể bắt đầu hoặc dừng video của bạn. Bạn nên thêm phần này cho video để người dùng có thể dừng và tạm dừng, thay đổi âm lượng, v.v. Đối với video phát ở chế độ nền hoặc lặp lại, bạn nên bỏ qua thuộc tính này.
đã tắt tiếng
Thuộc tính muted khiến quá trình phát bắt đầu ở trạng thái tắt tiếng. Nếu không có chế độ điều khiển nào được cung cấp, video sẽ vẫn bị tắt tiếng trong toàn bộ quá trình phát. Nếu đó là ý định của bạn, bạn nên xoá bản âm thanh khỏi video. Việc này giúp giảm kích thước tệp video được phân phối cho khách hàng.
Cũng như các vùng chứa và bộ mã hoá và giải mã, việc xoá tệp âm thanh (còn gọi là giải mã) cũng nằm ngoài phạm vi của bài viết này. Bạn có thể xem hướng dẫn trong Bảng tổng quan về cách thao túng nội dung nghe nhìn.
lặp lại
Để phân phối video lặp lại nội dung (chẳng hạn như ảnh GIF động), hãy thêm thuộc tính loop. Vì tệp video thường nhỏ hơn nhiều so với ảnh GIF động, nên cơ chế này cho phép bạn thay thế ảnh GIF bằng tệp video.
Tự động phát video
Nếu muốn video phát ngay lập tức (ví dụ: dưới dạng video nền hoặc video lặp lại như ảnh GIF động), bạn có thể thêm thuộc tính autoplay:
<video src="myVideo.mp4" playsinline autoplay>
Tuy nhiên, để video tự động phát trên trình duyệt di động, bạn cũng phải thêm thuộc tính muted:
<video src="myVideo.mp4" playsinline autoplay muted>
Kết luận
Việc thêm video vào trang web sẽ giúp bạn tăng mức độ tương tác với khách hàng, nhưng điều quan trọng là bạn phải phân phối nội dung đúng cách, đảm bảo video phát liền mạch và không bị gián đoạn. Việc sử dụng các thuộc tính tích hợp sẵn của thẻ <video> có thể giúp bạn phân phối video hoàn hảo cho tất cả những người truy cập vào trang web của bạn.