Sử dụng media trong HTML

Giới thiệu nội dung bài viết

Nếu bạn quan sát trên các trang website, bạn có thể thấy các trang web hiện nay có thể hiển thị cả chữ và phần media bao gồm hình ảnh, video, nhạc, audio, phim, âm thanh. Trong đó, để nhúng các thành phần media vào website trong lập trình web HTML, chúng ta phải sử dụng thẻ media.
Cụ thể sử dụng thẻ media như thế nào để nhúng media vào trang web? Bài viết hôm nay anh sẽ lần lượt giới thiệu cho các bạn hiểu được Multimedia là gì? Các định dạng Multimedia trong HTML? Sau đó hướng dẫn cụ thể các bạn cách để thêm các video, âm thành và video từ YouTube vào website trong lập trình web HTML.

1. Multimedia là gì

Trong lập trình web html chúng ta có thể thêm hình ảnh, video, nhạc, film, âm thanh vào trang web. Những cái trên được gọi là Media.

Trước đây trình duyệt chỉ hỗ trợ chữ (text) thôi, không hiển thị được âm thanh, ảnh và video.

2. Định dạng Multimedia

Chúng ta có rất nhiều định dạnh khác nhau cho Media. Anh ví dụ như video thì mình có các định dạng là avi, mpeg, wmv, mov, mp4.

Nếu nói về âm thanh thì mình có các định dạng như mid, wav, mp3, wma.

Chúng ta chỉ cần nhúng vào HTML thì có thể sử dụng được.

3. Nhúng video vào website

Để nhúng video vào website ta sử dụng thẻ html là video. Trong thẻ video chúng ta khai báo kích thước chiều rộng của video và nơi mình chứa video như đoạn code sau. Nếu như trình duyệt mình không hỗ trợ video thì mình sẽ nhận được thông báo là trình duyệt chưa hỗ trợ thẻ video. Lúc này mình cần cập nhật lại phiên bản mới của trình duyệt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  Trình duyệt mình không hỗ trợ video
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>

4. Nhúng âm thanh vào website

Để nhúng âm thanh vào trang website chúng ta sử dụng thẻ audio. Trong đó chúng ta khai báo nơi chứa file video và định dạng của file là gì

1
2
3
4
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Thuộc tính controls sẽ giúp ta hiển thị các nút play, pause âm thanh

5. Nhúng video từ youtube vào website

Để nhúng một video từ youtube vào website chúng ta sử dụng thẻ iframe. Trong thẻ này chúng ta quy định kích thước dài, rộng, và đường link youtube tới video của chúng ta.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

</body>
</html>

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments