HTML5 Video
来源：互联网 发布：淘宝童装文案 编辑：程序博客网 时间：2024/05/16 06:21
<!DOCTYPE html><html> <head> <title> Browsing the video with a seek bar </title> <style type="text/css"> #video_container { margin: 0; padding: 0; } #time { margin: 0; padding: 5px; width: 350px; font-family: Helvetica, Arial, sans-serif font-size: .7em; color: #000000; background-color: #ccc; } </style> <script type="text/javascript"> var video; window.onload = function() { video = document.getElementsByTagName("video")[0]; var btn_play = document.getElementById("btn_play"); var btn_pause = document.getElementById("btn_pause"); var btn_mute = document.getElementById("btn_mute"); var seekbar = document.getElementById('seekbar'); btn_play.addEventListener('click', doPlay, false); btn_pause.addEventListener('click', doPause, false); btn_mute.addEventListener('click', doMute, false); video.addEventListener('timeupdate', updateTime, false); video.addEventListener('durationchange', initSeekBar, false); seekbar.addEventListener('change', changeTime, false); btn_volume.value = video.volume; btn_volume.addEventListener('change', function(e) { myVol = e.target.value; video.volume = myVol; if (myVol == 0) { video.muted = true; } else { video.muted = false; } return false; }, true); }; function initSeekBar() { seekbar.min = 0; seekbar.max = video.duration; } function changeTime() { video.currentTime = seekbar.value; } function updateTime() { var sec = video.currentTime; var h = Math.floor(sec / 3600); sec = sec % 3600; var min = Math.floor(sec / 60); sec = Math.floor(sec % 60); if (sec.toString().length < 2) sec = "0" + sec; if (min.toString().length < 2) min = "0" + min; document.getElementById('time').innerHTML = h + ":" + min + ":" + sec; seekbar.min = video.startTime; seekbar.max = video.duration; seekbar.value = video.currentTime; } function doPlay(){ if (video.paused){ video.play(); } else if (video.ended) { video.currentTime = 0; video.play(); }; }; function doPause(){ if (video.play){ video.pause(); }; }; function doMute(){ document.getElementById('volume').value = 0; video.muted = true; }; </script> </head> <body> <div id="video_container"> <video width="320" height="176" src="test1.mp3"/> </div> <div id="video_controller"> <button id="btn_play"> Play </button> <button id="btn_pause"> Pause </button> <button id="btn_mute"> Mute </button> <input type="range" step="any" id="seekbar"> <label id="time">-:--:--</label> </div> </body></html>
