Tên thẻ chỉ ra đường dẫn file video trong html5

Question

Ý Trần @tran.quoc.y

Theo dõi

3.1K 99 47

Đã đăng vào thg 10 22, 2020 3:53 CH 4 phút đọc

2.1K

3

Tất tần tật về HTML5 Video

Báo cáo
Thêm vào series của tôi

Bài đăng này đã không được cập nhật trong 2 năm

Hi everybody! Sau 1 thời gian khá dài với series các bài viết về các Tips & Tricks Javascript trong quá trình làm việc mà mình tích lũy được, thì cảm thấy mọi thứ khá "bão hòa" và "nhàm chán". Vì vậy, nay mình quyết định trở lại với 1 bài viết "nhẹ nhàng" và "tình cảm" hơn nhiều, vài thứ chia sẻ nho nhỏ về anh chàng HTML thân thiện (đỡ đau đầu

).

Chắc hẳn tất cả các Web Developer ai cũng đã từng làm việc với thẻ

<video src="video.mp4" controls>
  Bữa nay còn dùng IE8 à bro...Hãy tải ngay Chrome để trải nghiệm nhé!
</video>

4 của HTML5. Tuy nhiên, cũng có 1 số developer mới tìm hiểu và làm việc với HTML5 thì thường chỉ sử dụng 1 số ít tính năng và bỏ qua nhiều thứ hay ho khác. Vì vậy, trong bài viết này mình sẽ tổng hợp tất cả những gì thuộc về thẻ

<video src="video.mp4" controls>
  Bữa nay còn dùng IE8 à bro...Hãy tải ngay Chrome để trải nghiệm nhé!
</video>

4, mời các bạn cùng theo dõi

frontend HTML

Báo cáo
Thêm vào series của tôi

Ý Trần @tran.quoc.y

Theo dõi

3.1K 99 47

Đã đăng vào thg 10 22, 2020 3:53 CH 4 phút đọc

2.1K

3

Tất tần tật về HTML5 Video

Báo cáo
Thêm vào series của tôi

Bài đăng này đã không được cập nhật trong 2 năm

Hi everybody! Sau 1 thời gian khá dài với series các bài viết về các Tips & Tricks Javascript trong quá trình làm việc mà mình tích lũy được, thì cảm thấy mọi thứ khá "bão hòa" và "nhàm chán". Vì vậy, nay mình quyết định trở lại với 1 bài viết "nhẹ nhàng" và "tình cảm" hơn nhiều, vài thứ chia sẻ nho nhỏ về anh chàng HTML thân thiện (đỡ đau đầu

).

Chắc hẳn tất cả các Web Developer ai cũng đã từng làm việc với thẻ

<video src="video.mp4" controls>
  Bữa nay còn dùng IE8 à bro...Hãy tải ngay Chrome để trải nghiệm nhé!
</video>

4 của HTML5. Tuy nhiên, cũng có 1 số developer mới tìm hiểu và làm việc với HTML5 thì thường chỉ sử dụng 1 số ít tính năng và bỏ qua nhiều thứ hay ho khác. Vì vậy, trong bài viết này mình sẽ tổng hợp tất cả những gì thuộc về thẻ

<video src="video.mp4" controls>
  Bữa nay còn dùng IE8 à bro...Hãy tải ngay Chrome để trải nghiệm nhé!
</video>

4, mời các bạn cùng theo dõi

frontend HTML

Báo cáo
Thêm vào series của tôi

HTML5 cho phép chúng ta nhúng video vào trang web rồi xem trực tiếp trên trình duyệt mà không cần phải sử dụng plugin của bên thứ ba như Adobe Flash Player. Hôm nay Blog Kiến càng sẽ cùng bạn xem code nhúng này cụ thể như thế nào.

Ví dụ:

Code mẫu:

<video width="640" height="480" controls posster="images/poster.png">

<source src="freehostpage.mp4" type="video/mp4">

<source src="freehostpage.ogg" type="video/ogg">

Trình duyệt của bạn không hỗ trợ thẻ video

</video>

Giải thích code:

Để nhúng video chúng ta bắt đầu bằng thẻ mở <video> và kết thúc bằng thẻ đóng </video>
width và height quy định chiều rộng và chiều cao của video.
controls làm xuất hiện nút Play (bật video), Pause (tạm dừng), tùy chọn toàn màn hình và nút điều khiển âm thanh.
Nguồn video đặt trong thẻ source, với đường dẫn cụ thể được quy định trong thuộc tính src, trình duyệt dựa vào thuộc tính type để biết định dạng của video.
Có 3 định dạng video được các trình duyệt hỗ trợ là: mp4, ogg và webm. Tuy nhiên không phải trình duyệt nào cũng hỗ trợ cả 3, có trình duyệt chỉ hỗ trợ 1 định dạng duy nhất.
Dòng cuối cùng sẽ xuất hiện trong trường hợp trình duyệt không hỗ trợ thẻ video, thí dụ IE8. Hầu hết các trình duyệt phổ biến gồm: Google Chrome, FireFox, Opera, Safari và IE9+ đều có hỗ trợ thẻ video
Thuộc tính poster dùng để làm ảnh nền cho video, thí dụ video ở đầu bài sử dụng poster là bức ảnh dưới đây:

Trình duyệtMP4WebMOggInternet ExplorerCóKhôngKhôngChromeCóCóCóFirefoxCó (FireFox 21+)CóCóSafariCóKhôngKhôngOperaKhôngCóCó

Ngoài ra chúng ta có thể sử dụng Javascript để điều khiển bật, tắt, thay đổi kích thước video như ví dụ dưới đây:

programming html