One of the most powerful feature of HTML5 is supports for audio and video tags this feature allows you to reduce the third party plug-ins like silverlight and flash. HTML5 programmers has really done nice job by developing these tags. These video and audio tags contains predefined controls but I want to develop custom controls using javascript according to real time requirements. Creating custom video play and pause buttons are very easy when compare to creating stop, forward, reverse buttons and also developed the custom audio controls to increase and decrease the volume. One more think can also develop same code in jquery. Lets begin
The supported video formats of HTML5 video tags are MP4, Quick Time, AVI, OGG. In these MP4 is most popular and most of the video editing tools and mobile devices supports MP4 format. Quick time is for mac users and we can also use on any platform. OGG is a new one compressed file format which maintains the quality of MP4. Do not use Flash (SWF).
Browser Support
- No standard across browsers
- IE and Safari currently only support MP4
- MP4 is not free. There are parent/license issues.
- WEBM the current alternative
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Custom Video Controls Example</h1>
<video id="video" width=320 height=240 poster="media/poster.jpg"
onloadedmetadata="setDuration()" ontimeupdate="update()">
<source src="media/test-video.theora.ogv" type="video/ogg" />
<source src="media/test-video.mp4" type="video/mp4" />
this text should only appear when your browser does not support
video playback. </video>
<button type="button" onClick="playVideo()">play</button>
<button type="button" onClick="pauseVideo()">pause</button>
<button type="button" onClick="stopVideo()">stop</button>
<button type="button" onClick="forwardVideo()">forward</button>
<button type="button" onClick="reverseVideo()">reverse</button>
<p>total duration <span id="totalTime">x</span> seconds<br>
current time <span id="timeText">x</span> seconds
</p>
<div id="totalTime"></div>
<script>
function playVideo(){
document.getElementById("video").play();
}
function pauseVideo(){
document.getElementById("video").pause();function reverseVideo(){
document.getElementById("video").currentTime--;
}
}
function forwardVideo(){
document.getElementById("video").currentTime++;
}
function stopVideo(){
document.getElementById("video").pause();
document.getElementById("video").currentTime=0;
}
function setDuration(){
document.getElementById("totalTime").innerHTML=
document.getElementById("video").duration;
}
function update(){
document.getElementById("timeText").innerHTML=
document.getElementById("video").currentTime;
}
</script>
</body>
</html>
The supported audio formats of HMTL5 audio tags are wav, mp3, AIFF, OGG. In these wav is editable format used in audio editing. MP3 everyone knows, AIFF is very popular for mac users and OOG is new format I’m not familiar this. Don’t use iTunes file format.
Browser Support
- No one standard across browsers
- IE and Safari currently only support MP3
- MP3 is not free. There are parent/license issues.
- Other codecs: Vorbis (The audio codec in the OGG container) supports Firefox and Opera
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Custom Audio Controls Example</h1>
<audio controls id="audio">
<source src="media/audio_sample.ogg" type="audio/ogg" />
<source src="media/audio_sample.mp3" type="audio/mpeg" />
Your browser does not support the audio element. </audio>
<br/>
<p>current volume <span id="volume">xx</span></p>
<button type="button" onClick="volumeDown()">volume down</button>
<button type="button" onClick="volumeUp()">volume up</button>
<script>
audio = document.getElementById("audio");
document.getElementById("volume").innerHTML=audio.volume;
function volumeDown(){
audio.volume-=.1
document.getElementById("volume").innerHTML=audio.volume;
}
function volumeUp(){
audio.volume+=.1
document.getElementById("volume").innerHTML=audio.volume;
}
</script>
</body>
</html>
They manage their workflow very well. We have an excellent relationship
ReplyDeleteexperience design agency
As soon as we’re absolutely clear we’ll start the proofing procedure. Just about all evidence are sent by way of email till you’re 100% satisfied
ReplyDeletedesign studios San Francisco