Hướng dẫn embed multimedia in html - nhúng đa phương tiện vào html

Nội dung bài viết

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.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.

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.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.

Chúng ta có rất nhiều định dạng 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

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
5
6
7
8
9
10
11
12
13
14
15
16
 
 
 

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


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

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
 controls>
   src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.

6. Video Demo

Hướng dẫn embed multimedia in html - nhúng đa phương tiện vào html

7. Thực hành online và source code

Hướng dẫn embed multimedia in html - nhúng đa phương tiện vào html

Hướng dẫn embed multimedia in html - nhúng đa phương tiện vào html


Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây


The HTML element is used to show a video on a web page.



Định dạng video HTML

Có ba định dạng video được hỗ trợ: MP4, WebM và OGG. Hỗ trợ trình duyệt cho các định dạng khác nhau là:

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »


Làm thế nào nó hoạt động

Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.

Đó là một ý tưởng tốt để luôn bao gồm các thuộc tính width

 
 
 

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


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

0. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy trong khi video tải.

Phần tử

 
 
 

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


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

1 cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

Văn bản giữa các thẻ

 
 
 

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


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

3 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử .


HTML Autoplay

Để tự động bắt đầu video, hãy sử dụng thuộc tính

 
 
 

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


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

5:

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »

Lưu ý: Trình duyệt crom không cho phép tự động phát trong hầu hết các trường hợp. Tuy nhiên, autoplay bị tắt tiếng luôn được phép. Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Thêm

 
 
 

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


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

6 sau
 
 
 

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


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

7 để cho video của bạn bắt đầu phát tự động (nhưng bị tắt tiếng):

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »


Lưu ý: Trình duyệt crom không cho phép tự động phát trong hầu hết các trường hợp. Tuy nhiên, autoplay bị tắt tiếng luôn được phép.

Thêm

 
 
 

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


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

6 sau
 
 
 

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


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

7 để cho video của bạn bắt đầu phát tự động (nhưng bị tắt tiếng):

1
2
3
4
5
6
7
8
9




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




Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .4.0 9.0 3.5 4.0 10.5


Yếu tố

HTML Autoplay

Định dạng video HTMLMP4Có ba định dạng video được hỗ trợ: MP4, WebM và OGG. Hỗ trợ trình duyệt cho các định dạng khác nhau là:Trình duyệt
WebmOGGOGGOGG
Bờ rìaOGGOGGOGG
Bờ rìaOGGOGGOGG
Bờ rìaOGGOGGBờ rìa
VÂNGOGGOGGOGG

Bờ rìa

VÂNGTrình duyệt Chrome
FirefoxCuộc đi săn
KHÔNGOpera
Video HTML - Các loại phương tiệnĐịnh dạng tệp

Loại phương tiện truyền thông

MP4

Video/MP4

Webm

Video/Webm


OGG

Video/OGGHTML Video - Phương thức, Thuộc tính và Sự kiện
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .Yếu tố
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .Yếu tố
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .Yếu tố