Thẻ nào được sử dụng để thêm tệp mp4 vào html5?

• Thẻ video HTML5 là gì?

• Video HTML5 hoạt động như thế nào?

• Các vấn đề thường gặp với Thẻ video HTML5

• Khả năng tương thích thẻ video HTML5 trên nhiều trình duyệt

• Chuyển đổi video HTML5

• Thuộc tính video HTML5

• Cách cải thiện khả năng truy cập video

• The Elements of the ‘’ Attribute

• Video phản hồi. Cách giữ cho video của bạn thân thiện với thiết bị di động và máy tính bảng

Nếu bạn đang tìm cách phát huy tiềm năng của video vào năm 2022 thì bạn chắc chắn đang ở đúng nơi.  
Hãy bắt đầu, nhưng trước tiên.  

Phần tử video HTML là gì?

Phần tử `video` được Opera đề xuất lần đầu tiên vào năm 2007 và sau đó được thêm vào đặc tả HTML5. Trước đó, nếu bạn muốn thêm video vào trang HTML, bạn phải sử dụng Adobe Flash.  
Có một vài vấn đề với điều đó. Flash có một lịch sử lâu dài về các lỗi bảo mật, sử dụng nhiều CPU và không được hỗ trợ trên Android hoặc iOS.  
Clearly, we needed an alternative that was lightweight, natively supported across the web, and worked seamlessly on mobile devices. Enter the `` element.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng nó.  
Bạn sẽ tìm hiểu về cả trường hợp sử dụng cơ bản và nâng cao của phần tử `video`, cách đảm bảo rằng video của bạn phát trên nhiều trình duyệt bằng cách cung cấp nhiều nguồn video, cách giữ cho video của bạn có thể truy cập được bằng cách bao gồm chú thích/phụ đề bằng WebVTT và cả cách

Thẻ video HTML5 là gì?

The `` element is simply a tag used to embed video content in an HTML document. As of 2022 it is excellently supported across all modern browsers [both mobile and desktop], except for Opera Mini. 

Video HTML5 hoạt động như thế nào?

To add video to your page using the `` element, use the code shown in this image: 
 

`điều khiển`

Điều này chỉ định rằng các điều khiển video như Phát, Tạm dừng, Âm lượng, v.v. sẽ được hiển thị, cho phép người dùng kiểm soát phát lại video

` src `

Chỉ định vị trí hoặc đường dẫn đến tệp phương tiện video mà bạn muốn nhúng

`loại`

Điều này xác định loại MIME hoặc định dạng của tệp video, giúp trình duyệt xác định trước xem nó có thể giải mã tệp hay không. Điều này dẫn đến tải xuống và hiển thị nhanh hơn

`

`

Văn bản trong thẻ này đóng vai trò là nội dung dự phòng sẽ hiển thị nếu trình duyệt của người dùng không hỗ trợ phần tử `video` hoặc định dạng của video được nhúng
This example depicts the basic use of the `` tag. 
Tốt nhưng chưa đủ tốt.  

Sự cố với Thẻ video HTML5

The problem is that different browsers don’t support the same media formats in their implementations of the HTML5 ``, mainly because of patent issues. 
Điều này có nghĩa là định dạng MP4 có thể không được trình duyệt hiện tại của người dùng hỗ trợ. Trên thực tế, MP4 hiện có hỗ trợ kém trong Firefox dành cho Android.
Đây là bảng hỗ trợ trình duyệt cho Định dạng Video MP4.  

Khả năng tương thích thẻ video HTML5 trên nhiều trình duyệt

Vậy làm cách nào để đảm bảo video của bạn có thể phát được trên tất cả các trình duyệt trên tất cả các nền tảng?
Hiện tại có ba định dạng video được hỗ trợ bởi đặc tả HTML5
– WebM
– Ogg
– MP4
Các trình duyệt khác nhau hỗ trợ kết hợp tất cả hoặc một số trong ba định dạng vì nhiều lý do khác nhau, một trong số đó là luật bằng sáng chế.  
To ensure video compatibility across browsers, HTML5 provides the `` tag, which you can use to provide alternative video sources of different formats. 
Đây là một ví dụ về mã chúng tôi sử dụng để làm điều này

Chuyển đổi video HTML5

Có một số trình chuyển đổi video HTML mà bạn có thể sử dụng để chuyển đổi video từ định dạng này sang định dạng khác, nhưng bạn có thể thắc mắc.  
“Điều này có nghĩa là tôi phải chuyển đổi tất cả các video của mình thành ba định dạng khác nhau mỗi lần sao?”
Theo tôi, bao gồm cả ba định dạng là không cần thiết. Tôi khuyên bạn nên sử dụng MP4 và WebM. MP4 có hỗ trợ trình duyệt lớn nhất và các trình duyệt không có hỗ trợ tuyệt vời cho nó hỗ trợ đầy đủ WebM. Tôi đề xuất WebM thay vì Ogg vì nó có chất lượng cao, mã nguồn mở và có kích thước tệp nhỏ hơn, làm cho nó hoạt động rất tốt cho thiết bị di động

Thuộc tính video HTML5

Beyond cross-browser compatibility, the HTML5 `` is capable of even more when combined with a couple of native attributes. 
Hãy nhìn vào một số trong số họ

`chiều rộng` và `chiều cao`

Xác định chiều rộng và chiều cao bằng pixel để tránh nhấp nháy và chuyển trang trước khi trình duyệt tải video

`vòng lặp`

Ra lệnh rằng video sẽ phát lại sau khi đến cuối

`tắt tiếng`

Cho biết rằng video nên được tắt tiếng khi tải. Sau đó, người dùng có thể quyết định bật tiếng hay không

`tự động phát`

Cho biết video sẽ bắt đầu phát ngay sau khi được tải

`áp phích`

Cung cấp URL của hình ảnh có thể được sử dụng làm màn hình giật gân hoặc hình thu nhỏ trước khi phát video. Lưu ý rằng nếu bạn định chỉ định một hình ảnh áp phích thì không cần thêm thuộc tính `autoplay` vì nó sẽ ghi đè thuộc tính `poster`

`thời lượng`

Trả về độ dài của video tính bằng giây. Bạn có thể sử dụng JavaScript để thao tác và hiển thị thông tin này ở bất kỳ định dạng nào bạn chọn

`playsinline`

Nói rằng trình duyệt nên phát video ngay tại vị trí của nó thay vì mở màn hình lớp phủ, đây là hành vi mặc định trên trình duyệt di động

`tải trước`

Yêu cầu trình duyệt tải trước video để phát lại nhanh hơn. Lưu ý rằng thuộc tính tải trước bị bỏ qua nếu có `autoplay`. giá trị có thể là

 `metadata`

Cho trình duyệt biết rằng người dùng không cần video nhưng gợi ý rằng việc tìm nạp siêu dữ liệu của nó [kích thước, danh sách theo dõi, thời lượng, v.v.] là điều nên làm. Đây là giá trị mặc định trong Chrome

`tự động`

Yêu cầu trình duyệt tải toàn bộ video

`không`

Không tải trước

`autoPictureinPicture`

Phản ánh thuộc tính HTML cho biết liệu video có tự động chuyển sang chế độ hình trong hình khi người dùng chuyển từ tài liệu này sang tài liệu khác hay không

Cách cải thiện khả năng truy cập video

Hãy xem cách đảm bảo rằng các video được nhúng trên một trang web vẫn có thể truy cập được đối với nhiều đối tượng

“Sức mạnh của web nằm ở tính phổ quát của nó. Truy cập của tất cả mọi người bất kể khuyết tật là một khía cạnh thiết yếu. ” – Tim Berners-Lee

Bản thân nội dung video thuần túy không đủ khả năng truy cập đối với người dùng có thể bị khiếm thính hoặc khiếm khuyết về nhận thức hoặc thậm chí người dùng có thể đang ở trong các tình huống tạm thời không thuận lợi—ví dụ: môi trường ồn ào hoặc một nơi yên tĩnh bắt buộc như thư viện.  
Khả năng truy cập có thể được cải thiện cho những người dùng như vậy bằng cách cung cấp các bản nhạc văn bản được định thời gian, như chú thích, phụ đề hoặc mô tả, cùng với video
The technology for achieving this on the web is known as Web Video Text Tracks Format, or WebVTT. It’s a format for displaying timed text tracks alongside video using the HTML`` element.
Đây là hình ảnh của một tệp WebVTT điển hình

The Elements of the ‘’ Attribute

Ở đây chúng tôi giải thích chức năng của từng thuộc tính trong phần tử `

`mặc định`

Cho biết rằng bản nhạc sẽ được bật tự động khi video bắt đầu phát

`srclang`

Cho biết ngôn ngữ của bản nhạc

`tốt bụng`

Chỉ định loại theo dõi văn bản được cung cấp. giá trị có thể là

`phụ đề`

Xếp chồng các bản dịch bằng văn bản của đoạn hội thoại và nội dung video khác [ví dụ: văn bản hoặc hình ảnh] lên video. Thường dành cho những người nghe không hiểu ngôn ngữ gốc được sử dụng trong âm thanh

`chú thích`

Lớp phủ phiên âm của âm thanh lên video. Khác với phụ đề ở chỗ phụ đề thường có cùng ngôn ngữ với âm thanh và mang tính mô tả hơn, đôi khi hiển thị các tín hiệu phi ngôn ngữ như hiệu ứng âm thanh hoặc tên của người nói hiện tại. Dành cho người khiếm thính, xem ở nơi ồn ào hoặc tắt âm thanh

`mô tả`

Lớp mô tả âm thanh đầy đủ của tất cả nội dung video lên video, từ hội thoại đến hành động đến hiệu ứng âm thanh đến tín hiệu. Dành cho người mù hoặc không xem được video.

`chương`

Bao gồm tiêu đề cho các phần khác nhau [ví dụ: phần hoặc tập] của nội dung video. Các chương đôi khi được hiển thị dưới dạng danh sách tương tác trên giao diện trình duyệt để người xem có thể dễ dàng điều hướng đến các phần khác nhau của video.  

`src`

Cho biết URL của tệp theo dõi văn bản

`nhãn`

Xác định tiêu đề của bản nhạc văn bản. Đối với phụ đề, cần cho biết bộ phụ đề dành cho ngôn ngữ nào, ví dụ tiếng Đức hoặc tiếng Pháp. Các nhãn sẽ xuất hiện trong giao diện người dùng để cho phép người dùng dễ dàng chọn ngôn ngữ phụ đề mà họ muốn xem
Dưới đây là ví dụ về video HTML5 có phụ đề, giới thiệu nhà phát triển Gift Egwuenu

Video phản hồi. Cách giữ cho video của bạn thân thiện với thiết bị di động và máy tính bảng

Bạn đã thấy các thuộc tính `width` và `height` của phần tử video HTML5 và cách chúng có thể được sử dụng để đặt kích thước tĩnh cho video.  
Nhưng đây là điều.  
Khai báo chiều rộng tĩnh không phải là một ý tưởng hay khi nói đến khả năng phản hồi
Điều gì xảy ra khi vùng chứa chính cho video đó thu hẹp hơn chiều rộng đã khai báo?
Video có thể sẽ tràn màn hình, không xem được
Ví dụ: video trong hình bên dưới được đặt thành chiều rộng tĩnh là 600px. Khi được truy cập qua thiết bị di động 350px, nó sẽ tràn chế độ xem
Dưới đây là một ví dụ về video không phản hồi trên thiết bị di động