HTML 5 introduced support for audio and video natively in the browser (without plugins). This makes removes the need to use proprietary tools and formats (such as Flash, QuickTime, Windows Media, Real) in order to provide basic media capabilities.
<video width="720" height="480" src="video.mp4" controls />Example: Video Basics
<video width="720" height="480" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Your browser does not support the video tag. </video>Attributes: autoplay, controls, height, width, loop, muted, poster, preload, src
<audio controls src="audio.mp3" />Reference: w3schools.com - HTML audio Tag
<audio controls> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>Attributes: autoplay, controls, loop, preload, src
<html>
<head>
<title>Video JavaScript</title>
</head>
<body>
<!-- Add an “id” to the video tag so that we can access it easily in JavaScript -->
<video width="720" height="480" controls id="thevideo">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- When this button is clicked, call the doSomething function -->
<button onClick="doSomething()">Do Something here</button>
<script type="text/javascript">
// Get Access to the Video Object
var theVideoObject = document.getElementById("thevideo");
// Alert, just to make sure it isn’t null
alert(theVideoObject);
// Called by the Do Something button
function doSomething() {
// Change the width
theVideoObject.width = theVideoObject.width/2;
if (theVideoObject.paused) {
// If the video is paused, call play
theVideoObject.play();
} else {
// Otherwise, pause it
theVideoObject.pause();
}
}
</script>
</body>
</html>
Example: Video JavaScript Example