Tin tức

Thiết kế web HTML 5 nhúng video và audio

19/03/2013

Thiết kế web với các tính năng HTML5, bao gồm âm thanh tự nhiên và hỗ trợ video mà không cần Flash.

Các  thẻ HTML5 <audio> và <video> làm cho việc thêm các nguồn đa phương tiện đến một trang web đơn giản hơn. Khi thiết kế web bạn cần gán  thuộc tính src để xác định nguồn đa phương tiện bao gồm một thuộc tính điều khiển để người sử dụng có thể bật và tạm dừng.


Nhúng Video:

Khi thiết kế web với việc nhúng video, đây là cách đơn giản nhất để nhúng một tập tin video trong trang web của bạn:

<video src="foo.mp4"  width="300" height="200" controls>
    Your browser does not support the <video> element.  
</video>

Đặc điểm kỹ thuật khi thiết kế web với HTML5 hiện tại dự thảo không xác định các định dạng video trình duyệt nên hỗ trợ các thẻ video. Tuy nhiên, định dạng video được sử dụng phổ biến nhất là:

1. Ogg: các tập tin với mã hóa Thedora video và âm Vorbis thanh .
2. mpeg4: Các tệp MPEG4 với mã hóa H.264 video và  AAC audio.

Bạn có thể sử dụng thẻ <source> để xác định kiểu nguồn đa phương tiện cùng với các thuộc tính khác. Một phần tử video cho phép nhiều thành phần nguồn và trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên:
<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="/html5/foo.ogg" type="video/ogg" />
       <source src="/html5/foo.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Thuộc tính thông số kỹ thuật Video:
Để nắm được thông tin về các thẻ video trong việc thiết kế web HTML5 có thể có một số thuộc tính để điều khiển cách nhìn và cảm nhận cũng như chức năng khác nhau của điều khiển:

Thuộc tính

Mô tả

autoplay

Thuộc tính boolean này nếu được chỉ định, video sẽ tự động bắt đầu để phát lại ngay khi nó có thể thực hiện mà không dừng lại để hoàn tất việc tải dữ liệu.

autobuffer

Thuộc tính boolean này nếu được chỉ định, video sẽ tự động bắt đầu đưa vào bộ đệm ngay cả khi nó không được thiết lập bật tự động.

controls

Nếu thuộc tính này được mô tả, nó sẽ cho phép người sử dụng để kiểm soát phát lại video, bao gồm âm lượng, tìm kiếm, và tạm dừng / tiếp tục phát lại.

height

Thuộc tính này xác định chiều cao của vùng hiển thị của video, theo pixel CSS.

loop

Thuộc tính boolean này nếu được chỉ định, sẽ cho phép video tự động lặp trở lại bắt đầu sau khi kết thúc

preload

Thuộc tính này xác định rằng video sẽ được nạp lúc tải trang, và sẵn sàng để chạy. Bỏ qua nếu autoplay được chỉ định.

poster

Đây là một URL của một hình ảnh để hiển thị cho đến khi người sử dụng đóng hoặc chuyển.

src

The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed

URL của video để nhúng. Đây là túy chọn, thay vào đó bạn có thể sử dụng các thẻ <source> trong khối video để xác định video để nhúng

width

Thuộc tính này xác định chiều rộng của vùng hiển thị của video, theo pixel CSS.


Nhúng Audio:

HTML5 hỗ trợ thẻ <audio> được sử dụng để nhúng nội dung âm thanh trong một tài liệu HTML hoặc XHTML như sau.

<audio src="foo.wav" controls autoplay>
    Your browser does not support the <audio> element.  
</audio>

Đặc điểm kỹ thuật HTML5 hiện tại dự thảo không xác định các định dạng âm thanh trình duyệt phải hỗ trợ trong thẻ âm thanh. Tuy nhiên, định dạng âm thanh phổ biến nhất được sử dụng là ogg, mp3 và wav.

Bạn có thể sử dụng thẻ <source> để xác định các kiểu nguồn đa phương tiện cùng với các thuộc tính khác. Một yếu yếu tố âm thanh cho phép nhiều thành phần nguồn và trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên:

<!DOCTYPE HTML>
<html>
<body>
   <audio controls autoplay>
       <source src="/html5/audio.ogg" type="audio/ogg" />
       <source src="/html5/audio.wav" type="audio/wav" />
       Your browser does not support the <audio> element.
   </audio>
</body>
</html>

Thuộc tính thông số kỹ thuật Audio:


Ngoài việc thiết kế web với thẻ Video, thẻ âm thanh HTML5 cũng có một số thuộc tính để điều khiển cách nhìn và cảm nhận cũng như các chức năng khác nhau của điều khiển:

Thuộc tính

Mô tả

autoplay

Thuộc tính boolean này nếu được chỉ định, âm thanh sẽ tự động bắt đầu để phát lại ngay vì nó có thể thực hiện mà không dừng lại để hoàn tất việc tải dữ liệu.

autobuffer

Thuộc tính boolean này nếu được chỉ định, âm thanh sẽ tự động bắt đầu đưa vào bộ đệm ngay cả khi nó không được thiết lập để tự động phát.

controls

Nếu thuộc tính này được gán, nó sẽ cho phép người sử dụng để điều khiển phát lại âm thanh, bao gồm âm lượng, tìm kiếm, và tạm dừng / tiếp tục phát lại.

loop

Thuộc tính boolean này nếu được gán, sẽ cho phép âm thanh tự động chuyển trở lại bắt đầu sau khi kết thúc.

preload

Thuộc tính này xác chỉ ra rằng âm thanh sẽ được nạp vào tải trang, và sẵn sàng để chạy. Bỏ qua nếu autoplay là hiện tại.

src

URL của âm thanh để nhúng. Đây là tùy chọn, thay vào đó bạn có thể sử dụng các thẻ <source> trong khối video để xác định video nhúng


Quản lý sự kiện Media:

Thẻ âm thanh và thẻ video HTML5 có thể có một số thuộc tính để điều khiển các chức năng khác nhau của điều khiển bằng cách sử dụng Javascript:

Sự kiện

Mô tả

abort

Sự kiện này được tạo ra khi phát lại được hủy.

canplay

Sự kiện này được tạo khi đủ dữ liệu có sẵn các đa phương tiện có thể được phát.

ended

Sự kiện này được tạo ra khi phát lại hoàn tất.

error

Sự kiện này được tạo ra khi một lỗi xảy ra.

loadeddata

Sự kiện này được tạo ra khi frame đầu tiên của đa phương tiện đã tải xong.

loadstart

Sự kiện này được tạo ra khi việc tải đa phương tiện bắt đầu.

pause

Sự kiện này được tạo ra khi phát lại bị tạm dừng.

play

Sự kiện này được tạo ra khi phát lại bắt đầu hoặc phục hồi lại.

progress

Sự kiện này được tạo ra theo định kỳ để thông báo sự tiến trình của việc tải về đa phương tiện.

ratechange

Sự kiện này được tạo ra khi thay đổi tốc độ phát lại.

seeked

Sự kiện này được tạo ra khi một thao tác tìm kiếm hoàn tất.

seeking

Sự kiện này được tạo ra khi một hoạt động tìm kiếm bắt đầu.

suspend

Sự kiện này được tạo ra khi tải của đa phương tiện bị đình chỉ.

volumechange

Sự kiện này được tạo ra khi thay đổi âm lượng.

waiting

Sự kiện này được tạo ra khi hoạt động yêu cầu (như phát lại) bị trì hoãn trong khi chờ hoàn thành các hoạt động khác (chẳng hạn như "tìm kiếm).


Dưới đây là ví dụ cho phép phát video:
<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0]; 
   v.play();
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="300" height="200" src="/html5/foo.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>
   </form>
</body>
</html>

Cấu hình máy chủ cho for Media:

Hầu hết các máy chủ không theo mặc định phục vụ Ogg hoặc các đa phương tiện mp4 với các kiểu MIME đúng, vì vậy bạn có thể sẽ cần thêm cấu hình thích hợp cho việc này

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

Thiet ke web mien phi,  Hoc thiet ke web

ESVN- Nơi hội tụ giải pháp

Công ty cổ phần Eastern Sun Việt Nam