options.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Video Commander</title>
  <link rel="stylesheet" type="text/css" href="options.css">
</head>
<body>

  <header>
    <h1>Video Commander</h1>
  </header>

  <div id="main">

    <h3>Shortcuts</h3>

    <div class="settings">
      <label for="toggle-play-and-pause">Toggle play and pause</label>
      <input id="toggle-play-and-pause" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="jump-to-beginning">Jump to beginning</label>
      <input id="jump-to-beginning" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="jump-to-end">Jump to end</label>
      <input id="jump-to-end" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="rewind-time">Rewind time</label>
      <input id="rewind-time" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="advance-time">Advance time</label>
      <input id="advance-time" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="speed-down">Speed down</label>
      <input id="speed-down" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="speed-up">Speed up</label>
      <input id="speed-up" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="reset-speed">Reset speed</label>
      <input id="reset-speed" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="partial-loop">Partial loop</label>
      <input id="partial-loop" type="text" value="" placeholder="Press a key">
    </div>

    <div class="settings">
      <label for="toggle-fullscreen">Toggle fullscreen</label>
      <input id="toggle-fullscreen" type="text" value="">
    </div>

    <div class="settings">
      <label for="get-next-video-element">Get next video element</label>
      <input id="get-next-video-element" type="text" value="">
    </div>

    <div class="settings">
      <label for="partial-loop-precision">Partial loop precision</label>
      <input id="partial-loop-precision" type="text" value="">
    </div>

    <div class="settings">
      <label for="skip-time-amount">Amount of time to skip</label>
      <input id="skip-time-amount" type="text" value="">
    </div>

    <div class="settings">
      <label for="play-or-pause-when-loading">Play or pause when loading</label>
      <select id="play-or-pause-when-loading" name="play-or-pause-when-loading">
        <option value="default">Leave it to a site</option>
        <option value="play">Play automatically</option>
        <option value="pause">Always pause</option>
      </select>
    </div>

    <div class="settings">
      <label for="show-or-hide-progress-bar">Show or hide progress bar</label>
      <select id="show-or-hide-progress-bar" name="show-or-hide-progress-bar">
        <option value="default">Show when a relevant timing</option>
        <option value="show">Always show</option>
        <option value="hide">Always hide</option>
      </select>
    </div>

    <div class="settings">
      <label for="scroll-to-player">Scroll to a player automatically</label>
      <div id="checkbox-wrapper"><input id="scroll-to-player" type="checkbox"></div>
    </div>

    <div class="settings">
      <label for="remember-playback-speed">Remember playback speed</label>
      <div id="checkbox-wrapper"><input id="remember-playback-speed" type="checkbox"></div>
    </div>

    <div id="button-wrap">
      <button id="save">Save</button>
      <button id="reset">Reset</button>
    </div>
    <div id="status"></div>

    <h3>Fixed shortcuts</h3>

    <div class="settings">
      <label for="fixed-toggle-play-and-pause">Toggle play and pause</label>
      <span id="fixed-toggle-play-and-pause">space</span>
    </div>

    <div class="settings">
      <label for="fixed-rewind-time">Rewind time</label>
      <span id="fixed-rewind-time" type="text" value="">left-arrow</span>
    </div>

    <div class="settings">
      <label for="fixed-advance-time">Advance time</label>
      <span id="fixed-advance-time">right-arrow</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-0">Jump to beginning</label>
      <span id="fixed-jump-to-timer-ratio-0">0</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-1">Jump to 10% playback position</label>
      <span id="fixed-jump-to-timer-ratio-1">1</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-2">Jump to 20% playback position</label>
      <span id="fixed-jump-to-timer-ratio-2">2</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-3">Jump to 30% playback position</label>
      <span id="fixed-jump-to-timer-ratio-3">3</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-4">Jump to 40% playback position</label>
      <span id="fixed-jump-to-timer-ratio-4">4</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-5">Jump to 50% playback position</label>
      <span id="fixed-jump-to-timer-ratio-5">5</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-6">Jump to 60% playback position</label>
      <span id="fixed-jump-to-timer-ratio-6">6</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-7">Jump to 70% playback position</label>
      <span id="fixed-jump-to-timer-ratio-7">7</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-8">Jump to 80% playback position</label>
      <span id="fixed-jump-to-timer-ratio-8">8</span>
    </div>

    <div class="settings">
      <label for="fixed-jump-to-timer-ratio-9">Jump to 90% playback position</label>
      <span id="fixed-jump-to-timer-ratio-9">9</span>
    </div>

    <div class="settings">
      <label for="fixed-reset-loop-status">Reset loop status</label>
      <span id="fixed-reset-loop-status">esc</span>
    </div>

    <div class="settings">
      <label for="fixed-reset-loop-status">Reset loop status</label>
      <span id="fixed-reset-loop-status">Ctrl-c</span>
    </div>

    <div class="settings">
      <label for="fixed-active-blur">Unfocus</label>
      <span id="fixed-active-blur">esc</span>
    </div>

    <h3>Note</h3>

    <p>The lower the value of <b>partial loop precision</b> is, the better the precision is when looping partially, and the higher the value is, the worse the precision is. Please remember that <b>when this value is set extremly low, the CPU utilization may go up</b>. The default value (100) is reasonable.</p>

    <p>To <b>always show progess bar</b> makes the CPU utilization go up. You can keep showing progress bar temporarily by typing <b>"." (colon)</b> key. It is recommended to leave this option off, and use <b>"." (colon)</b> key when necessary.</p>

  </div>

  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="options.js"></script>
</body>
</html>