[HTML5] Hướng dẫn sử dụng thẻ audio và video chèn nhạc, video vào Website, Blog phần 1

Hi-Tech Thủ thuật

{ 0 comments }

Cho tới thời điểm hiện tại vẫn chưa có bất cứ 1 cú pháp chuẩn nào cho việc chèn nhạc và Video trên Website, Blog…. Với mỗi định dạng nhạc, Video khác nhau lại được hiển thị, chơi thông qua một phần bổ trợ (Plug-in) khác nhau. Tuy nhiên với mỗi trình duyệt web (Web Browsers) lại có những phần bổ trợ khác nhau.

HTML5 Element

Dường như để đưa tất cả về một chuẩn cụ thể phổ biến với người dùng, giúp người sử dụng và lập trình dễ sử dụng, lập trình hơn HTML5 đã ra mắt với rất nhiều thành phần mới trong đó có qui định về việc nhúng tập tin nhạc và Video trên trang Web bằng thẻ Audio và Video.

Trong loạt bài viết này HT sẽ hướng dẫn các bạn cách cụ thể nhất để chèn một bản nhạc MP3 hay 1 đoạn Video vào Web, Blog của bạn bằng thẻ Audio và Video. Các trình duyệt hỗ trợ 2 thẻ Audio và Video :
Internet Explorer 9, Firefox, Opera, Chrome, và Safari hỗ trợ thẻ <audio> và <video>
Chú ý : Internet Explorer 8 và các phiên bản cũ hơn không hỗ trợ thẻ <audio> và <video>.
Phần 1 : Hướng dẫn sử dụng thẻ I . Trước tiên chúng ta sẽ cũng xem cú pháp của thẻ

<audio width="300" height="32" controls="controls" autoplay="autoplay" loop="loop"><source src="song.ogg" type="audio/ogg" /><source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

II . Sau khi đọc kĩ 1 cú pháp để chèn nhạc vào Website, Blog chúng ta hãy cùng phân tích cú pháp trên :
1. <audio></audio> chính là thẻ qui định để chèn định dạng nhạc.
2. Thuộc tính controls : Thay vì để nhạc tự chạy các bạn nên thêm thuộc tính này vào. Nó sẽ giúp thêm các nút điều khiển cho trình chơi nhạc của bạn như play, pause, volume..
3. Thuộc tính autoplay sử dụng khi các bạn muốn đoạn nhạc sẽ tự động chạy khi khách truy cập trang của bạn.
4. Thuộc tính loop : Sử dụng nếu các bạn muốn đoạn nhạc đó chạy lại nhiều lần.
Lưu ý nhỏ : Nếu không muốn làm phiền khách truy cập tốt nhất các bạn không nên sử dụng 2 thuộc tính autoplay và loop.
5. Thuộc tính <source />. Lưu ý là khi kết thúc thuộc tính này các bạn nhớ để />. Thuộc tính này cho phép chơi nhạc nhiều định dạng như MP3, OGG, WAV… Nó cũng sẽ giúp các bạn chỉ định đường dẫn tới file nhạc. Trong thuộc tính còn có những thành phần nhỏ nữa là src, type, preload.
a. src : sau thành phần này chính là link file nhạc cú pháp là src=”linkfile nhạc”.
b. type : Thành phần này giúp bạn qui định cách thức để truyền dữ liệu vì dữ liệu có rất nhiều kiểu. Nó cũng giống như thành phần qui định sẽ load loại codec nào để play tập tin VD tập MP3 thì phải để là type=”audio/mpeg”.
c. preload : Đối với các tập tin lớn, để chơi nhạc nhanh, không bị giật khi nghe nhạc bạn nên sử dụng thành phần này. Ở đây xin giải thích ngoài lề 1 chút về bộ đệm : Chúng ta hiểu đơn giản về bộ đệm chính là việc tải trước 1 phần của tập tin về lưu trên máy. Thường các tập tin này sẽ được lưu trong thư mục Temp nằm trong ổ C của máy tính. Khi xem phim và nghe nhạc trên các trang như MP3 và Youtube sở dĩ xem được nhanh và không bị giật là do các file nhạc và Video đã được tải về trước 1 phần. Khi nghe nhạc trên MP3 hãy thử nghe hết 1 bài hát sau đó replay và rút cable mạng các bn vẫn sẽ thấy nghe nhạc được bình thường. Nhưng nếu nhấn F5 thì sẽ không nghe được nữa do bộ đệm đã bị xóa nhường chỗ cho phiên làm việc mới. Trờ lại với preload. Chúng ta có 3 lựa chọn cho preload. Mặc định preload không được sử dụng đó cũng chính là thuộc tính none. Khi muốn tạo bộ đệm thì ta sử dụng thuộc tính auto. Nếu muốn tạo bộ đệm chỉ khi trang được tải thì chọn là metadata. VD : preload=”auto” Quay về với Nếu bạn muốn chơi nhạc dưới nhiều định dạng hãy sử dụng nhiều thuộc tính . Như ở trên cú pháp trên có 2 định dạng nhạc được chơi là ogg và mp3. Mặc định thì nhạc sẽ load từ trên xuống dưới nếu không có tập tin ogg thì sẽ play file mp3 bên dưới. 6. Your browser does not support the audio element. Dòng chữ này sẽ được hiển thị khi các bạn sử dụng những trình duyệt cũ như IE 8, IE 7, IE 6, IE 5, IE 4, IE 3, IE 2, IE 1, Netscape .v.v….. Các định dạng nhạc và các trình duyệt hỗ trợ khi sử dụng thẻ

Xem thêm  Hướng dẫn nhúng status facebook vào website - blog
Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES

Bây giờ chúng ta sẽ hoàn thiện và sử dụng thẻ

Code :

<audio width="300" height="32" controls="controls" autoplay="autoplay"><source src="song.ogg" type="audio/ogg" /><source src="http://qns.vn/Upload/Chuongtrinh/Fileyeucau/QnS%201109_2_Home_Michael%20Buble.mp3" type="audio/mpeg" />

Your browser does not support the audio element.
</audio>

Và thành quả :

Góp ý cho Tô Triều