Chèn nhạc nền vào web html

      171

Tiếp nối nội dung 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 những tập tin hiện đại số (media files) – đó chính là nhạc, phim ảnh (video, movie) và các hình ảnh động (animations). Cùng với HTML bạn có thể dễ dàng chèn những loại tập tin này vào tài liệu cùng nó đã hiển thị rất sống động.

NỘI DUNG TRẮC NGHIỆM


*

Vậy truyền thông media là gì?Media bao hàm rất những định dạng không giống nhau, ví dụ như hình hình ảnh (image), nhạc (music), âm thanh (sound), video, thu thanh (record), phim (film), hình hình ảnh động (animations),... Nó rất có thể là bất kể điều gì bạn có thể nghe hoặc xem, và các website của chúng ta thường chứa những 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 thông dụng của Audio: MIDI (.mid, .midi), RealAudio (.rm, .ram), WMA (.wma), AAC (.aac), Ogg (.ogg), MP3 (.mp3), MP4 (.mp4).Vậy là bọn họ có cái nhìn tổng quan về media, hiện thời chúng ta cùng khám phá cách chèn chúng vào website nhé.

1. Chèn Video

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

Trình duyệt của khách hàng không cung cấp thẻ clip Đoạn text “Trình duyệt của bạn không cung cấp thẻ video” sẽ được hiển thị giả dụ browser của khách hàng không cung ứng HTML5.Ví dụ:

Trình duyệt của doanh nghiệp không hỗ trợ thẻ videoXem demo

Các ở trong tính của thẻ video:

Bất cứ một thẻ HTML đều sở hữu những thuộc tính chung, đoạn clip cũng vậy. Bên cạnh đó video có các thuộc tính đặc trưng sau:

contrlos:

Thuộc tính controls này chất nhận được bạn điều khiển đoạn clip ví dụ như chạy video, giới hạn video, đổi khác âm lượng…

width và height:

Độ rộng và độ dài của video

source:

Thẻ source có thể chấp nhận được bạn chỉ định những file đoạn phim ở những định dạng khác biệt mà trình duyệt rất có thể chọn trường đoản cú đó. Các trình chú tâm thường sẽ lựa chọn định dạng đầu tiên. Như vậy bạn có thể thấy trong một thẻ gồm thể có rất nhiều hơn một thẻ và những thuộc tính trong thẻ chắc hẳn rằng không khó khăn hiểu với chúng ta vì đã thực hiện mấy lần rồi đề xuất không nào.autoplay: tự động hóa chạy video, điều đáng tiếc của ở trong tính này là nó không được hỗ trợ trên máy iPad, iPhone.Ví dụ:

Trình duyệt của chúng ta không hỗ trợ thẻ video Xem demoLưu ý: Một lưu ý nho nhỏ dành cho chúng ta là để bảo đảm các video chạy trên tất cả trình duyệt, chúng ta nên chèn định dạng MP4.

2. Chèn Audio

Tương từ bỏ với video, nhằm chèn music trong HTML bọn họ có thẻ và thẻ này cũng là 1 trong thẻ HTML5.

Xem thêm: Mẫu Quy Chế Lương Thưởng 2018, Mẫu Quy Chế Lương Thưởng Mới Nhất 2018

Cách chèn âm nhạc trong HTML:

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

Trình duyệt của người sử dụng không cung cấp thẻ audio coi demo

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

Nhìn qua bí quyết chèn âm thanh ở trên, chúng ta cũng có thể thấy những thuộc tính của thẻ tương đồng với thẻ và tất yếu cách sử dụng của chúng là giống như nhau các bạn nhé.Thẻ cũng có thể có thuộc tính autoplay giống như clip vậy.

Trình duyệt của khách hàng không cung cấp thẻ audio coi demo

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

, Ngoài những thẻ đặc trưng cho từng nhiều loại tập tin ở trên thì bạn còn tồn tại một biện pháp khác để chèn các đối tượng kỹ thuật số vào tư liệu HTML đó là cần sử dụng thẻ , , đây là các thẻ rất có thể giúp chúng ta chèn những 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 người dùng kỹ thuật số với vẻ Bạn có thể chèn các đối tượng người tiêu dùng kỹ thuật số với thẻ bởi cú pháp sau:

Ví dụ:

Xem demoNgoài ra chúng ta cũng có thể dùng thẻ này để chèn một tệp tin HTML hay như là 1 hình ảnh:Ví dụ:

Xem demo

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

Ngoài ở trong tính tầm thường của html, thẻ có nhiều thuộc tính. Bản thân xin trình làng một vài trực thuộc tính cơ bản đến những bạn.

width & height: Độ rộng lớn và độ dài của đối tượng.type: đẳng cấp định dạng của file truyền thông (media_type)data: URL. Nằm trong tính này tựa như như trực thuộc tính src mà chúng ta đã tiếp xúc, nó hướng dẫn và chỉ định url của đối tượng người dùng được sử dụng.name: tên của đối tượngusemap: tương tự như như usemap của thẻ

Ngoài việc sử dụng thẻ các bạn còn một giải pháp khác nhằm chèn các đối tượng người sử dụng kỹ thuật số là sử dụng thẻ . Biện pháp dùng của thẻ này tựa như như cùng với thẻ mà mình đã giới thiệuĐể chèn đối tượng người dùng kỹ thuật số bạn áp dụng cách sau:

Ví dụ: xem demoNgoài những thuộc tính phổ biến của thẻ html, thẻ có các thuộc tính đặc trưng riêng đó là width, height, src cùng type. Các thuộc tính này đã quá thân quen với bạn rồi đề xuất không?

4. Chèn đoạn phim từ youTube

Việc chèn video từ youTube của những website đã trở thành việc khá phổ cập hiện nay. Bạn có thể chèn video từ youtube bằng những sử dụng một trong các thẻ Ví dụ:

">https://www.youtube.com/embed/mHR4FlXFSgY"> xem demo

Các trực thuộc tính của thẻ iframe: Ngoài những đặc tính thông thường của thẻ HTML, thẻ iframe cũng có các ở trong tính riêng biệt như: width, height, name, src,…

Ngoài ra youtube cũng đều có các quý giá 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 cấu hình cho video tự chạy lúc website của khách hàng chạy trải qua thuộc tính autoplay. Bao gồm 2 giá trị của của autoplay:0: đoạn phim không được chạy từ bỏ động1: Video tự động hóa 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 nằm trong tính loop bạn cũng có thể thiết lập cho video chạy duy nhất lần hay là mãi mãi. Gồm 2 quý giá của trực thuộc tính này:0: là cực hiếm mặc định, với mức giá trị này đoạn phim chỉ chạy một lần.1: đoạn phim sẽ được lặp mãi mãi.Ví dụ:

Youtube controlsThuộc tính controls này có công dụng tương từ bỏ với controls vào thẻ . Nó gồm 2 quý hiếm đó là:0: không được cho phép người dùng điều khiển video.1: là giá trị mặc định, có thể chấp nhận được bạn điều khiển và tinh chỉnh video.Ví dụ:

Trình trông nom hỗ trợVới sự vạc triển trẻ trung và tràn trề sức khỏe các trình duyệt, hiện nay tại các trình trông nom đã hỗ trợ phần lớn các định dạng meida khác nhau. Chỉ có một số trong những định dạng đòi hỏi các chương trình cung cấp (plug-in). Đặc biệt với việc phát triển trẻ trung và tràn đầy năng lượng của HTML5 các các bạn sẽ thấy việc chèn những file đa phương tiện trở lên dễ dãi hơn bao giờ hết.Trong phạm vi bài viết này, mình sẽ reviews với chúng ta cách chèn video, audio, object với chèn đoạn clip từ youTube. Trước hết họ cùng coi qua một vài định dạng thông dụng của video clip và audio nhé.

Kết luận: Sau khi ngừng bài này, các bạn đã có kha khá kiến thức HTML để rất có thể tạo một website html tương đối không thiếu rồi. Trong những bài tiếp theo họ cùng tiếp tục khám phá một số thẻ quan trọng đặc biệt khác để chế tạo một website hoàn chỉnh hơn.