Thẻ HTML `video`

Khám phá những điều cơ bản về cách làm việc với HTMLvideonhãn

Cácvideocho phép bạn nhúng nội dung video vào các trang HTML của mình.

Phần tử này có thể phát trực tuyến video, sử dụng webcam quagetUserMedia()hoặc làWebRTChoặc nó có thể phát nguồn video mà bạn tham khảo bằng cách sử dụngsrcthuộc tính:

<video src="file.mp4" />

Theo mặc định, trình duyệt không hiển thị bất kỳ điều khiển nào cho phần tử này, chỉ hiển thị video.

Điều đó có nghĩa là âm thanh sẽ chỉ phát nếu được đặt thành tự động phát (sẽ nói thêm về điều này ở phần sau) và người dùng không thể biết cách dừng, tạm dừng, điều khiển âm lượng hoặc bỏ qua ở một vị trí cụ thể trong video.

Để hiển thị các điều khiển tích hợp, bạn có thể thêmcontrolsthuộc tính:

<video src="file.mp4" controls />

Đây là giao diện của nó trong Chrome:

Video tag appearance

Hình ảnh hiển thị ban đầu là khung hình đầu tiên của video.

Bạn có thể hiển thị một hình ảnh khác, đây là một nhu cầu khá phổ biến, bằng cách sử dụngposterthuộc tính:

<video src="video.mp4" poster="image.png" controls />

Nếu không có, trình duyệt sẽ hiển thị khung đầu tiên của video ngay khi có.

Bạn có thể chỉ định loại MIME của tệp video bằng cách sử dụngtypethuộc tính. Nếu không được đặt, trình duyệt sẽ cố gắng tự động xác định nó:

<video src="file.mp4" controls type="video/mp4" />

Một tệp video theo mặc định không tự động phát. Thêmautoplaythuộc tính để phát âm thanh tự động:

<video src="file.mp4" controls autoplay />

Một số trình duyệt cũng yêu cầumutedthuộc tính tự động phát. Video chỉ tự động phát nếu bị tắt tiếng:

<audio src="file.mp3" controls autoplay muted />

CácloopThuộc tính khởi động lại video phát lúc 0:00 nếu được đặt, nếu không, video sẽ dừng ở cuối tệp:

<video src="file.mp4" controls autoplay loop />

Bạn có thể đặtwidthheightcác thuộc tính để thiết lập không gian mà phần tử sẽ sử dụng, để trình duyệt có thể tính đến phần tử đó và nó không thay đổi bố cục khi nó được tải cuối cùng. Nó nhận một giá trị số, được biểu thị bằng pixel.

CORS

Video có chủ đềCORSvà trừ khi bạn cho phép nó ở phía máy chủ, video không thể phát chéo.

Không có gì xảy ra nếu bạn đặt thẻ này vào một trang web. Không có cách nào để bắt đầu video và video không tự động phát. Để phát video, bạn phải thêmautoplaythuộc tính:

<video src="video.mp4" autoplay />

Thay đổi thuộc tính hiển thị video

Bạn có thể đặt chiều rộng và chiều cao cho vùng video, được biểu thị bằng pixel, bằng cách sử dụngwidthheightthuộc tính:

<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />

Hiển thị nội dung nếuvideokhông được hỗ trợ

Cácvideothẻ làđược hỗ trợ rất tốt, lên đến IE9, vì vậy ngày nay không cần phải có văn bản giữ chỗ, nhưng chúng tôi có tùy chọn này. Bạn chỉ cần thêm thẻ đóng và chèn văn bản vào giữa thẻ mở và thẻ đóng:

<video src="video.mp4">Video tag not supported</video>

Thêm nhiều nguồn

Trình duyệt có thể triển khai một codec video nhưng không thể triển khai một codec khác. Có thể bạn muốn sử dụng một tiêu chuẩn mới hơn giúp giảm một nửa kích thước tệp nhưng bạn vẫn muốn hỗ trợ các trình duyệt cũ hơn.

Bạn làm như vậy vớisourcenhãn:

<video controls>
 <source src="video.mp4" type="video/mp4" />
 <source src="video.avi" type="video/avi"/>
</audio>

Bạn có thể tạo kiểu điều khiển bằng cách sử dụng CSS, mặc dù điều này nằm ngoài phạm vi của phần giới thiệu này.

Tải trước video

Nếu bạn không đặtautoplay, thông số kỹ thuật nói rằng các trình duyệt sẽ chỉ tải xuống siêu dữ liệu video (ví dụ: để tìm hiểu độ dài) nhưng sẽ không tải xuống chính video đó.

Bạn có thể buộc tải trước video bằng cách sử dụng

<video src="video.mp4" preload="auto" />

Làm việc với các sự kiện video

Chúng tôi có thể lắng nghe các sự kiện trên mỗivideophần tử sử dụng JavaScript, để tạo các dự án và giao diện thú vị. Có rất nhiều sự kiện khác nhau để chơi cùng.

Cácplaysự kiện được kích hoạt khi bắt đầu phát lại video:

document.querySelector('video').addEventListener('play', () => {
  alert('Video is playing!!!')
})

Bạn cũng có thể thêm trực tiếp sự kiện này (như những sự kiện khác) bằng cách sử dụngon<event>thuộc tính trực tiếp trên phần tử HTML:

<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
  alert('Video is playing!!!')
})

Đây là một số sự kiện bạn có thể nghe:

  • playvideo đã bắt đầu phát
  • pausevideo đã bị tạm dừng
  • endedphát video đã hoàn thành
  • timeupdatengười dùng đã tương tác với dòng thời gian phát lại và tiến / lùi
  • volumechangengười dùng đã thay đổi âm lượng

Có rất nhiều sự kiện khác liên quan đến việc tải video vàbạn có thể tìm thấy danh sách đầy đủ trên MDN.

Tải xuống miễn phí của tôiSổ tay HTML


Các hướng dẫn html khác: