Học HTML Cách chèn media: nhạc, video trong html [bài 5]


Tiếp nối bài viết chèn hình ảnh trong html, đến bài viết này mình sẽ giới thiệu cho các bạn cách chèn các tập tin kỹ thuật số (media files) – đó chính là nhạc, phim ảnh (video, movie) và các hình ảnh động (animations). Với HTML chúng ta có thể dễ dàng chèn những loại tập tin này vào tài liệu và nó sẽ hiển thị rất sống động.

NỘI DUNG TRẮC NGHIỆM

Học HTML - Cách chèn media: nhạc, video  trong html

Vậy Media là gì?
Media bao gồm rất nhiều định dạng khác nhau, ví dụ như hình ảnh (image), nhạc (music), âm thanh (sound), video, ghi âm (record), phim (film), hình ảnh động (animations),... Nó có thể là bất cứ điều gì bạn có thể nghe hoặc xem, và các website của chúng ta thường chứa các loại đa phương tiện với các định dạng khác nhau.

Định dạng phổ biến của Video: MPEG (.mpg, .mpeg), AVI (.avi), WMN (.wmv), QuickTime (.mov), RealVideo (.rm, .ram), Flash (.swf, .flv), Ogg (.ogg), WebM (.webm), MPEG-4 hoặc MP4 (.mp4).
Định dạng phổ biến của Audio: MIDI (.mid, .midi), RealAudio (.rm, .ram), WMA (.wma), AAC (.aac), Ogg (.ogg), MP3 (.mp3), MP4 (.mp4).
Vậy là chúng ta có cái nhìn tổng quan về media, bây giờ chúng ta cùng tìm hiểu cách chèn chúng vào website nhé.

1. Chèn Video

Trước HTML5, một video chỉ có thể chạy được trên browser với sự hỗ trợ từ plug-in như flash. Tuy nhiên giờ đây bạn có thể dễ dàng chèn video vào website của bạn thông qua thẻ <video>.
Cách chèn một video trong HTML:
Để chèn video trong html, bạn sẽ chèn như sau:

<video width="" height="" controls>
  <source src="URL" type="kiểu định dạng 1">
Trình duyệt của bạn không hỗ trợ thẻ video
</video>

Đoạn text “Trình duyệt của bạn không hỗ trợ thẻ video” sẽ được hiển thị nếu browser của bạn không hỗ trợ HTML5.
Ví dụ:

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


Xem demo

Các thuộc tính của thẻ video:

Bất cứ một thẻ HTML đều có những thuộc tính chung, video cũng vậy. Ngoài ra video có các thuộc tính đặc trưng sau:

  • contrlos:

Thuộc tính controls này cho phép bạn điều khiển video ví dụ như chạy video, dừng video, thay đổi âm lượng…

  • width & height:

Độ rộng và độ cao của video

  • source:

Thẻ source cho phép bạn chỉ định các file video ở các định dạng khác nhau mà trình duyệt có thể chọn từ đó. Các trình duyệt thường sẽ chọn định dạng đầu tiên. Như vậy chúng ta có thể thấy trong một thẻ <video> có thể có nhiều hơn một thẻ <source> và các thuộc tính trong thẻ <source> có lẽ không khó hiểu với bạn vì đã sử dụng mấy lần rồi phải không nào.
autoplay: Tự động chạy video, điều đáng tiếc của thuộc tính này là nó không được hỗ trợ trên thiết bị iPad, iPhone.
Ví dụ:

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

Xem demo
Lưu ý: Một lưu ý nho nhỏ dành cho các bạn là để đảm bảo các video chạy trên tất cả trình duyệt, bạn nên chèn định dạng MP4.

2. Chèn Audio

Tương tự với video, để chèn âm thanh trong HTML chúng ta có thẻ <audio> và thẻ này cũng là một thẻ HTML5.

Cách chèn âm thanh trong HTML:

Để chèn âm thanh trong html bạn sẽ chèn bằng thẻ <audio> với cách sau:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ thẻ audio
</audio>

Xem demo

Các thuộc tính của thẻ audio:

Nhìn qua cách chèn âm thanh ở trên, bạn có thể thấy các thuộc tính của thẻ <audio> tương đồng với thẻ <video> và tất nhiên cách dùng của chúng là tương tự nhau bạn nhé.
Thẻ <audio> cũng có thuộc tính autoplay giống như video vậy.

<audio autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ thẻ audio
</audio>

Xem demo

3. Chèn các đối tượng kỹ thuật số với thẻ:

<object>, <embed>
Ngoài các thẻ đặc trưng cho từng loại tập tin ở trên thì bạn còn có một cách khác để chèn các đối tượng kỹ thuật số vào tài liệu HTML đó là dùng thẻ <object>, <embed>, đây là các thẻ có thể giúp bạn chèn các loại đối tượng kỹ thuật số như Flash, Java, Audio, Video, PDF, ActiveX.
Cách chèn các đối tượng kỹ thuật số với vẻ <object>
Bạn có thể chèn các đối tượng kỹ thuật số với thẻ <object> bằng cú pháp sau:
<object width="" height="" data="URL"></object>

Ví dụ:
<object width="400" height="50" data="bookmark.swf"></object>

Xem demo
Ngoài ra bạn cũng có thể dùng thẻ này để chèn một file HTML hay một hình ảnh:
Ví dụ:
<object width="100%" height="500px" data="snippet.html"></object>

Xem demo

Các thuộc tính của thẻ <object>

Ngoài thuộc tính chung của html, thẻ <object> có khá nhiều thuộc tính. Mình xin giới thiệu một vài thuộc tính cơ bản đến các bạn.

  • width & height: Độ rộng và độ cao của đối tượng.
  • type: Kiểu định dạng của file media (media_type)
  • data: URL. Thuộc tính này tương tự như thuộc tính src mà các bạn đã tiếp xúc, nó chỉ định url của đối tượng được sử dụng.
  • name: Tên của đối tượng
  • usemap: Tương tự như usemap của thẻ

Ngoài việc sử dụng thẻ <object> bạn còn một cách khác để chèn các đối tượng kỹ thuật số là sử dụng thẻ <embed>. Cách dùng của thẻ này tương tự như với thẻ <object> mà mình đã giới thiệu
Để chèn đối tượng kỹ thuật số bạn sử dụng cách sau:
<embed width="" height="" src="URL">

Ví dụ:
<embed width="400" height="50" src="bookmark.swf">
Xem demo
Ngoài các thuộc tính chung của thẻ html, thẻ có các thuộc tính đặc trưng riêng đó là width, height, src và type. Các thuộc tính này đã quá quen thuộc với bạn rồi phải không?

4. Chèn video từ youTube

Việc chèn video từ youTube của các website đã trở thành việc khá phổ biến hiện nay. Bạn có thể chèn video từ youtube bằng các sử dụng một trong các thẻ <iframe>, <object> và <embed>. Thẻ <object> và <embed> mình đã giới thiệu với bạn ở các phần trên, nên ở phần này mình xin giới thiệu với bạn cách sử dụng thẻ iframe để chèn video nhé.

Youtube video id
Để chèn video từ youtube bạn cần phải có id của video ví dụ như: XGSy3_Czz8k. Video id bạn có thể lấy được khi bạn lưu video hoặc play video trên youtube.

Sau khi đã có video id bạn có thể chèn video bằng cách sau:

<iframe width="420" height="315"
src="URL">
</iframe>

Ví dụ:

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

Xem demo

Các thuộc tính của thẻ iframe: Ngoài các đặc tính chung của thẻ HTML, thẻ iframe cũng có các thuộc tính riêng như: width, height, name, src,…

Ngoài ra youtube cũng có các giá trị riêng giúp bạn chèn video một cách sinh động hơn.
Youtube autoplay
Bạn cũng có thể thiết lập cho video tự chạy khi website của bạn chạy thông qua thuộc tính autoplay. Có 2 giá trị của của autoplay:
0: Video không được chạy tự động
1: Video tự động chạy khi người dùng vào website của bạn.
Ví dụ:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/mHR4FlXFSgY?autoplay=1">
</iframe>

Youtube playlist
Bạn có thể chèn cả một playlist vào website của bạn thông qua thuộc tính “list”
Ví dụ:

<iframe width="420" height="315"
src="youtube.com/embed/watch?v=mHR4FlXFSgY&list=RDmHR4FlXFSgY">
</iframe>

Youtube Loop
Thông qua thuộc tính loop bạn có thể thiết lập cho video chạy chỉ một lần hoặc là mãi mãi. Có 2 giá trị của thuộc tính này:
0: là giá trị mặc định, với giá trị này video chỉ chạy một lần.
1: video sẽ được lặp mãi mãi.
Ví dụ:

<iframe width="420" height="315"
src="youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1">
</iframe>

Youtube controls
Thuộc tính controls này có tác dụng tương tự với controls trong thẻ <video>. Nó có 2 giá trị đó là:
0: không cho phép người dùng điều khiển video.
1: là giá trị mặc định, cho phép bạn điều khiển video.
Ví dụ:

<iframe width="420" height="315"
src="youtube.com/embed/mHR4FlXFSgY?controls=0">
</iframe>

Trình duyệt hỗ trợ
Với sự phát triển mạnh mẽ các trình duyệt, hiện tại các trình duyệt đã hỗ trợ phần lớn các định dạng meida khác nhau. Chỉ có một số định dạng đòi hỏi các chương trình hỗ trợ (plug-in). Đặc biệt với sự phát triển mạnh mẽ của HTML5 các bạn sẽ thấy việc chèn các file đa phương tiện trở lên dễ dàng hơn bao giờ hết.
Trong phạm vi bài viết này, mình sẽ giới thiệu với các bạn cách chèn video, audio, object và chèn video từ youTube. Trước hết chúng ta cùng xem qua một số định dạng phổ biến của video và audio nhé.

Kết luận: Sau khi kết thúc bài này, các bạn đã có kha khá kiến thức HTML để có thể tạo một web html tương đối đầy đủ rồi. Trong các bài tiếp theo chúng ta cùng tiếp tục tìm hiểu một số thẻ quan trọng khác để xây dựng một website hoàn chỉnh hơn.


Từ khóa tìm kiếm google:

Chèn video trong html, chèn audio trong html, chèn media html, cách chèn video nhac trong html

Bài đăng mới

Bình luận