CÁCH CHÈN NHẠC NỀN VÀO WEBSITE

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.Bạn đang xem: Chèn nhạc nền vào web html

Đị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é.

Bạn đang xem: Cách chèn nhạc nền vào website

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ẻ .Cách chèn một video trong HTML:Để chèn video trong html, bạn sẽ chèn như sau:

Trình duyệt của bạn không hỗ trợ thẻ 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ụ:

Trình duyệt của bạn không hỗ trợ thẻ videoXem 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:

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…

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

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ẻ có thể có nhiều hơn một thẻ và các thuộc tính trong thẻ 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ụ:

Trình duyệt của bạn không hỗ trợ thẻ video Xem demoLư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

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

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

Trình duyệt của bạn không hỗ trợ thẻ 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ẻ tương đồng với thẻ và tất nhiên cách dùng của chúng là tương tự nhau bạn nhé.Thẻ cũng có thuộc tính autoplay giống như video vậy.

Xem thêm:

Trình duyệt của bạn không hỗ trợ thẻ audio Xem demo

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

, 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ẻ , , đâ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ẻ Bạn có thể chèn các đối tượng kỹ thuật số với thẻ bằng cú pháp sau:

Ví dụ:

Xem demoNgoà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ụ:

Xem demo

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

Ngoài thuộc tính chung của html, thẻ 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.

Ngoài việc sử dụng thẻ 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ẻ . Cách dùng của thẻ này tương tự như với thẻ mà mình đã giới thiệuĐể chèn đối tượng kỹ thuật số bạn sử dụng cách sau:

Ví dụ: Xem demoNgoà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ẻ Ví dụ:

">https://www.youtube.com/embed/mHR4FlXFSgY"> 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 autoplayBạ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ự động1: Video tự động chạy khi người dùng vào website của bạn.Ví dụ:

">https://www.youtube.com/embed/mHR4FlXFSgY?autoplay=1"> Youtube playlistBạ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ụ:

Youtube LoopThô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ụ:

Youtube controlsThuộc tính controls này có tác dụng tương tự với controls trong thẻ . 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ụ:

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.