Thứ Tư, 25 tháng 12, 2013

HTML Video




Video có thể được nhúng vào các trang HTML với một số phương pháp.

Chơi video trong HTML

Ví dụ

<video width="320" height="240" 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ử nó cho mình »

Vấn đề, vấn đề, và giải pháp

Chơi video trong HTML là không dễ dàng!

Bạn phải thêm rất nhiều thủ thuật để đảm bảo video của bạn sẽ chơi trong tất cả các trình duyệt (Internet Explorer, Chrome, Firefox, Safari, Opera) và trên tất cả các phần cứng (máy tính, Mac, iPad, iPhone).

Trong chương này W3Schools tóm tắt các vấn đề và các giải pháp.

HTML Video - Sử dụng <embed>

Thẻ <embed> định nghĩa một container cho bên ngoài (không phải HTML) nội dung.

Các đoạn mã HTML sau sẽ hiển thị một video Flash nhúng trong một trang web:

Ví dụ

<embed src="intro.swf" height="200" width="200">

Thử nó cho mình »

Vấn đề
  • Nếu trình duyệt không hỗ trợ Flash, video sẽ không chơi
  • iPad và iPhone không hỗ trợ video Flash

HTML Video - Sử dụng <object>

Thẻ tag <object> cũng có thể xác định một container cho bên ngoài (không phải HTML) nội dung.
Các đoạn mã HTML sau sẽ hiển thị một video Flash nhúng trong một trang web:

Ví dụ

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

Thử nó cho mình »

Vấn đề:
  • Nếu trình duyệt không hỗ trợ Flash, video sẽ không chơi
  • iPad và iPhone không hỗ trợ video Flash

HTML5 <video> tử

HTML5 <video> tag định nghĩa một video hoặc phim.

Các yếu tố <video> hoạt động trong tất cả các trình duyệt hiện đại.

Ví dụ sau đây sử dụng tag <video> HTML5, trong đó xác định một tập tin MP4 (cho Internet Explorer, Chrome, Firefox 21 +, và Safari), và một tập tin OGG (cho Firefox cũ và Opera). Nếu một cái gì đó không thành công, nó sẽ hiển thị một văn bản:

Ví dụ

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Thử nó cho mình »

Vấn đề:
  • Bạn phải chuyển đổi video của bạn sang các định dạng khác nhau
  • Các yếu tố <video> không làm việc trong các trình duyệt cũ

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

Giải pháp tốt nhất là sử dụng HTML5 <video> yếu tố + các yếu tố <embed>.

Ví dụ dưới đây sử dụng các yếu tố <video> và cố gắng để chơi video hoặc như MP4 hay OGG. Nếu thất bại, mã "rơi trở lại" để thử các yếu tố <embed>:

HTML 5 + <object> + <embed>

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

Thử nó cho mình »

Vấn đề:
  • Bạn phải chuyển đổi video của bạn sang các định dạng khác nhau

Giải pháp YouTube - HTML video

Tuy nhiên, có lẽ là cách dễ nhất để hiển thị video trong trang HTML, là sử dụng YouTube (xem chương tiếp theo)!

HTML Video - Sử dụng một liên kết

Nếu một trang web bao gồm một liên kết đến một tập tin phương tiện truyền thông, hầu hết các trình duyệt sẽ sử dụng một "ứng dụng trợ giúp" để chơi các tập tin.

Đoạn mã sau sẽ hiển thị một liên kết đến một video Flash. Nếu người dùng nhấp vào liên kết, trình duyệt sẽ khởi động một ứng dụng trợ giúp để chơi các tập tin:

Ví dụ

<a href="intro.swf">Play a video file</a>

Thử nó cho mình »

Lời khuyên về Inline Video

Khi một đoạn video được bao gồm trong một trang web nó được gọi là phim nội tuyến.

Nếu bạn có kế hoạch để sử dụng video nội tuyến, lưu ý rằng nhiều người cảm thấy bực bội. Cũng lưu ý rằng một số người dùng có thể tắt tùy chọn phim nội tuyến trong trình duyệt của họ.

Lời khuyên tốt nhất của chúng tôi là bao gồm video nội tuyến chỉ trong các trang mà người dùng mong đợi để xem một đoạn video. Một ví dụ của việc này là một trang mở ra sau khi người dùng nhấp vào một liên kết để xem video.
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)