The post Hiển thị Youtube trong HTML appeared first on WebVN.
]]>Tại sao nên sử dụng Youtube?
Mỗi phiên bản của một trình duyệt hỗ trợ các định dạng video khác nhau, mỗi trình duyệt lại hỗ trợ những định dạng video khác nhau. Điều này dẫn tới sự hỗ trợ định dạng video không đồng nhất giữa các trình duyệt, làm cho bạn rất vất vả khi chèn video vào website.
Trong bài trước, bạn đã biết chúng ta có thể chuyển đổi từ một định dạng video có sẵn sang các định dạng video khác để chúng có thể chạy trên mọi trình duyệt khi đưa vào website. Nhưng việc chuyển đổi định dạng video hoàn toàn không dễ dàng và sẽ tốn không ít thời gian.
Giải pháp đơn giản nhất cho bạn đó là sử dụng Youtube. Bạn chỉ cần upload video lên, Youtube sẽ tự động chuyển đổi định dạng và hiển thị video tương thích trên các trình duyệt. Công việc của bạn chỉ đơn giản là chèn liên kết từ Youtube vào website.
Một thực tế nữa mà bạn phải lưu ý đó là băng thông và dung lượng lưu trữ. Nếu bạn có nhiều video dài, đặc biệt là video có độ phân giải cao nó sẽ chiếm rất nhiều dung lượng lưu trữ cũng như băng thông để đáp ứng nhu cầu xem của người dùng. Lúc này bạn sẽ phải bỏ thêm một số tiền không nhỏ để phục vụ việc lưu trữ và mở rộng băng thông. Trong khi đó, Youtube sẽ xử lý toàn bộ các khâu này cho bạn một cách miễn phí, thậm chí bạn còn có thể kiếm thêm thu nhập từ video của mình. Miễn sao video của bạn không vi phạm bản quyền.
Video Id của YouTube
Khi bạn tải một video lên trên YouTube, bạn sẽ nhận được một ID là các ký tự bao gồm chữ, số, gạch dưới (giống như thế này: buT7c129DKg).
Bạn sẽ cần đến ID này để chèn video từ YouTube vào trang HTML của mình.
Chèn video từ YouTube vào trang HTML
Để hiển thị video từ YouTube trên trang, bạn làm theo các bước sau đây:
- Tải video lên YouTube
- Lấy ID của video sau khi tải
- Sử dụng thẻ <iframe> với thuộc tính src trỏ tới video
- Sử dụng thuộc tính width, height để quy định kích cỡ hiển thị
- Thêm một vài tham số vào địa chỉ video nếu cần thiết
Ví dụ sử dụng Iframe để hiển thị video từ YouTube
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <iframe width="320" height="180" src="https://www.youtube.com/embed/YE7VzlLtp-4"> </iframe> </body> </html> |
Tham số khi hiển thị video từ YouTube
autohide
Giá trị là 0: Thanh điều chỉnh video luôn luôn hiển thị.
Giá trị là 1: Thanh điều chỉnh tự động ẩn khi video chạy.
Giá trị là 2 (mặc định): Nếu video có tỷ lệ độ phân giải 16:9 hoặc 4:3 thì hoạt động giống giá trị là 1, còn lại hoạt động giống giá trị là 0.
autoplay
Giá trị là 0 (mặc định): Video sẽ không tự động chạy khi trang được tải.
Giá trị là 1: Video sẽ tự động chạy khi trang được tải.
controls
Giá trị là 0: Không hiển thị thanh điều chỉnh. Tải khung hiển thị video ngay khi tải trang.
Giá trị là 1 (default): Hiển thị thanh điều chỉnh. Tải khung hiển thị video ngay khi tải trang.
Giá trị là 2: Hiển thị thanh điều chỉnh nhưng chỉ tải khung hiển thị video khi người dùng nhấn vào nút chạy.
loop
Giá trị là 0 (mặc định): Video chỉ chạy một lần.
Giá trị là 1: Video lặp đi lặp lại.
playlist
Sử dụng tính năng này nếu bạn muốn tạo một danh sách video chạy nối tiếp nhau, các video ID phân cách nhau bằng dấu phẩy.
The post Hiển thị Youtube trong HTML appeared first on WebVN.
]]>The post Plug-in trong HTML appeared first on WebVN.
]]>Ứng dụng hỗ trợ (Plug-in)
Ứng dụng hỗ trợ là những chương trình có nhiệm vụ mở rộng các tính năng của trình duyệt. Những ứng dụng này được gọi là plug-ins.
Những plug-ins nổi tiếng và được sử dụng phổ biến trên web phải kể đến như flash, Java applets.
Plug-ins được sử dụng trong website thông qua thẻ <object> và thẻ <embed>.
Plug-ins có thể được sử dụng với nhiều mục đích khác nhau như: hiển thị bản đồ, quét virus, kiểm tra tài khoản ngân hàng, v.v…
Thẻ <object>
Thẻ <object> được tất cả các trình duyệt hỗ trợ.
Thẻ <object> cho phép thêm các đối tượng vào trang HTML.
Nó được sử dụng để chèn các plug-in (như Java applets, chương trình đọc PDF, Flash) trên website.
Sử dụng thẻ <object> để chèn flash vào trang HTML:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <object width="400" height="145" data="/resources/flyingsnail1.swf"></object> </body> </html> |
Thẻ <object> cũng có thể được sử dụng để chèn một tệp tin HTML vào trong trang:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <object width="100%" height="500px" data="/resources/html5.html"></object> </body> </html> |
hoặc sử dụng để chèn một bức ảnh:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <object data="/wp-content/uploads/2014/12/img_the_scream.jpg"></object> </body> </html> |
Thẻ <embed>
Thẻ <embed> được tất cả các trình duyệt hỗ trợ.
Thẻ <embed> cũng được sử dụng để thêm các đối tượng vào trang HTML.
Tuy trình duyệt web đã hỗ trợ thẻ <embed> trong một thời gian rất dài nhưng chỉ đến khi HTML5 ra đời nó mới trở thành chuẩn HTML. Thẻ <embed> được coi là hợp lệ trong trang HTML5 nhưng lại không hợp lệ trong các trang HTML4.
Sử dụng thẻ <embed> để chèn flash vào trang HTML:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <embed width="400" height="145" src="/resources/flyingsnail1.swf"> </body> </html> |
Thẻ <embed> cũng có thể được sử dụng để chèn một tệp tin HTML vào trong trang:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <embed width="100%" height="500px" src="/resources/html5.html"> </body> </html> |
hoặc sử dụng để chèn một bức ảnh:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <embed src="/wp-content/uploads/2014/12/img_the_scream.jpg"> </body> </html> |
The post Plug-in trong HTML appeared first on WebVN.
]]>The post Audio trong HTML5 appeared first on WebVN.
]]>Audio trên Web
Trước khi HTML5 ra đời, không có bất kỳ chuẩn nào quy định việc chạy audio trên website. Nếu muốn sử dụng audio trên trình duyệt, thông thường người dùng phải thêm chương trình hỗ trợ (như flash).
Khi thẻ <audio> được đưa vào HTML5, bạn có thể dễ dàng chèn audio theo đúng chuẩn.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Audio | 4.0 | 3.5 | 9.0 | 4.0 | 10.5 |
Thẻ audio trong HTML5
Sử dụng thẻ <audio> để chạy audio trong HTML5:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <audio controls> <source src="/wp-content/uploads/2015/09/bell.ogg" type="audio/ogg"> <source src="/wp-content/uploads/2015/09/bell.mp3" type="audio/mpeg"> Trình duyệt của bạn không hỗ trợ thẻ audio trong HTML5. </audio> </body> </html> |
Cách sử dụng thẻ audio
Thuộc tính controls cho phép hiển thị thanh điều khiển video như: bắt đầu, tạm dừng, âm lượng…
Đoạn thông báo nằm giữa thẻ <audio> và </audio> chỉ hiển thị đối với những trình duyệt không hỗ trợ thẻ <audio>.
Bạn có thể sử dụng nhiều thẻ <source> để liên kết tới tệp tin audio có định dạng khác nhau. Trình duyệt sẽ tự động tải kiểu audio mà nó hỗ trợ. Nếu có nhiều kiểu audio được hỗ trợ trong thẻ <source>, trình duyệt sẽ sử dụng kiểu đầu tiên.
Định dạng audio được hỗ trợ
Hiện tại, có 3 kiểu định dạng được hỗ trợ trong thẻ <audio> là: MP3, Wav và Ogg:
| Trình duyệt | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | CÓ | KHÔNG | KHÔNG |
| Chrome | CÓ | CÓ | CÓ |
| Firefox | CÓ | CÓ | CÓ |
| Safari | CÓ | CÓ | KHÔNG |
| Opera | CÓ | CÓ | CÓ |
Các kiểu audio
| Định dạng | Kiểu |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Phương thức, thuộc tính, sự kiện trong thẻ audio
HTML5 sử dụng DOM cho các phương thức, thuộc tính và sự kiện của thẻ <audio>.
Nó cho phép bạn tải, chạy, dừng audio cũng như thiết lập thời lượng và âm lượng của audio.
Bạn có thể sử dụng javascript để bắt các sự kiện trong DOM qua đó nắm được các trạng thái của audio như: bắt đầu chạy, tạm dừng, v.v…
The post Audio trong HTML5 appeared first on WebVN.
]]>The post Video trong HTML5 appeared first on WebVN.
]]>Video được cung cấp từ Big Buck Bunny.
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <video width="400" controls> <source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4"> <source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5. </video> <p> Video được cung cấp từ <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> </body> </html> |
Hiển thị video trên web
Trước khi HTML5 ra đời, không có bất kỳ chuẩn nào quy định việc hiển thị video trên website. Nếu muốn hiển thị video trên trình duyệt, thông thường người dùng phải thêm chương trình hỗ trợ (như flash).
Khi thẻ <video> được đưa vào HTML5, bạn có thể dễ dàng chèn video theo đúng chuẩn.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính | |
|
|
|
|
|---|---|---|---|---|---|
| Video | 4.0 | 3.5 | 9.0 | 4.0 | 10.5 |
Thẻ video trong HTML5
Sử dụng thẻ <video> để hiển thị video trong HTML5:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <video width="320" height="176" controls> <source src="/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4"> <source src="/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5. </video> <p> Video được cung cấp từ <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> </body> </html> |
Cách sử dụng thẻ video
Thuộc tính controls cho phép hiển thị thanh điều khiển video như: bắt đầu, tạm dừng, âm lượng…
Thuộc tính height và width được sử dụng để quy định chiều cao và độ rộng của video.
Nếu thuộc tính height và width không được thiết lập, trình duyệt sẽ không biết kích thước chính xác của video dẫn tới trang có thể bị co dãn khi tải video.
Đoạn thông báo nằm giữa thẻ <video> và </video> chỉ hiển thị đối với những trình duyệt không hỗ trợ thẻ <video>.
Bạn có thể sử dụng nhiều thẻ <source> để liên kết tới tệp tin video có định dạng khác nhau. Trình duyệt sẽ tự động tải kiểu video mà nó hỗ trợ. Nếu có nhiều kiểu video được hỗ trợ trong thẻ <source>, trình duyệt sẽ sử dụng kiểu đầu tiên.
Tự động chạy video
Để video tự động chạy ngay khi tải trang, bạn sử dụng thuộc tính autoplay
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <video width="320" height="176" autoplay> <source src="/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4"> <source src="/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5. </video> <p> Video được cung cấp từ <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> </body> </html> |
Định dạng video được hỗ trợ
Hiện tại, có 3 kiểu định dạng được hỗ trợ trong thẻ <video> là: MP4, WebM và Ogg:
| Trình duyệt | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | CÓ | KHÔNG | KHÔNG |
| Chrome | CÓ | CÓ | CÓ |
| Firefox | CÓ | CÓ | CÓ |
| Safari | CÓ | KHÔNG | KHÔNG |
| Opera | CÓ (từ phiên bản 25) | CÓ | CÓ |
Các kiểu video
| Định dạng | Kiểu |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Phương thức, thuộc tính, sự kiện trong thẻ video
HTML5 sử dụng DOM cho các phương thức, thuộc tính và sự kiện của thẻ <video>.
Nó cho phép bạn tải, chạy, dừng video cũng như thiết lập thời lượng và âm lượng của video.
Bạn có thể sử dụng javascript để bắt các sự kiện trong DOM qua đó nắm được các trạng thái của video như: video bắt đầu chạy, tạm dừng, v.v…
Video được cung cấp từ Big Buck Bunny.
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="playPause()">Chạy/Tạm dừng</button> <button onclick="makeBig()">Cỡ lớn</button> <button onclick="makeSmall()">Cỡ nhỏ</button> <button onclick="makeNormal()">Cỡ vừa</button> <br><br> <video id="video1" width="420"> <source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4"> <source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5. </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> <p>Video được cung cấp từ <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p> </body> </html> |
The post Video trong HTML5 appeared first on WebVN.
]]>The post Video – Audio trong HTML appeared first on WebVN.
]]>Multimedia là gì?
Multimedia hay còn gọi là đa phương tiện, bao gồm những gì bạn có thể nghe thấy hoặc nhìn thấy.
Ví dụ: Ảnh, âm nhạc, video, các đoạn thu âm, phim, hoạt hình… v.v…
Website mà chúng ta hay gặp thường chứa rất nhiều kiểu và định dạng multimedia khác nhau.
Trong bài này chúng ta sẽ tìm hiểu về các định dạng multimedia.
Trình duyệt hỗ trợ
Trình duyệt web thủa ban đầu chỉ hỗ trợ định dạng văn bản với một kiểu chữ và một màu duy nhất.
Sau đó trình duyệt hỗ trợ hiển thị nhiều màu và nhiều kiểu chữ, thậm chí hỗ trợ cả hiển thị hình ảnh!
Khi đã phát triển, mỗi trình duyệt lại hỗ trợ video – audio trên web theo những cách khác nhau tùy theo định dạng. Có những định dạng chúng ta phải cài đặt thêm một số chương trình phụ trợ (plug-in) để hoạt động.
HTML5 ra đời với hy vọng làm nên lịch sử, thay đổi toàn bộ tương lai của multimedia. Thay vì phải cài flash để hiển thị video như trước kia, giờ đây bạn chỉ cần sử dụng thẻ <video> là đủ. Điều này cực kỳ quan trọng với các nhà sản xuất điện thoại thông minh, họ không còn phải phụ thuộc vào công nghệ flash của adobe, đồng thời giảm áp lực chi phí cho cấu hình phần cứng (ram, vi xử lý…) vốn đã giới hạn trên các thiết bị cầm tay.
Các định dạng multimedia
Cách phổ biến nhất để tìm định dạng của một tệp tin là xem phần mở rộng (thường từ 2-4 ký tự đằng sau dấu chấm) của tệp tin đó. Khi trình duyệt nhận thấy phần mở rộng của một tệp tin là .htm hoặc .html, nó sẽ coi đây là một tệp tin HTML. Phần mở rộng .xml dành cho tệp tin XML và .js dành cho tệp tin JavaScript. Ảnh được xác định bằng các phần mở rộng như .gif, .png và .jpg.
Các tệp tin multimedia cũng có những phần mở rộng của riêng mình như: .swf, .wav, .mp3, .mp4, .mpg, .wmv và .avi.
Định dạng video phổ biến
MP4 là định dạng video được sử dụng phổ biến trên internet.
MP4 được YouTube khuyến khích sử dụng.
MP4 được Flash Players hỗ trợ.
MP4 được HTML5 hỗ trợ.
| Định dạng | Tệp tin | Miêu tả |
|---|---|---|
| MPEG | .mpg .mpeg | MPEG. Được phát triển bởi Moving Pictures Expert Group, là định dạng video phổ biến đầu tiên trên website. MPEG được tất cả các trình duyệt hỗ trợ nhưng lại không được hỗ trợ trong HTML5 (xem MP4). |
| AVI | .avi | AVI (Audio Video Interleave). Được phát triển bởi Microsoft. Được sử dụng phổ biến trong camera và TV. Định dạng này có thể chạy trên máy tính nhưng không chạy được trên website. |
| WMV | .wmv | WMV (Windows Media Video). Được phát triển bởi Microsoft. Được sử dụng phổ biến trong camera và TV. Định dạng này có thể chạy trên máy tính nhưng không chạy được trên website. |
| QuickTime | .mov | QuickTime. Developed by Apple. Được sử dụng phổ biến trong camera và TV. Định dạng này có thể chạy trên máy tính nhưng không chạy được trên website. (xem MP4) |
| RealVideo | .rm .ram | RealVideo. Được phát triển bởi Real Media, cho phép truyền tải video với băng thông thấp. Ngày nay, RealVideo vẫn được sử dụng trong video trực tuyến và Internet TV nhưng không chạy được trên trình duyệt. |
| Flash | .swf .flv | Flash. Được phát triển bởi Macromedia. Thường yều cầu phải cài thêm các thành phần mở rộng (plug-in) để có thể chạy được trên trình duyệt web. |
| Ogg | .ogg | Theora Ogg. Được phát triển bởi Xiph.Org. Định dạng được chính thức hỗ trợ trong HTML5. |
| WebM | .webm | WebM. Được phát triển bởi Mozilla, Opera, Adobe và Google. Định dạng được chính thức hỗ trợ trong HTML5. |
| MPEG-4 hoặc MP4 | .mp4 | MP4. Được phát triển bởi Moving Pictures Expert Group dựa trên QuickTime. Định dạng được sử dụng phổ biến trong camera và TV, được tất cả các trình duyệt hỗ trợ và được YouTube khuyến khích sử dụng. |
Định dạng âm thanh
Định dạng MP3 cho phép bạn nén nhạc tốt mà không ảnh hưởng nhiều tới chất lượng. Nếu bạn dự định làm một website âm nhạc, MP3 sẽ là một lựa chọn sáng suốt.
| Định dạng | Tệp tin | Miêu tả |
|---|---|---|
| MIDI | .mid .midi | MIDI (Musical Instrument Digital Interface). Là định dạng chính cho tất cả các thiết bị âm nhạc. Định dạng MIDI có thể chạy trên các thiết bị điện tử, máy tính. |
| RealAudio | .rm .ram | RealAudio. Được phát triển bởi Real Media cho phép phát audio với băng thông thấp. Định dạng không chạy được trên các trình duyệt web. |
| WMA | .wma | WMA (Windows Media Audio). Được phát triển bởi Microsoft. Định dạng có thể chạy trên máy tính nhưng không chạy được trên trình duyệt web. |
| AAC | .aac | AAC (Advanced Audio Coding). Được phát triển bởi Apple để làm định dạng mặc định cho iTunes. Định dạng có thể chạy trên máy tính nhưng không chạy được trên trình duyệt web. |
| WAV | .wav | WAV. Được phát triển bởi IBM và Microsoft. Chạy được trên các máy cài hệ điều hành Windows, Macintosh và Linux. Định dạng được hỗ trợ trong HTML5. |
| Ogg | .ogg | Ogg. Được phát triển bởi Xiph.Org. Định dạng được chính thức hỗ trợ trong HTML5. |
| MP3 | .mp3 | MP3 thực tế là phần âm thanh của tệp tin MPEG. MP3 là định dạng dành cho âm nhạc phổ biến nhất thế giới, có thể nén nhạc với dung lượng thấp mà vẫn cho chất lượng tốt. MP3 được tất cả các trình duyệt hỗ trợ. |
| MP4 | .mp4 | MP4 là định dạng cho video nhưng cũng có thể sử dụng cho audio. MP4 được tất cả các trình duyệt hỗ trợ. |
The post Video – Audio trong HTML appeared first on WebVN.
]]>