<!DOCTYPE html>
<html>
<head>
<title>Simple Video Example</title>
<!-- Uncomment the following tag when developing on a local or intranet computer -->
<!-- <meta http-equiv='X-UA-Compatible' content="IE=edge" /> -->
</head>
<body>
<h1>Video controls example</h1>
<video id="video1" controls >HTML5 video is not supported</video><br />
<input type="text" id="videoFile" size="60" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button id="play">Play</button>
<button id="controls">Hide controls</button>
<script>
var video = document.getElementById('video1');
var playbutton = document.getElementById("play");
document.getElementById("controls").addEventListener("click", function (e) {
// Set controls to true or false based on their current state
if (video.controls == true) {
// Controls are binary, true if there, false if not
video.removeAttribute("controls");
e.target.innerHTML = "Show controls";
} else {
// Controls are binary, true if there, false if not
video.setAttribute("controls", true);
e.target.innerHTML = "Hide controls";
}
}, false);
playbutton.addEventListener("click", function (e) {
// Toggle between play and pause based on the paused property
if (video.paused) {
var input = document.getElementById('videoFile'); //text box
if (input.value) {
// Only load a video file when the text field changes
if (input.value != video.src) {
video.src = input.value;
}
video.play();
}
} else {
video.pause();
}
}, false);
video.addEventListener("play", function () {
playbutton.innerHTML = "Pause";
}, false);
video.addEventListener("pause", function () {
playbutton.innerHTML = "Play";
}, false);
</script>
</body>
</html>
