Video HTML

Có rất nhiều cách để phát video trong HTML.

Mô hình

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Thử ngay

Vấn đề, vấn đề và cách giải quyết

Phát video trong HTML không dễ dàng!

Bạn cần nắm vững nhiều kỹ năng để đảm bảo rằng tệp video của bạn có thể phát được trên tất cả các trình duyệt (Internet Explorer, Chrome, Firefox, Safari, Opera) và tất cả các phần cứng (PC, Mac, iPad, iPhone).

Trong chương này, CodeW3C.com đã tổng hợp các vấn đề và cách giải quyết.

Sử dụng thẻ <embed>

Thẻ <embed> có tác dụng chèn các yếu tố đa phương tiện vào trang HTML.

Dưới đây là đoạn mã HTML hiển thị đoạn video Flash được chèn vào trang web:

Mô hình

<embed src="movie.swf" height="200" width="200"/>

Thử ngay

Vấn đề

  • HTML4 không thể nhận diện thẻ <embed>. Trang web của bạn không thể được xác thực.
  • Nếu trình duyệt không hỗ trợ Flash, video sẽ không thể phát được
  • iPad và iPhone không thể hiển thị video Flash.
  • Nếu bạn chuyển đổi video thành định dạng khác, nó vẫn không thể phát được trên tất cả các trình duyệt.

Sử dụng thẻ <object>

Thẻ <object> có tác dụng chèn các yếu tố đa phương tiện vào trang HTML.

Dưới đây là đoạn mã HTML hiển thị đoạn video Flash được chèn vào trang web:

Mô hình

<object data="movie.swf" height="200" width="200"/>

Thử ngay

Vấn đề

  • Nếu trình duyệt không hỗ trợ Flash, video sẽ không thể phát được.
  • iPad và iPhone không thể hiển thị video Flash.
  • Nếu bạn chuyển đổi video thành định dạng khác, nó vẫn không thể phát được trên tất cả các trình duyệt.

Sử dụng thẻ <video>

<video> là thẻ mới trong HTML 5.

Thẻ <video> có tác dụng chèn element video vào trang HTML.

Dưới đây là đoạn HTML sẽ hiển thị một đoạn video được chèn vào trang web trong định dạng ogg, mp4 hoặc webm:

Mô hình

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

Thử ngay

Vấn đề

  • Bạn phải chuyển đổi video thành nhiều định dạng khác nhau.
  • Element <video> không hoạt động trong trình duyệt cũ.
  • <video> không thể được xác thực qua HTML 4 và XHTML.

Giải pháp HTML tốt nhất

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Thử ngay

Trong ví dụ trên, đã sử dụng 4 định dạng video khác nhau. Element <video> của HTML 5 sẽ thử phát video bằng định dạng mp4, ogg hoặc webm. Nếu tất cả đều thất bại, nó sẽ chuyển đổi lại sang element <embed>.

Vấn đề

  • Bạn phải chuyển đổi video thành nhiều định dạng khác nhau
  • <video> không thể được xác thực qua HTML 4 và XHTML.
  • <embed> không thể được xác thực qua HTML 4 và XHTML.

Ghi chú:Sử dụng <!DOCTYPE html> (HTML5) để giải quyết vấn đề xác thực.

Giải pháp Youku

Cách đơn giản nhất để hiển thị video trong HTML là sử dụng các trang web video như Youku.

Nếu bạn muốn phát video trong trang web, bạn có thể tải video lên các trang web video như Youku và sau đó chèn mã HTML vào trang web của bạn để phát video:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Thử ngay

Sử dụng liên kết

Nếu trang web chứa liên kết đến tệp phương tiện, hầu hết các trình duyệt sẽ sử dụng ứng dụng hỗ trợ để phát tệp.

Mã đoạn sau đây hiển thị liên kết đến tệp AVI. Nếu người dùng nhấp vào liên kết này, trình duyệt sẽ khởi động ứng dụng hỗ trợ, chẳng hạn như Windows Media Player để phát tệp AVI này:

Mô hình

<a href="movie.swf">Phát tệp video</a>

Thử ngay

Một đoạn ghi chú về video nội tuyến

Khi video được chèn trong trang web, nó được gọi là video nội tuyến.

Nếu bạn dự định sử dụng video nội tuyến trong ứng dụng web, bạn cần nhận thức rằng nhiều người nghĩ rằng video nội tuyến rất khó chịu.

Và xin lưu ý, người dùng có thể đã tắt tùy chọn video nội tuyến trong trình duyệt.

Chúng tôi khuyên bạn nên chỉ chèn chúng ở những nơi người dùng muốn xem video nội tuyến. Một ví dụ tích cực là, khi người dùng cần xem video và nhấp vào một liên kết nào đó, trang web sẽ mở ra và phát video.

Thẻ đa phương tiện HTML 4.01

Thẻ Mô tả
<applet> Không được khuyến khích.Định nghĩa applet chèn.
<embed> Không được khuyến khích.Định nghĩa đối tượng chèn. (Cho phép trong HTML5)
<object> Định nghĩa đối tượng chèn.
<param> Định nghĩa các tham số của đối tượng.

Thẻ đa phương tiện HTML 5

Thẻ Mô tả
<video> Thẻ định nghĩa âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác.
<embed> Thẻ định nghĩa nội dung được chèn, chẳng hạn như plug-in.