Làm cách nào để chèn video vào HTML5?

Nguồn / Nguồn thay thế 1 / Nguồn thay thế 2. Trong Nguồn, nhập vị trí của tệp video. Ngoài ra, hãy nhấp vào biểu tượng thư mục để chọn tệp video từ hệ thống tệp cục bộ. Hỗ trợ định dạng video khác nhau trên các trình duyệt khác nhau. Nếu định dạng video trong Nguồn không được hỗ trợ trên trình duyệt thì định dạng video được chỉ định trong Nguồn thay thế 1 hoặc Nguồn thay thế 2 sẽ được sử dụng. Trình duyệt chọn định dạng được công nhận đầu tiên để hiển thị video

Trước HTML5, để phát video trên trang web, bạn cần sử dụng plugin như Adobe Flash Player. Với việc giới thiệu HTML5, giờ đây bạn có thể đặt video trực tiếp vào chính trang đó

Điều này giúp có thể phát video trên các trang được thiết kế cho thiết bị di động, vì các plugin như Adobe Flash Player không hoạt động trên Android hoặc iOS

Phần tử HTML được sử dụng để nhúng video vào tài liệu web. Nó có thể chứa một hoặc nhiều nguồn video, được biểu thị bằng thuộc tính src hoặc phần tử nguồn

Để nhúng tệp video, chỉ cần thêm đoạn mã này và thay đổi src thành đường dẫn tệp video của bạn

Phần tử được hỗ trợ bởi tất cả các trình duyệt hiện đại. Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ định dạng tệp video giống nhau. Các tệp MP4 là định dạng được chấp nhận rộng rãi nhất và các định dạng khác như WebM và Ogg được hỗ trợ trong Chrome, Firefox và Opera

Để đảm bảo video của bạn phát trên hầu hết các trình duyệt, cách tốt nhất là mã hóa chúng thành cả định dạng Ogg và MP4, đồng thời đưa cả hai vào phần tử như trong ví dụ trên. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên

Nếu vì lý do nào đó mà trình duyệt không nhận ra bất kỳ định dạng nào, dòng chữ "Trình duyệt của bạn không hỗ trợ phần tử video. Vui lòng cập nhật nó lên phiên bản mới nhất" sẽ được hiển thị thay thế

Bạn cũng có thể nhận thấy

2 trong thẻ . Phần tử này bao gồm rất nhiều thuộc tính hữu ích để tùy chỉnh trải nghiệm phát lại

2

Thuộc tính

2 xử lý xem các điều khiển như nút phát/tạm dừng hoặc thanh trượt âm lượng có xuất hiện hay không

Đây là một thuộc tính boolean, có nghĩa là nó có thể được đặt thành true hoặc false. Để đặt nó thành true, chỉ cần thêm nó vào thẻ . Nếu nó không có trong thẻ thì nó sẽ được đặt thành false và các điều khiển sẽ không xuất hiện

4

"autoplay" có thể được đặt thành true hoặc false. Bạn đặt nó thành true bằng cách thêm nó vào thẻ, nếu nó không có trong thẻ thì nó được đặt thành false. Nếu được đặt thành true, video sẽ bắt đầu phát ngay sau khi đủ bộ nhớ đệm để video có thể phát. Nhiều người thấy video tự động phát gây rối hoặc khó chịu. Vì vậy, hãy sử dụng tính năng này một cách tiết kiệm. Cũng xin lưu ý rằng một số trình duyệt dành cho thiết bị di động, chẳng hạn như Safari dành cho iOS, bỏ qua thuộc tính này

Đây là một thuộc tính boolean khác. Bằng cách bao gồm

4 trong thẻ , video được nhúng sẽ bắt đầu phát ngay sau khi đủ bộ nhớ đệm

Xin lưu ý rằng nhiều người thấy video tự động phát gây phiền toái hoặc khó chịu, vì vậy hãy hạn chế sử dụng tính năng này. Cũng lưu ý rằng một số trình duyệt di động như Safari dành cho iOS hoàn toàn bỏ qua thuộc tính này

7

Thuộc tính

7 là hình ảnh hiển thị trên video cho đến khi người dùng nhấp để phát video đó

Video có thể tốn kém

Mặc dù việc đưa video vào trang của bạn dễ dàng hơn bao giờ hết, nhưng tốt hơn hết bạn nên tải video của mình lên một dịch vụ như YouTube, Vimeo hoặc Wistia và thay vào đó nhúng mã của chúng. Điều này là do việc phân phát video có thể tốn kém, cả về chi phí máy chủ và người xem của bạn nếu họ có gói dữ liệu hạn chế

Lưu trữ các tệp video của riêng bạn cũng có thể dẫn đến các vấn đề về băng thông, điều này có thể có nghĩa là video tải chậm bị giật hình. Ngoài ra, các trình duyệt có xu hướng khác nhau về chất lượng khi phát lại video, vì vậy thật khó để kiểm soát chính xác những gì người xem của bạn sẽ thấy. Việc tải xuống các video được nhúng bằng thẻ cũng rất dễ dàng, vì vậy nếu lo ngại về vi phạm bản quyền, bạn có thể muốn xem xét các tùy chọn khác

Và với điều đó, hãy tiếp tục và nhúng video vào nội dung trái tim của bạn. Hoặc không - đó là cuộc gọi của bạn

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Bạn có thể sử dụng video trong HTML5 không?

Mã HTML để thêm video là gì?

Làm cách nào để nhúng video mp4 vào HTML?