Cách thêm video trong HTML - HTML Video

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    26 thg 10, 2023

  • Số lượt xem

    146 lượt xem


Hướng dẫn chi tiết về cách nhúng video vào website bằng HTML( HTML Video). Cung cấp các ví dụ điển hình và thực tế để hiểu rõ cách hoạt động của thẻ <video> trong HTML

Phần tử HTML <video> được sử dụng để hiển thị một video trên một trang web.

Phần tử HTML <video>

Để hiển thị video trong HTML, bạn sử dụng phần tử <video>:

Ví dụ

<video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Cách hoạt động

Thuộc tính controls thêm các điều khiển video, như phát, tạm dừng và âm lượng.

Luôn luôn nên bao gồm các thuộc tính width và height. Nếu không thiết lập chiều cao và rộng, trang có thể nhấp nháy trong khi video đang tải.

Phần tử <source> cho phép bạn xác định các tệp video thay thế mà trình duyệt có thể lựa chọn. Trình duyệt sẽ sử dụng định dạng đầu tiên được nhận dạng.

Văn bản giữa các thẻ <video> và </video> sẽ chỉ được hiển thị trong trình duyệt không hỗ trợ phần tử <video>.

Phát video HTML tự động

Để bắt đầu một video tự động, sử dụng thuộc tính autoplay:

Ví dụ

<video width="320" height="240" autoplay>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Trình duyệt của bạn không hỗ trợ thẻ video.

Lưu ý: Trình duyệt Chromium không cho phép phát video tự động trong hầu hết các trường hợp. Tuy nhiên, phát video đã tắt âm thanh luôn được phép.

Thêm muted sau autoplay để cho phép video của bạn bắt đầu tự động phát (nhưng bị tắt tiếng):

Ví dụ

<video width="320" height="240" autoplay muted>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Hỗ trợ của Trình duyệt

Các số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>.

Phần tử  Internet Explorer  Firefox  Chrome Safari Opera
<video>  9.0  3.5  4.0  3.0 10.5

Các Định dạng Video HTML

Có ba định dạng video được hỗ trợ: MP4, WebM và Ogg. Sự hỗ trợ của trình duyệt cho các định dạng khác nhau là:

Trình duyệt

MP4

WebM

Ogg

Edge

Chrome

Firefox

Safari

Không

Opera

Các Định dạng Phương tiện Video HTML

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

Phương thức, Thuộc tính và Sự kiện Video HTML

DOM HTML định nghĩa các phương thức, thuộc tính và sự kiện cho phần tử <video>.

Điều này cho phép bạn tải, phát và tạm dừng video, cũng như thiết lập thời lượng và âm lượng.

Cũng có sự kiện DOM có thể thông báo khi video bắt đầu phát, bị tạm dừng, v.v.

Các thẻ Video HTML

Thẻ

Mô tả

<video>

Định nghĩa một video hoặc phim.

<source>

Định nghĩa nhiều tài nguyên phương tiện cho các phần tử phương tiện, chẳng hạn như <video> và <audio>.

<track>

Định nghĩa các vết văn bản trong trình phát phương tiện.


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.