1
Expand|Select|Wrap|Line Numbers
- <html>
- <body>
- <div style="text-align:center">
- <div id="video_player_box">
- <video id="my_video" width="550" height="300" onclick="playPause(this,'my_video')">
- <source src="http://media.w3.org/2010/05/sintel/trailer.mp4">
- </video>
- <div id="video_controls_bar">
- <button id="playpausebtn" onclick="playPause(this,'my_video')">Play</button>
- </div>
- </div>
- </div>
- <p id="demo"></p>
- <form id="watch">
- <p> TIME: <input type="text" id="txt" readonly></p>
- <p>COST: <input type="text" id="cost" readonly></p>
- As 0.9rs/sec
- </form>
- <script>
- var str = "Hello World!";
- var result;
- var c = 0;
- var co = 0;
- var t;
- var timer_is_on = 0;
- function playPause(btn, vid) {
- var vid = document.getElementById(vid);
- if (vid.paused) {
- vid.play();
- btn.innerHTML = "Pause";
- result = str.fontcolor("green");
- document.getElementById("demo").innerHTML = result;
- if (!timer_is_on) {
- timer_is_on = 1;
- timedCount();
- }
- } else {
- result = str.fontcolor("red");
- document.getElementById("demo").innerHTML = result;
- vid.pause();
- btn.innerHTML = "Play";
- clearTimeout(t);
- timer_is_on = 0;
- myVideo.pause();
- }
- }
- function timedCount() {
- document.getElementById('txt').value = c;
- document.getElementById('cost').value = co;
- c = c + 1;
- co = c * 0.9;
- t = setTimeout("timedCount()", 1000);
- if (vid.ended) {
- clearTimeout(t);
- timer_is_on = 0;
- }
- }
- </script>
- </body>
- </html>
