Online: 2625
Online: 2625
Online: 2625
In last but one post, we learnt how to work with html5 video tag, In last post, we learnt how to control the video using other html element.
In this post, we shall learn how to run the html5 video in the background of the whole web page and how to control (if required) using the other html element like button.
HTML Video tag
<body>
<video src="/DemoSupportingFiles/Multimedia/VideoIntro.mp4" height="300" width="400"
id="video1" autoplay loop>
video is not supported.
</video>
<div id="content">
<h1>This is H1 tag</h1>
<p style="font-size:18px;">HTML5 video streaming. Most modern browser of desktop and even on mobile ....</p>
</div>
<div id="control">
<input type="button" id="btnPause" onclick="PausePlay()" style="padding:20px;" value="Pause" />
</div>
</body>
Above code snippet is just a video tag with video source without height and width specified for the video. We have also set the autoplay and loop attribute that will automatically play the video when the page loads and the video will keep playing untill the user stops it using the button we will provide.
Style tag
<style>
video{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
transform: translateX(-50%) translateY(-50%);
background: url('http://techfunda.com/Images/TechFunda.gif') no-repeat;
background-size: cover;
}
#content{
color:white;
}
#control{
position:fixed;
bottom:0%;
left:50%;
}
</style>
In above style tag we have defined 3 css classes.
video - for video tag that simply covers the entire page and its position is fixed so that even if the page content scrolls the video remains in the same position. All the min height and max height is set to 100% that covers the entire web page width and height.#content - the css style in which we have wrapped our content into#control - the div in which we have kept our button to control the videoScript code
<script>
var video = document.getElementById("video1");
var btn = document.getElementById("btnPause");
function PausePlay() {
if (video.paused) {
video.play();
btn.value = "Pause";
} else if (video.ended) {
video.currentTime = 0;
video.play();
btn.value = "Pause";
}
else {
video.pause();
btn.value = "Play";
}
}
</script>
In this script, we have created two variables for <video> and <input type="button"> tag. In the PausePlay() function, we first check, if the video is pause, if yes we call play() functiont that plays the video. If the video has ended then it bring back its seek position/starting position to 0 and play the video again otherwise it pauses the video. The value of the button changes based on the status of the video.
Views: 7771 | Post Order: 107
