windows.onload用法，audio综合应用-网页编程网

当前位置：主页 >> JavaScript >> 正文

windows.onload用法，audio综合应用

阅读：3627 输入：2014-05-09 12:34:56

<!DOCTYPE html>
<html>
  <head>
    <title>
      Creating custom video controls
    </title>
    <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 btn_volume = document.getElementById('volume');
            btn_play.addEventListener('click', doPlay, false);
            btn_pause.addEventListener('click', doPause, false);
            btn_mute.addEventListener('click', doMute, 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 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.webm" />
    </div>
    <div id="video_controller">
      <button id="btn_play"> Play </button>
      <button id="btn_pause"> Pause </button>
      <input type="range" min="0" max="1" step="0.1" id="volume">
      <button id="btn_mute"> Mute </button>
    </div>
  </body>
</html>

相关阅读: 多个window.onload，只运行最后一个的解决方案; js关闭网页窗口总结，esc关闭窗口，关闭前确认