Tìm hiểu video cơ bản. Tăng mức độ tương tác.
Bạn có đang nghĩ đến việc thêm video vào trang web của mình không? Khi các thiết bị và kết nối mạng trở nên 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ộ kỹ thuật xây dựng web của mình. Nghiên cứu cho thấy rằng các trang web có video 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ể chỉ cần thêm một thời gian nữa cho đến khi bạn thực hiện việc này.
Trong mọi khả năng, 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à phải đảm bảo rằng các tệp được xây dựng để phát nhanh và ổn định cho tất cả khách hàng của bạn.
Mặc dù video có thể giúp tăng mức độ tương tác và mức độ hài lòng của khách hàng, nhưng một video không phát hoặc không phát được 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, đúng không? Để thêm video, bạn phải thêm thẻ <video>, trỏ đến một nguồn, sau đó bắt đầu cuộc đua!
<video src="myVideo.mp4">
Và bạn đã đú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, bạn có thể thêm nhiều thuộc tính vào thẻ video để cải thiện bố cục và quá trình 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 hóa các tệp được phân phối đến trình duyệt. Để thực hiện việc này, hãy 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>
Tệp này tham chiếu đến 3 tệp nguồn riêng biệt. Trình duyệt bắt đầu ở trên cùng và chọn định dạng và bộ mã hoá và giải mã đầu tiên mà trình duyệt 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ộ mã hoá có các thuộc tính riêng. (Tìm hiểu 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 các 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 bài). Lựa chọn thứ hai là bộ mã hoá và giải mã H.265 của mp4, được hỗ trợ trên iOS và các máy Mac mới hơn. Những 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, trong khi vẫn phân phối video có chất lượng tương tự như 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, hỗ trợ 92% người dùng trên toàn cầu. Tuy nhiên, đây là định dạng cũ nên thường lớn hơn nhiều so với video WebM hoặc H.265. Trong một ví dụ, bạn có thể thấy sự khác biệt giữa phim dài 2 phút:
| Bộ mã hoá và giải mã | Kích thước tệp |
|---|---|
| VP8 | 5,5 MB |
| VP9 | 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 mà bạn có thể phân phối video của mình tốt hơn. Khi một video có kích thước nhỏ hơn được tải xuống, quá trình phát video sẽ diễn ra sớm hơn và vùng đệm video sẽ lấp đầy nhanh hơn. Điều này giúp giảm tình trạng tắc nghẽn trong quá trình phát video. Ngoài ra, tải của máy chủ sẽ giảm xuống, điều này bù đắp cho yêu cầu tăng dung lượng lưu trữ 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ữ trên thiết bị. Bằng cách sử dụng thuộc tính tải trước, bạn có thể kiểm soát lượng video
được tải xuống khi tải trang. Có ba giá trị cho thuộc tính tải trước: auto, metadata và none.
tải trước='auto'
Nếu 'auto' được sử dụng, toàn bộ video sẽ được tải xuống, bất kể người dùng có nhấn vào nút phát hay không. Điều này giúp video phát lại nhanh vì video sẽ được tải xuống thiết bị trước khi người dùng nhấn vào 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 phương pháp này khi xác suất có thể 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í.
tải trước='siêu dữ liệu'
Đây là chế độ cài đặt mặc định để 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ảnh báo với 'auto', nhưng việc tải xuống chỉ 3% video sẽ gây ra 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.
tải trước='không có'
Cách này giúp tiết kiệm nhiều dữ liệu nhất, nhưng sẽ khiến video khởi động chậm hơn khi nhấn vào chế độ cài đặt, vì theo chế độ cài đặt, 0 kilobyte video sẽ được tải trước trên thiết bị. Đối với các video hiện diện nhưng không có khả năng phát, đây là chế độ cài đặt thích hợp. Bạn cũng có thể sử dụng chế độ này nếu người dùng đã bật Chế độ Lite trong trình duyệt.
áp phích
Bạn nên có một hình ảnh áp phích hiện 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 một màn hình đen trước khi bắt đầu phát.
Video có áp phích sẽ hấp dẫn hơn nhiều.
Bằng cách thêm ảnh thay vì hộp đen trên trang, bạn sẽ làm cho 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 bắt đầu. Vì lý do đó, bạn có thể cân nhắc tránh thêm áp phích cho video tự động phát (vì quá trình 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 bộ điều khiển chế độ phát. Nếu không có những thành phần này, khách hàng không thể bắt đầu hoặc dừng video của bạn. Bạn nên thêm nút này vào video để
người dùng có thể dừng, tạm dừng, thay đổi âm lượng, v.v. Đối với video trong nền hoặc video 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 bạn không cung cấp nút điều khiển, thì nút này sẽ bị tắt tiếng trong toàn bộ quá trình phát. Nếu muốn, bạn có thể xoá bản âm thanh khỏi video. Điều này giúp giảm hơn nữa kích thước của tệp video được phân phối cho khách hàng.
Giống như vùng chứa và bộ mã hoá và giải mã, việc xoá tệp âm thanh (còn gọi là demuxing) cũng nằm ngoài phạm vi của bài viết này. Bạn có thể tìm hướng dẫn trong Bản tóm tắt về thao tác điều khiển nội dung nghe nhìn.
vòng giữ cố định
Để phân phối một video lặp lại nội dung (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, 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 của mình phát ngay lập tức (ví dụ: dưới dạng video trong 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" autoplay>
Tuy nhiên, để video tự động phát trên trình duyệt dành cho thiết bị di động, bạn cũng phải thêm thuộc tính muted:
<video src="myVideo.mp4" autoplay muted>
Kết luận
Bạn chỉ cần thêm video vào trang web của mình sẽ tạo ra một không gian tương tác mới cho 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 việc phát video 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 những người truy cập trang web của bạn.