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ử trực tiếp

Vấn đề, vấn đề và phương pháp giải quyết

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

Bạn cần phải 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à phương pháp 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ử trực tiếp

Vấn đề

  • HTML4 không thể nhận diện thẻ <embed>. Trang 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ử trực tiếp

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ó chức năng chèn phần tử 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ử trực tiếp

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> element 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ử trực tiếp

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 một trong các định dạng mp4, ogg hoặc webm. Nếu không thành công, sẽ chuyển sang element <embed>.

Vấn đề

  • Bạn phải chuyển đổi video thành nhiều định dạng khác nhau
  • <video> element không thể được xác thực qua HTML 4 và XHTML.
  • <embed> element 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, 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ử trực tiếp

Sử dụng liên kết

Nếu trang web chứa liên kết đến tệp đa phương tiện, hầu hết các trình duyệt sẽ sử dụng “ứng dụng trợ giúp” để 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 trợ giúp”, chẳng hạn như Windows Media Player để phát tệp AVI này:

Mô hình

<a href="movie.swf">Chơi tệp video</a>

Thử trực tiếp

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

Khi video được chèn vào 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 cho rằng video nội tuyến rất khó chịu.

Đồng thời, xin lưu ý rằng 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ỉ bao gồm chúng khi người dùng mong 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 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 tham số đố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 chèn, chẳng hạn như trình cắm.