Basic HTML 5 với media element
- September 15, 2010
- 63 comments
Khi xưa, khi muốn play một video clip hoặc một bài nhạc các bạn cần phải có một file Flash làm player. Code thì dài dòng rắc rối. Nhưng với sự ra đời của HTML 5 thì chuyện đó không còn khó nữa. Và mình xin được giới thiệu với các bạn một trong những tính năng mới của HTML 5 đó chính là media element.
Media element là tên gọi tổng hợp của 2 tag element và . Với sự có mặt của 2 element này thì việc chơi video, nhạc vô cùng đơn giản. Trong video tutorial thì mình sẽ hướng dẫn rõ hơn cách sử dụng.
Sau đây là các trình duyệt hỗ trợ 2 element này:
- IE 9.0+
- Firefox 3.5+
- Safari 3.0+
- Chrome 3.0+
- Opera 10+
- iPhone 1.0+
- Android 2.0+
Thời lượng: 11:53 phút
Download định dạng .MP4 chất lượng cao: Download
Download DEMO
Dung lượng: 62 MB
Mọi người cho mình hỏi có cách nào lưu video sau khi đã xử lý trong canvas. Ý mình là mình có 1 video bình thường, mình xử lý sang dạng video đen trắng trong canvas và lưu lại cái video đã xử lý ở ngay trong canvas đó thành video đen trắng để lưu trữ trên máy tính thì làm thế nào.
Mong mọi người giúp đỡ. Cảm ơn nhiều
Bái phục, mình chưa từng nghĩ sẽ dùng canvas để xử lý video. Bạn nghĩ tới đó là cao siêu lắm rồi.
HTML5 là công nghệ mới, nó là tương lai của web. Hy vọng ban quản trị có nhiều bài viết hay hướng dẫn học html5, để qua đó có thể thấy html5 làm được những gì, chứng minh được nó là tương lai của web. Xin cảm ơn
Anh có thể làm giúp em một tấm ảnh 3d có thể xoay các chiều tùy ý mình bằng html5 không?
Em cám ơn anh Mẫn nhiều lắm!
Hi anh Võ Minh Mẫn && anh DW
Em đang sử dụng HTML5 để làm web application. Em có một vài thắc mắc muốn hỏi các anh. Mong các anh giúp đỡ
1. Canvas element trong HTML5 có thể nhúng vào đó 1 form, button không ah?
2. Nếu được các anh có thể cho em một ví dụ hay một link nào nói về đều này không ah?
Cảm ơn các anh,
p/s : nếu có thời gian các anh có thể reply trực tiếp hay qua email cũng được.
Em thấy trong w3shool có nói rằng chỉ hỗ trợ 3 format là mp4, ogg, webM, nhưng khi cho file.mp4 vào thì k chạy đc, còn cho file.ogv (ĐỊnh dạng đc record bằng desktop recorder trên ubuntu!). Liệu có gì nhầm lẫn ở đây không ạ?:(
Đúng định dạng chỉ là 1 phần thôi, còn phải đúng codec nữa thì nó mới play dc. ^^!
Anh ơi!Nếu em muốn stop trong video,quay trở lại ban đầu thì phải làm sao anh???
a mr2vm oi, e dung FF 8.0.1 mà chỉ nghe duoc tiếng và thấy thanh control thui la sao ho a? thằng ie9 cung vậy lun!!
Mình cũng ko rõ nguyên nhân, nhưng mà theo mình nghĩ là codes của file video của bạn có vấn đề.
Mình chạy code demo của anh mr2vm rồi, cũng không hiện hình lun!! hic!!!
Xin lỗi Mình không biết comment ở đâu cả.
Bạn dùng tiện ích gì để chỉnh sửa code ngay trên trình duyệt vậy.
Chỉnh sửa css đó
nếu ai biết chỉ cho mình với nha
TKS
Đó là một addon của firefox có tên là web developer, bạn có thể tìm kiếm trên google hoặc trong addon của mozilla.
Hiện tại addon này cũng đã có trên chrome.
bạn dùng firefox và addon EditCSS! Thân!
Chao anh Demon Warlock va Clackken Smith.
E rat thich cac video cua cac anh.
Cac anh co the goi gon chung vao mot link dc ko.
Thanks
Tuyệt! Đang mong mấy anh re Tut về HTML5 đây.
Anh post nhieu bai demo html 5 anh nhá.thanks
Anh có thể nói thể những thẻ khác trong HTML5 được không anh?
A cho e hòi tí: E đang làm một cái đề tài web về mua bán địa nhạc e muồn làm một cái button nghe thử dạng nhự là khi mình click vào button đó thì có một cái clip nhạc chạy ngay phía dưới cái button đó mà không cần phải làm một trang web khác thì phải làm như thế nào hả A có thể hường dẫn cho e được không. Thank a trước nhá
Đoạn code “document.getElementsByTagName(‘audio’)[0]” có ý nghĩa gì?
Tức là lấy đối tượng là tag với tên tag là audio.
vậy số 0 trong dấu ngoặc vuông có ý nghĩa gì?
[0] để phân biệt đang lấy đối tượng thứ mấy với tagName tương ứng, vì có thể trong 1 page HTML có thể có nhiu tagName giống nhau. Theo mình hiểu là vậy.
cho em gmail cua anh de em hoi anh mot số vấn đề về tạo trang web được hông anh?tại em mới bắt đầu học viết web anh à!
mình đang muốn vẽ hình sin dữ liệu từ biến bằng canvas trong html5. bạn nào có thể giúp mình với nha. liên hệ theo duchung1787@yahoo.com cảm ơn nhiều