Hôm nay, bạn sẽ học cách nhanh chóng nhúng video MP4 vào HTML bằng cách sử dụng <video> yếu tố. Tôi sẽ đề cập đến những điều sau:
- Cách điều chỉnh kích thước trình phát video của bạn
- Cách tự động phát video của bạn
- Cách lặp lại vô hạn video của bạn
Hầu hết các hướng dẫn sử dụng GIF cho các video nhỏ để minh họa các khái niệm. Tôi nhận thấy rằng MP4 có chất lượng tốt hơn và chiếm ít dung lượng hơn. Không giống như WebM, MP4 hoạt động trên tất cả các trình duyệt hiện đại và bạn cũng có thể tải chúng lên các dịch vụ video như YouTube.
Nhúng video với phần tử video HTML5
Để hiển thị video MP4 trong HTML của bạn, bạn cần sử dụng <video> HTML5 yếu tố. Cách triển khai đơn giản nhất trông giống như sau:
<video width="500" controls>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>
Bạn có thể xóa các controls , nhưng tôi không khuyên bạn nên dùng nó, vì nó là thứ cho phép người dùng tạm dừng / phát / tua lại video của bạn.
500 giá trị được đo bằng đơn vị pixel (500px).
Chỉ cần thay thế "path-to-your-video.mp4" với nguồn MP4 thực, bạn có thể sử dụng nguồn này để thử nghiệm (từ một trong các hướng dẫn của tôi)
https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4Điều chỉnh kích thước trình phát video của bạn (chiều rộng / chiều cao)
Video của bạn hiện có chiều rộng là 500 pixel, bạn có thể thay đổi chiều rộng đó thành bất kỳ giá trị nào bạn muốn. Nếu bạn muốn nó chiếm 100% không gian tương đối (vùng chứa phần tử video của bạn nằm bên trong), bạn chỉ cần thay đổi nó thành width="100%" .
Bạn cũng có thể điều chỉnh chiều cao bằng cách sử dụng height . Dưới đây là một ví dụ về cả hai cách đang được sử dụng:
<video width="100%" height="400" controls>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>Tự động phát video của bạn (một lần)
Để tự động phát video MP4 của bạn một lần lần đầu tiên người dùng của bạn nhìn thấy video của bạn trên màn hình của họ, hãy thêm autoplay thuộc tính trên phần tử video:
<video width="500" controls autoplay>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>Cách tự động phát hoạt động
Chức năng tự động phát sẽ tự động kích hoạt ngay sau khi người dùng của bạn có video bên trong khung nhìn của màn hình.
Lặp lại video của bạn
Để lặp lại (phát vô hạn) video MP4 của bạn trong HTML5, hãy sử dụng loop thuộc tính:
<video width="500" controls autoplay loop>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>
Lưu ý: các điều khiển controls thuộc tính cho phép bạn sử dụng để tạm dừng / dừng video, nhưng xin lưu ý rằng video lặp lại có thể gây khó chịu, đặc biệt là với âm thanh. Chỉ sử dụng thuộc tính loop khi nó có ý nghĩa trong các trường hợp sử dụng cụ thể.
Hỗ trợ trình duyệt
Thời kỳ của các trình duyệt khủng long cũ gần như đã qua. Nhưng đối với các trình duyệt không hỗ trợ phần tử video, bạn có thể thêm một số văn bản vào giữa <video> để cho người dùng của bạn biết:
<video width="500" controls autoplay>
<source src="path-to-your-video.mp4" type="video/mp4" />
Your browser is outdated, update it to display the video
</video>Văn bản sẽ chỉ được hiển thị trong các trình duyệt cũ đã lỗi thời (bên dưới Internet Explorer 9).
Sử dụng WebM với dự phòng MP4
Nếu bạn có cả phiên bản WebM và MP4 cho video của mình, bạn có thể sử dụng mã sau để sử dụng MP4 làm dự phòng, nếu trình duyệt của người dùng của bạn không hỗ trợ WebM:
<video width="500" controls>
<source src="path-to-your-video.webm" type="video/webm" />
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>Lưu ý:hiện tại, chỉ có Chrome và Opera hỗ trợ đầy đủ WebM, nhưng FireFox và Edge cũng đang nỗ lực triển khai nó.
Mẹo thưởng
Để nhanh chóng quay video MP4, bạn có thể sử dụng các công cụ miễn phí sau:
- Ứng dụng Kap (Mac)
- Bản ghi màn hình Icecream (Windows)
Để tải lên và lưu trữ video của bạn miễn phí, tôi khuyên bạn nên sử dụng Cloudinary.