使用HTML5和JavaScript创建互动视频播放器-优快云博客

本文链接：https://blog.youkuaiyun.com/fwwdn/article/details/8438643
<!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>
HTML5 Video
