Đang tải... (xem toàn văn)
Cách chèn media: nhạc, video trong html bài 5 Người đăng: Chiến Thần Ngày: 25122016 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. 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), MPEG4 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ừ plugin 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ẻ 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ẻ 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 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ẻ 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ẻ 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. 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 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ụ: 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. 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ẻ 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 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ẻ , và . Thẻ và 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: Ví dụ: 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ụ: 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ụ: 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ụ: Youtube controls Thuộ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ợ (plugin). Đặ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.
Cách chèn media nhạc video html [bài 5] Người đăng: Chiến Thần - Ngày: 25/12/2016 Tiếp nối viết chèn hình ảnh html, đến viết giới thiệu cho bạn cách chèn tập tin kỹ thuật số (media files) – nhạc, phim ảnh (video, movie) hình ảnh động (animations) Với HTML dễ dàng chèn loại tập tin vào tài liệu hiển thị sống động Vậy Media gì? Media bao gồm nhiều định dạng khác nhau, ví dụ hình ảnh (image), nhạc (music), âm (sound), video, ghi âm (record), phim (film), hình ảnh động (animations), Nó điều bạn nghe xem, website thường chứa loại đa phương tiện với định dạng khác Định dạng phổ biến Video: MPEG (.mpg, mpeg), AVI (.avi), WMN (.wmv), QuickTime (.mov), RealVideo (.rm, ram), Flash (.swf, flv), Ogg (.ogg), WebM (.webm), MPEG-4 MP4 (.mp4) Định dạng phổ biến Audio: MIDI (.mid, midi), RealAudio (.rm, ram), WMA (.wma), AAC (.aac), Ogg (.ogg), MP3 (.mp3), MP4 (.mp4) Vậy có nhìn tổng quan media, tìm hiểu cách chèn chúng vào website Chèn Video Trước HTML5, video chạy browser với hỗ trợ từ plug-in flash Tuy nhiên bạn dễ dàng chèn video vào website bạn thông qua thẻ Cách chèn video HTML: Để chèn video html, bạn chèn sau: Trình duyệt bạn khơng hỗ trợ thẻ video Đoạn text “Trình duyệt bạn không hỗ trợ thẻ video” hiển thị browser bạn không hỗ trợ HTML5 Ví dụ: Trình duyệt bạn khơng hỗ trợ thẻ video Xem demo Các thuộc tính thẻ video: Bất thẻ HTML có thuộc tính chung, video Ngồi video có thuộc tính đặc trưng sau: • contrlos: Thuộc tính controls cho phép bạn điều khiển video ví dụ chạy video, dừng video, thay đổi âm lượng… • width & height: Độ rộng độ cao video • source: Thẻ source cho phép bạn định file video định dạng khác mà trình duyệt chọn từ Các trình duyệt thường chọn định dạng Như thấy thẻ có nhiều thẻ thuộc tính thẻ có lẽ khơng khó hiểu với bạn sử dụng lần phải không autoplay: Tự động chạy video, điều đáng tiếc thuộc tính khơng hỗ trợ thiết bị iPad, iPhone Ví dụ: Trình duyệt bạn khơng hỗ trợ thẻ video Xem demo Lưu ý: Một lưu ý nho nhỏ dành cho bạn để đảm bảo video chạy tất trình duyệt, bạn nên chèn định dạng MP4 Chèn Audio Tương tự với video, để chèn âm HTML có thẻ thẻ thẻ HTML5 Cách chèn âm HTML: Để chèn âm html bạn chèn thẻ với cách sau: Trình duyệt bạn không hỗ trợ thẻ audio Xem demo Các thuộc tính thẻ audio: Nhìn qua cách chèn âm trên, bạn thấy thuộc tính thẻ tương đồng với thẻ tất nhiên cách dùng chúng tương tự bạn Thẻ có thuộc tính autoplay giống video Trình duyệt bạn khơng hỗ trợ thẻ audio Xem demo Chèn đối tượng kỹ thuật số với thẻ: , Ngoài thẻ đặc trưng cho loại tập tin bạn có cách khác để chèn đối tượng kỹ thuật số vào tài liệu HTML dùng thẻ , , thẻ giúp bạn chèn loại đối tượng kỹ thuật số Flash, Java, Audio, Video, PDF, ActiveX Cách chèn đối tượng kỹ thuật số với vẻ Bạn chèn đối tượng kỹ thuật số với thẻ cú pháp sau: Ví dụ: Xem demo Ngồi bạn dùng thẻ để chèn file HTML hay hình ảnh: Ví dụ: Xem demo Các thuộc tính thẻ Ngồi thuộc tính chung html, thẻ có nhiều thuộc tính Mình xin giới thiệu vài thuộc tính đến bạn • width & height: Độ rộng độ cao đối tượng • type: Kiểu định dạng file media (media_type) • data: URL Thuộc tính tương tự thuộc tính src mà bạn tiếp xúc, định url đối tượng sử dụng • name: Tên đối tượng • usemap: Tương tự usemap thẻ Ngoài việc sử dụng thẻ bạn cách khác để chèn đối tượng kỹ thuật số sử dụng thẻ Cách dùng thẻ tương tự với thẻ mà giới thiệu Để chèn đối tượng kỹ thuật số bạn sử dụng cách sau: Ví dụ: Xem demo Ngồi thuộc tính chung thẻ html, thẻ có thuộc tính đặc trưng riêng width, height, src type Các thuộc tính quen thuộc với bạn phải không? Chèn video từ youTube Việc chèn video từ youTube website trở thành việc phổ biến Bạn chèn video từ youtube sử dụng thẻ , Thẻ giới thiệu với bạn phần trên, nên phần xin giới thiệu với bạn cách sử dụng thẻ iframe để chèn video Youtube video id Để chèn video từ youtube bạn cần phải có id video ví dụ như: XGSy3_Czz8k Video id bạn lấy bạn lưu video play video youtube Sau có video id bạn chèn video cách sau: Ví dụ: Xem demo Các thuộc tính thẻ iframe: Ngồi đặc tính chung thẻ HTML, thẻ iframe có thuộc tính riêng như: width, height, name, src,… Ngồi youtube có giá trị riêng giúp bạn chèn video cách sinh động Youtube autoplay Bạn thiết lập cho video tự chạy website bạn chạy thơng qua thuộc tính autoplay Có giá trị của autoplay: 0: Video không chạy tự động 1: Video tự động chạy người dùng vào website bạn Ví dụ: Youtube playlist Bạn chèn playlist vào website bạn thơng qua thuộc tính “list” Ví dụ: Youtube Loop Thơng qua thuộc tính loop bạn thiết lập cho video chạy lần mãi Có giá trị thuộc tính này: 0: giá trị mặc định, với giá trị video chạy lần 1: video lặp mãi Ví dụ: Youtube controls Thuộc tính controls có tác dụng tương tự với controls thẻ Nó có giá trị là: 0: không cho phép người dùng điều khiển video 1: 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 phát triển mạnh mẽ trình duyệt, trình duyệt hỗ trợ phần lớn định dạng meida khác Chỉ có số định dạng đòi hỏi chương trình hỗ trợ (plug-in) Đặc biệt với phát triển mạnh mẽ HTML5 bạn thấy việc chèn file đa phương tiện trở lên dễ dàng hết Trong phạm vi viết này, giới thiệu với bạn cách chèn video, audio, object chèn video từ youTube Trước hết xem qua số định dạng phổ biến video audio Kết luận: Sau kết thúc này, bạn có kiến thức HTML để tạo web html tương đối đầy đủ Trong tiếp tục tìm hiểu số thẻ quan trọng khác để xây dựng website hoàn chỉnh ... để đảm bảo video chạy tất trình duyệt, bạn nên chèn định dạng MP4 Chèn Audio Tương tự với video, để chèn âm HTML có thẻ thẻ thẻ HTML5 Cách chèn âm HTML: Để chèn âm html bạn chèn thẻ ... Youtube video id Để chèn video từ youtube bạn cần phải có id video ví dụ như: XGSy3_Czz8k Video id bạn lấy bạn lưu video play video youtube Sau có video id bạn chèn video cách sau: