Hướng dẫn Tìm hiểu APIs Media element (Video & Audio) của HTML 5

[PVS]

Tìm hiểu APIs Media element (Video & Audio) của HTML 5

Trước khi HTML 5 ra đời, để có thể chèn video hoặc audio vào website thì trình duyệt cần phải có sự hỗ trợ của bên thứ ba như flash, java hoặc media player… kèm theo đó việc tích hợp vào website khá khó khăn và khả năng tùy biến rất thấp, vì phụ thuộc vào nhiều phía.

​

Giới thiệu chung
Khi HTML 5 ra đời, kèm theo đó là sự xuất hiện của media element gồm 2 thẻ chính là <video> và <audio> đã đem lại sự trải nghiệm hoàn toàn mới cho giới lập trình và ừng dụng web.

• Thẻ <video>: Dùng để trình chiếu các file video với các định dạng được hổ trợ như Mp4, WebM, Ogg, Theora…
• Thẻ <audio>: Dùng để chạy các định dạng âm thanh HTML 5 hổ trợ như mp3, aac, ogg, wma,…
• Thẻ <source>: Đường dẫn file video, audio cho thẻ <audio> và thẻ <video>

Thẻ Video
Ví dụ:

<video width="640" height="360">
<source src="two_face.mp4" type="video/mp4">
<source src="two_face.ogg" type="video/ogg">
Trình duyệt không hổ trợ tính năng này.
</video>

Nhìn vào đoạn code thì có thể nhận thấy rằng, việc chèn video vào website đã trở nên đơn giản hơn rất nhiều. Chỉ việc khai báo thẻ <video>, khai báo đường dẫn <source> và thể là nó hoạt động.

Thẻ Audio
Cách sử dụng thẻ <audio> thì cũng tương tự như <video> và bạn cũng phải chú ý đến định mà audio mà trình duyệt hỗ trợ.

<audio>
<source src="music_on.ogg" type="audio/ogg">
<source src="horse_on.mp3" type="audio/mpeg">
Trình duyệt không hổ trợ tính năng này.
</audio>

Lưu ý: khi sử dụng nhóm thẻ đa phương tiện thì đuôi mở rộng phải tương ứng với kiểu tập tin của nó. Trong ví dụ sử dụng audio trên thì tập tin music_on.ogg có kiểu tập tin tương ứng là audio/ogg. Hay trong ví dụ về video, thì tập tin two_face.mp4 có kiểu tập tin tương ứng là video/mp4.

• .mp4 -> video/mp4
• .ogg -> video/ogg
• .webm -> video/webm
• .mp3 -> audio/mpeg
• .ogg -> audio/ogg
• .wav -> audio/wave hoặc audio/wav

​

Các thuộc tính mới
Nếu để ý ví dụ trên, bạn sẽ chỉ xem video hoặc âm thanh thôi, chứ chúng ta không thể kiểm soát được chúng như stop, pause, play, volume,…. Chính vì thế, W3C cũng đã phát triển một nhóm các thuộc tính mới dành riêng cho nhóm thẻ đa phương tiện này, giúp bạn có thể kiểm soát mọi thứ.
Controls: hiển thị bộ nút điều khiển như play, pause, time bar, volume, full srceen.

<video controls>
<!-- source here -->
</video>

Autoplay: Đặt chế độ tự động bắt đầu tải và phát video/audio.

<video autoplay>
<!-- source here -->
</video>

Loop: Đặt chế độ lập lại sau khi đã phát hết video/audio.

<video loop>
<!-- source here -->
</video>

Muted: Tắt âm thanh khi phát video/audio.

<video muted>
<!-- source here -->
</video>

Poster: thiết lập hình ảnh xem trước cho video. Hình ảnh này sẽ xuất hiện khi website vừa được tải xong. Và sẽ mất khi nhấp play để xem video. Thuộc tính này nhận giá trị là đường dẫn hình ảnh. Nếu đường dẫn hình không chính xác hoặc không có thuộc tính này thì nó mặc định sẽ lấy hình ảnh frame(28) đầu tiên của video làm hình ảnh xem trước.

<video poster=”path/to/image.jpg”>
<!-- source here -->
</video>

Lưu ý: thuộc tính này không hoạt động được trên thẻ audio, chỉ hoạt động duy nhất trên thẻ video.

​

HTML 5 video converter
Hằng ngày, bạn nghe nhạc, xem phim trên các thiết bị như PC, laptop, tablet hoặc smartphone,… Nhưng cùng một bộ phim, nhưng máy tính của mình chạy được, nhưng khi chép qua máy của bạn thì lại không chạy được, đôi lúc lại có tiếng mà không có hình hoặc ngược lại. Tại sao vậy nhỉ? Đơn giản thôi, do media player trên máy của bạn không có codec phù hợp để tiến hành giải mã cho video. Chính vì vậy bạn cần phải có các video/audio converter để chuyển mã, mình xin giới thiệu với các bạn 3 converter phổ biến dành cho các định dạng hỗ trợ html 5 media.

media.io

​

Website media.io được thành lập và phát triển bởi Johann Burkard, một nhà phát triển web người Đức. Hiện tại website media.io cho phép người dùng chuyển đổi rất nhiều định dạng âm thanh khác nhau về định dạng chuẩn dùng cho HTML 5.

Firefogg.org

​

Đây là một plug-in được phát triển dành riêng cho trình duyệt Firefox. Firefogg.org chỉ hỗ trợ hai định dạng chính là OGV và WebM. Để sử dụng thì bạn hãy dùng trình duyệt firefox và vào website firefogg.org sau đó tiến hành cài plug-in vào. Sau khi cài xong thì bạn cần phải khởi động lại firefox sau đó vào mục “make web video”. Tại đây bạn có thể thấy được toàn bộ quá trình để có được tập tin video HTML 5.

Miro converter

​

Miro được phát triển bởi Participatory Culture Foundation (PCF) là một tổ chức phi lợi nhuận, với phương chăm hoạt động chủ yếu là tạo ra các công cụ và dịch vụ để giúp mọi người có thể dễ dàng làm việc với các tập tin đa phương tiện.

Kết luận
HTML 5 Media element rất tiện dụng. Nếu nói rằng nó chưa phổ biến thì thực sự sai lầm rồi, vì hiện tại hầu hết các trình duyệt hiện đại đều đã support cho html 5 media rất tốt. Bạn hãy tận dụng nó để làm việc một cách nhanh hơn.

Tuy nhiên, nếu muốn kiểm soát tất cả các thành phần trong media thì bạn sẽ phải tìm hiểu về HTML 5 Media API.

Chúc các bạn thành công.

Nguồn: izwebz.com​