Hello Friends My Name Is Viraj,Today I Will Display Video With Different Functionality Such As Play,Pause,Big,Small and Normal Using Button Control On Video On Your Web Page.Because the <audio> and <video> elements are part of the HTML5 standard, there are JavaScript methods, properties, and DOM events associated with them.There are methods for loading, playing, pausing, and jumping to a time. There are also properties you can set programmatically, such as the src URL and the height and width of a video, as well as read-only properties such as the video’s native height. Finally, there are DOM events you can listen for, such as load progress, media playing, media paused, and media done playing.Prior to HTML5, video content could only be embedded into a web page using a plug-in such as flash. The HTML5 <video> element was a game changer that allowed the embedding of videos in a web page using native HTML markup. In today's article, we'll design a couple of players using nothing more than some standard HTML controls, CSS, and JavaScript.The easiest way to embed a video in your web page is to include the HTML5 <video> element with the controls attribute. That adds video controls, like play, pause, and volume. It's also good idea to include width and height attributes. Otherwise, the page may flicker while the video loads. Within the <video> tags, multiple <source> elements can link to different video files. The browser will use the first recognized format. Text between the <video> tags may display a fallback message, because it will only display in browsers that do not support the <video> element:The autoplay attribute starts the video automatically once it has loaded.Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. MP4 is the only format supported by all the major browsers.The HTMLMediaElement JavaScript interface exposes the properties and methods required to support basic media-related capabilities that are common to both audio and video. Hence, the HTMLVideoElement and HTMLAudioElement elements both inherit this interface.An obvious question to ask is why do we need an API? One very good reason is that default video controls vary from browser to browser so building your own GUI is a way to make your player look consistent across all browsers. Beyond that you can do some cool things like change the video size at runtime.The above markup includes extra buttons to play and pause the video as well as change its size. Each button's onclick event invokes a JavaScript function that achieves the desired action via the HTMLVideoElement Interface. Note that in a real web page you would probably want to use non-obtrusive JavaScript to attach the event handlers. The onclick attribute is employed here for the sake of simplicity.Here In This Html Tutorial We Will Display Video With Different Functionality Such As Play,Pause,Big,Small and Normal Using Button Control On Video.HTML Video - Methods, Properties, and EventsHTML5 defines DOM methods, properties, and events for the <video> element.This allows you to load, play, and pause videos, as well as setting duration and volume.There are also DOM events that can notify you when a video begins to play, is paused, etc.Here In This Example We Will Use Four Button Control With Different Functionality On Each Button Using Javascript and Html Code.In <video> Tag Width Of The Video Is Set And Source Of Video Is Written With Format Of Video Is Define As Show In Code.Example Using JavaScript In Html Tag.
So Let Begin With Our Coding............
Step 1:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>
Output :
So Let Begin With Our Coding............
Step 1:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>
Output :
Good
ReplyDeleteGood man
ReplyDeleteGood
ReplyDelete