Video trong HTML

  • Nguyễn Lê Điệp
  • 15-07-2017
  • 167
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Video trong HTML

    Trước đây để có video chạy được trên web thì tình duyệt cần có một plug-in (như flash).

    Thẻ <video> trong HTML5 để chúng ta nhúng một video vào trang web.

    Các trình duyệt hỗ trợ

    Với các trình duyệt dường như đều hỗ trợ cho thẻ <video> này
    Element Chrome Edge Firefox Safari Opera
    <video> 4.0 9.0 3.5 4 10.5

    Thẻ video trong HTML

    Để hiển thị video trên HTML chúng ta dùng thẻ <video>
    <!DOCTYPE html>
    <html>
    <body>
    	<video width="320" height="240" controls>
    		<source src="http://kennis.vn/home/images/tryit/try/baby.mp4" type="video/mp4">
    		Trình duyệt của bạn không hỗ trợ thẻ video
    	</video>
    </body>
    </html>
    Xem ví dụ 

    Cách hoạt động của thẻ video

    Các thuộc tính điều khiể được thêm vào để điều khiển video như: chạy video, tạm dừng.

    Ngoài ra còn có thuộc tính chiều rộng và chiều cao của video.

    Thẻ <source> giúp bạn link tới video bạn cần hiển thị lên trang web.

    Các câu chú thích trong thẻ mở <video> và thẻ </ video> sẽ hiển thị trong các trình duyệt không hỗ trợ thẻ <video>

    Thẻ video autoplay trong HTML

    Để video tự phát bạn có thể sử dụng thuộc tính autoplay
     

    <!DOCTYPE html>
    <html>
    <body>
    	<video width="320" height="240" autoplay>
    		<source src="http://kennis.vn/home/images/tryit/try/baby.mp4" type="video/mp4">
    		Trình duyệt của bạn không hỗ trợ thẻ video
    	</video>
    </body>
    </html>
    Xem ví dụ 
    Lưu ý: Thuộc tính autoplay sẽ không hoạt động trên các thiết bị như: ipad, mobile

    Trình duyệt hỗ trợ các định dạng

    Trong HTML5, có 3 định dạng video được hỗ trợ như: MP4, WebM và Ogg.

    Dưới đây là bảng liệt kê các trình duyệt:

    Trình duyệt MP4 WebM Ogg
    Internet Explorer Có hỗ trợ Không hỗ trợ Không hỗ trợ
    Chrome Có hỗ trợ Có hỗ trợ Có hỗ trợ
    Firefox Có hỗ trợ Có hỗ trợ Có hỗ trợ
    Safari Có hỗ trợ Không hỗ trợ Không hỗ trợ
    Opera Có hỗ trợ (phiên bản 25) Có hỗ trợ Có hỗ trợ

    Các định dạng video trong HTML

    Định dạng Kiểu file
    MP4 video/mp4
    WebM video/webm
    Ogg video/ogg

    Thuộc tính và sự kiện thẻ video trong HTML

    HTML5 cũng có thể định nghĩa thuộc tính và sự kiện cho thẻ <video>.

    Bạn có thể điều khiển video như: tải, phát, tạm dừng video, cũng như thời gian video và âm lượng video.

    Ngoài ra còn có các sự kiện có thể thông báo cho bạn khi một video bắt đầu phát, tạm dừng,...

    Xem ví dụ

    Chức năng các thẻ trong HTML5

    Thẻ Kiểu file
    <video> Xác định là một video
    <source> Xác nhận đường dẫn video
    <track> Xác định danh sách cần phát
    Chúc các bạn học tốt!blush
    Từ khóa:

    Video trong HTML

    Video trong HTML

    Video trong HTML

    Video trong HTML
    Video trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    349
    - Hôm qua:
    684
    - Tuần này:
    2.199
    - Tuần trước:
    4.540
    - Tháng này:
    13.892
    - Tháng trước:
    21.824
    - Năm này:
    218.510
    - Năm trước:
    17.373
    - Tổng cộng:
    235.883