html5 audio

Audio trên Web


hiện nay  âm thanh hay được phát qua một plugin (như flash). Tuy nhiên, không phải tất cả các trình duyệt có  hỗ trợ  như nhau.

HTML5 quy định cụ thể một cách chuẩn để bao gồm âm thanh, với các yếu tố âm thanh.

Hiện tại, có 3 định dạng được hỗ trợ cho các yếu tố âm thanh:
Ogg
MP3
Wav

Chương trình hoạt động

Để phát một tập tin âm thanh trong HTML5, đây là tất cả các bạn cần:
<audio src="song.ogg" controls="controls">
</ audio>

Thuộc tính kiểm soát là để thêm chơi, tạm dừng, và điều khiển âm lượng.

Chèn nội dung giữa các <audio> và </ thẻ âm thanh> cho các trình duyệt không hỗ trợ các yếu tố âm thanh:
Ví dụ
<audio src="song.ogg" controls="controls">
Trình duyệt của bạn không hỗ trợ các yếu tố âm thanh.
</ audio>



Ví dụ trên sử dụng một tập tin Ogg, và sẽ làm việc trong Firefox, Opera và Chrome.

Để thực hiện các công việc âm thanh trong Safari, các tập tin âm thanh phải được các loại nhạc MP3 hay Wav.

Yếu tố âm thanh cho phép nhiều thành phần mã nguồn. Nguồn yếu tố có thể liên kết đến tập tin âm thanh khác nhau. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên:
Ví dụ
<audio controls="controls">
src="song.ogg" <source type="audio/ogg" />
src="song.mp3" <source type="audio/mpeg" />
Trình duyệt của bạn không hỗ trợ các yếu tố âm thanh.
</ audio>


Internet Explorer

Internet Explorer 8 không hỗ trợ các yếu tố âm thanh. Trong trình duyệt IE 9, sẽ có hỗ trợ cho các yếu tố âm thanh.
<audio> Tất cả các thuộc tính
Giá trị thuộc tính mô tả
Ghi rõ autoplay, autoplay là phần âm thanh sẽ bắt đầu chơi ngay sau khi nó đã sẵn sàng.
Chỉ định rằng các điều khiển kiểm soát điều khiển sẽ được hiển thị, chẳng hạn như là một nút phát.
vòng lặp loop Chỉ định rằng các âm thanh sẽ bắt đầu chơi lại (looping) khi nó đạt đến kết thúc
tải trước tải trước Chỉ định rằng âm thanh sẽ được nạp lúc tải trang, và sẵn sàng để chạy. Bỏ qua nếu autoplay có mặt.
Ghi rõ src url URL của âm thanh để chơi

html5 video

để hiển thị video trong html 5 bạn dùng thẻ video

<video src="movie.ogg" controls="controls">
</video>

controls="controls" với "controls" có thể là play, pause, and volume controls.

vài thuộc tính video trong html5

autoplay	autoplay	Specifies that the video will start playing as soon as it is ready
controls	controls	Specifies that controls will be displayed, such as a play button.
height	pixels	Specifies the height of the video player
loop	loop	Specifies that the media file will start over again, every time it is finished.
preload	preload	Specifies that the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present.
src	url	Specifies that the URL of the video to play
width	pixels

ví dụ

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

kiểm tra trình duyệt hỗ trợ html5 hay không

<script type="text/javascript">
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
  {
  var vidTest=document.createElement("video");
  oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  if (!oggTest)
    {
    h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    if (!h264Test)
      {
      document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
      }
    else
      {
      if (h264Test=="probably")
        {
        document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
        }
      else
        {
        document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
        }
      }
    }
  else
    {
    if (oggTest=="probably")
      {
      document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
      }
    else
      {
      document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
      }
    }
  }
else
  {
  document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  }
}
</script>
sử dụng đoạn code để kiểm tra sự hỗ trợ của trình duyệt với html5 

html5

ví dụ 1

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

</body>

HTML5 là gì?

HTML5  là  chuẩn mới cho HTML, XHTML, và DOM HTML.

Các phiên bản trước của HTML  từ  năm  1999 trở về . Các trang web đã thay đổi rất nhiều kể từ đó.

HTML5 vẫn là một công việc đang phát trển . Tuy nhiên, các trình duyệt hiện đại nhất có một số hỗ trợ HTML5.
HTML5 Bắt đầu làm việc thế nào ?

HTML5 là một hợp tác giữa World Wide Web Consortium (W3C) và Web Hypertext Application Technology Nhóm công tác (WHATWG).

WHATWG đã được làm việc với các hình thức web và các ứng dụng, và được làm việc với W3C XHTML 2.0. Trong năm 2006, họ đã quyết định hợp tác và tạo ra một phiên bản mới của HTML.

Một số quy tắc cho HTML5 đã được thành lập:

* Các tính năng mới nên được dựa trên HTML, CSS, DOM, và JavaScript
* Giảm bớt sự cần thiết phải bổ sung từ bên ngoài (như Flash)
* Xử lý lỗi tốt hơn
* Thêm đánh dấu để thay thế kịch bản
HTML5 * phải được thiết bị độc lập
* Quá trình phát triển nên được hiển thị cho công chúng

Tính năng mới

Một số tính năng mới thú vị nhất trong HTML5:

* Các phần tử  vẽ tốt hơn.
* Các yếu tố video và âm thanh để phát lại phương tiện truyền thông
* Hỗ trợ tốt hơn cho việc lưu trữ  offline cục bộ
*  nội dung cụ thể  có  các yếu tố mới , như bài viết, footer, header, nav, section ....
*  kiểm soát hình thức mới , như lịch, ngày tháng, thời gian, email, địa chỉ, tìm kiếm

Hỗ trợ trình duyệt

Các phiên bản mới nhất của Safari, Chrome, Firefox, và Opera hỗ trợ một số tính năng HTML5. Internet Explorer 9 sẽ hỗ trợ một số tính năng HTML5.

tạo nút thẻ a

<html>
<body>
<script>
var links=document.createElement('a');
links.setAttribute("href","http://www.yahoo.com");
links.textContent="yahoo";
document.body.appendChild(links);

var newdiv = document.createElement('div');
newdiv.setAttribute("id","moot450");
newdiv.setAttribute("style", "position:absolute; border:2px solid #000000; width:300px; height:300px;");
document.body.appendChild(newdiv);


</script>
</body>
</html>