<< Back to the blog

HTML5 - Audio & Video




By @islamzatary

A Brief

Before HTML5, Videos could only be played with plug-ins (like flashplayers).
In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins or require crazy markup, you can do it with a single element.

Flash Object VS Video Tag

Audio & Video Formats

WebM (video) & MPEG format works in the newest versions of all major browsers.
OGG (audio & video) Support Firefox, Chrome & Opera but doesn't support IE.
MP4 (video) Support Internet Explorer, Safari and Chrome, but do not support Opera.
MP3 (audio/mpeg) Support all modern browsers.
WAVE (audio) Support Firefox & Safari

The Complete Tutorials

Video Converter

Audio & Video Attributes

autoplay       preload
poster           loop
controls (play, pause, etc)
height & width !important for video
muted

Video Converter

Audio & Video APIs

Methods

Play() & Pause()

Events

canplay    canplaythrough
ended    emptied    error
loadedmetadata
pause    play
timeupdate    volumechange    waiting

Demo

Audio & Video Custom Controls


Example

HTML5 Audio & Video




Practical



Wrapping up








<< Back to the blog

by @islamzatary