VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML5 Tuts

HTML5 là gì? Cú pháp HTML5 cơ bản Các thuộc tính HTML5 Sự kiện trong HTML5 WEB Forms 2 trong HTML5 SVG trong HTML5 MathML trong HTML5 WEB Storage trong HTML5 WEB SQL trong HTML5 Sự kiện Server-Sent trong HTML5 WEB Socket trong HTML5 Canvas trong HTML5 Audio & Video trong HTML5 GeoLocation trong HTML5 Micro Data HTML5 Drag & Drop trong HTML5 Web worker trong HTML5 Tổng hợp các thẻ cơ bản trong HTML5 Tổng hợp các thẻ cũ trong HTML5 Tổng hợp các thẻ mới trong HTML5
1 / 3
❮ ❯

Audio và Video trong HTML5


Canvas trong HTML5
Geolocation trong HTML5

Nội dung chính

  • Audio và Video trong HTML5
  • Nhúng video
  • Thuộc tính của thẻ video
  • Nhúng Audio
  • Các thuộc tính của Audio
  • Xử lý các sự kiện của Media
  • Định cấu hình Server cho kiểu media

Audio và Video trong HTML5

Các đặc trưng HTML5, bao gồm sự hỗ trợ audio và video tự nhiên mà không cần Flash.

Thẻ HTML5 và làm nó đơn giản để thêm đa phương tiện tới một Website. Bạn cần thiết lập thuộc tính src để nhận diện nguồn phương tiện và bao gồm một thuộc tính control để người sử dụng có thể chơi và dừng đa phương tiện.



Nhúng video

Dưới đây là mẫu đơn giản nhất để nhúng một video file 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>

Chi tiết kỹ thuật bản phác thảo của HTML5 hiện tại không xác định định dạng video nào mà các trình duyệt nên hỗ trợ trong thẻ video. Nhưng định dạng video được sử dụng phổ biến nhất là:

  • Ogg: Ogg file với Thedora video và Vorbis video.

  • mpeg4: MPEG4 file với H.264 video và AAC audio.

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


<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="/example/html5/foo.mp4" type="video/ogg" />
       <source src="/example/html5/foo.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Thuộc tính của thẻ video

Thẻ HTML5 video có thể có một số thuộc tính để điều khiển sự nhìn và cảm nhận và các tính năng đa dạng của sự điều khiển:

Thuộc tínhMô tả
autoplayThuộc tính logic này nếu được xác định trước, video sẽ tự động bắt đầu chơi lại (playback) ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu.
autobufferThuộc tính logic này nếu được định cấu hình, video sẽ tự động bắt đầu đệm ngay cả khi nó không được thiết lập để tự động chơi.
controlsNếu thuộc tính này có mặt, nó sẽ cho phép người sử dụng để điều khiển video phát lại sau, bao gồm âm lượng, chơi lại từ đầu và dừng/khôi phục lại sự phát lại.
heightThuộc tính này xác định chiều cao khu vực hiển thị của video, bằng đơn vị CSS pixel.
loopThuộc tính logic này nếu được xác định, sẽ cho phép video tự động playback từ đầu sau khi kết thúc.
preloadThuộc tính này xác định video sẽ được tải tại trang tải, và sẵn sàng chạy. Bị bỏ qua nếu autoplay có mặt.
posterĐây là một URL của một hình ảnh để hiển thị cho tới khi người sử dụng chơi hoặc chơi lại từ đầu.
srcURL của video được nhúng. Nó là tùy ý; bạn có thể thay thế cho sử dụng phần tử trong khối video để xác định video để nhúng.
widthThuộc tính này xác định độ rộng khu vực hiển thị của video, bằng đơn vị CSS pixel.


Nhúng Audio

HTML5 hỗ trợ thẻ mà đượ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>

Chi tiết kỹ thuật bản phác thảo HTML5 hiện tại không xác định định dạng audio nào mà trình duyệt nên hỗ trợ trong thẻ audio. Nhưng các định dạng audio được sử dụng phổ biến nhất là ogg, mp3 và wav.

Bạn có thể sử dụng thẻ để xác định đa phương tiện cùng với kiểu media và nhiều thuộc tính khác. Một phần tử audio cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng mà nó nhận ra đầu tiên:


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

Các thuộc tính của Audio

Thẻ HTML5 audio có thể có một số thuộc tính để điều khiển sự nhìn và cảm nhận và các tính năng đa dạng khác của điều khiển:

Thuộc tínhMô tả
autoplayThuộc tính logic này nếu được xác định trước, audio sẽ tự động bắt đầu playback ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu.
autobufferThuộc tính logic này nếu được định cấu hình, audio sẽ tự động bắt đầu đệm ngay cả khi nó không được thiết lập để tự động chơi.
controlsNếu thuộc tính này có mặt, nó sẽ cho phép người sử dụng để điều khiển audio phát lại sau, bao gồm âm lượng, chơi lại từ đầu và dừng/khôi phục lại sự phát lại.
loopThuộc tính logic này nếu được xác định, sẽ cho phép audio tự động chơi lại từ đầu sau khi kết thúc.
preloadThuộc tính này xác định audio sẽ được tải tại trang tải, và sẵn sàng chạy. Bị bỏ qua nếu autoplay có mặt.
srcURL của audio được nhúng. Nó là tùy ý; bạn có thể thay thế cho sử dụng phần tử trong khối video để xác định video để nhúng.


Xử lý các sự kiện của Media

Các thẻ HTML5 audio và video có thể có một số thuộc tính để điều khiển các tính năng đa dạng bơi sử dụng Javascript:

Sự kiệnMô tả
abortSự kiện này được tạo khi playback bị bở dở.
canplaySự kiện này được tạo khi đủ dữ liệu có sẵn mà đa phương tiện có thể được chơi.
endedSự kiện này được tạo khi playback hoàn thành.
errorSự kiện này được tạo khi một lỗi xảy ra
loadeddataSự kiện này được tạo khi Frame đầu tiên của media đã hoàn thành tải.
loadstartSự kiện này được tạo khi quá trình tải của media bắt đầu.
pauseSự kiện này được tạo khi playback bị dừng.
playSự kiện này được tạo khi playback bắt đầu hoặc khôi phục.
progressSự kiện này được tạo định kỳ để thông báo tiến trình của việc tải media.
ratechangeSự kiện này được tạo khi tốc độ playback thay đổi.
seekedSự kiện này được tạo khi một hoạt động seek hoàn thành.
seekingSự kiện này được tạo khi một hoạt động seek bắt đầu.
suspendSự kiện này được tạo khi việc tải media bị hoãn.
volumechangeSự kiện này được tạo khi âm lượng audio thay đổi
waitingSự kiện này được tạo khi hoạt động được yêu cầu (ví dụ như playback) bị trì hoãn để đợi hoạt động khác kết thúc (ví dụ như hoạt động seek).

Sau đây là ví dụ mà cho phép play một video đã cho:


<!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="/example/html5/foo.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>
   </form>
</body>
</html>

Định cấu hình Server cho kiểu media

Theo mặc định thì hầu hết Server không phục vụ kiểu phương tiện Ogg hoặc mp4 với các kiểu MIME chính xác, vì thế bạn cần bổ sung định cấu hình chính xác cho chúng:

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

Canvas trong HTML5
Geolocation trong HTML5

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Cú pháp HTML5 cơ bảnHTML5 là gìTổng hợp các thẻ mới trong HTML5Tổng hợp các thẻ cũ trong HTML5Tổng hợp các thẻ cơ bản trong HTML5Web Worker trong HTML5Drag và Drop trong HTML5Microdata trong HTML5Geolocation trong HTML5Audio và Video trong HTML5Canvas trong HTML5WebSockets trong HTML5

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml