4809 fans
1036 reader
122 followers

Basic HTML 5 với media element

Publish by: Võ Minh Mẫn
In category: HTML 5 & CSS 3
67 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

Võ Minh Mẫn

Nghề chính là chém gió, quăng bom và ném lựu đạn. Nghề phụ là cắt cỏ, chém chuối, cưa cây......

Khang

Trước tiên em phải thanks anh rất nhiều phải nói những tutorials của anh hay thật. Em mới bắt đầu tìm hiểu nên còn nhiều cái không biết lắm. Anh ơi cho em hỏi nếu em muốn làm thêm một danh sách các bài hát ở phía dưới giống như trang mp3.zing.vn vậy thì em phải làm như thế nào? Anh có thể làm một tutorials hướng dẫn không?
Hiếu

anh ơi cho em em hỏi cái video.mp4 hay video.ogg ở đâu ra ạ ^^ nó ở trong cùng folder lưu trữ trên máy tính của anh, hay là host ở đâu đó trên mạng, mà gõ tên ra là có thể play được thế ạ. Vì em chẳng hiểu nguồn gốc nó ở đâu nên đã thử cho văn bản code và video vào cùng 1 folder, rồi code bt mà k dc ạ ^^. Khó hiểu quá anh vui lòng giải thích cho em nhé.
cám ơn website ạ.
Người học SEO

các bác cho em hỏi tí, em chẳng bít gì về code web cả nhưng cũng biết wa các thẻ quan trọng của SEO vậy em hỏi các bác là muốn thành cao thủ SEO mà không hiểu nhiều về code web liệu có được không
Thank anh chị em
canh_nguyen

Chao anh! E da xem video nay lau roi. Em mong cac anh lam nhieu video ve html5 va css3 hon nua. E chan thanh cam on cac anh da post nhung video hay.
http://xuanchien.herobo.com Xuân Chiến

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
- http://minhman.me Võ Minh Mẫn
  
  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.
http://xuanchien.herobo.com xuanchien

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
Nguyễn Văn Tính

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!
Vutruong

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.
http://nss.net.vn Nga Nguyen Duy

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 ạ?:(
- http://minhman.me Võ Minh Mẫn
  
  Đú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. ^^!
Tony3108

Anh ơi!Nếu em muốn stop trong video,quay trở lại ban đầu thì phải làm sao anh???
hoang son

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!!
- http://minhman.me Võ Minh Mẫn
  
  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 đề.
  - hoang son
    
    Mình chạy code demo của anh mr2vm rồi, cũng không hiện hình lun!! hic!!!
http://thuthuatcode.blogspot.com/ Nguyễn Doãn Đức

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
- http://minhman.me Võ Minh Mẫn
  
  Đó 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.
- ngoclx
  
  bạn dùng firefox và addon EditCSS! Thân!
Hoang The Son

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
Tony3108

Tuyệt! Đang mong mấy anh re Tut về HTML5 đây.
Nguyễn huy hùng

Anh post nhieu bai demo html 5 anh nhá.thanks
Thông

Anh có thể nói thể những thẻ khác trong HTML5 được không anh?
itboy

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á
nhatchimai111

Đoạn code “document.getElementsByTagName(‘audio’)[0]” có ý nghĩa gì?
- http://thespydesign.com MrV2m
  
  Tức là lấy đối tượng là tag với tên tag là audio.
  - nhatchimai111
    
    vậy số 0 trong dấu ngoặc vuông có ý nghĩa gì?
    - lack
      
      [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.
  - http://thespydesign.com/ thanhdong
    
    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 à!
duc hung

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 [email protected] cảm ơn nhiều

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.