10秒後から再生     20秒後から再生

  [  /  ] Sec
<その1:ノウゼンカズラの花(NHKクリエイティブ・ライブラリーが提供するフリー素材です)>

*HTML5機能を使用した動画再生とコントロールのサンプル(ブラウザによって動作が異なります)
<video id="demo" src="movie/murasakinohana.mp4" autoplay loop controls>
</video>
<div>
<button onclick="document.getElementById('demo').play()">Play</button>
<button onclick="document.getElementById('demo').pause()">Pause</button>
<button onclick="document.getElementById('demo').volume+=0.1">Vol +</button>
<button onclick="document.getElementById('demo').volume-=0.1">Vol −</button>
<button onclick="document.getElementById('demo').currentTime+=5">+5 Sec</button>
<button onclick="document.getElementById('demo').currentTime-=5">-5 Sec</button>
</div>
<br>
<div>
<button onclick="document.getElementById('demo').currentTime=10">・00:10〜</button> 10秒後から再生    
<button onclick="document.getElementById('demo').currentTime=20">・00:20〜</button> 20秒後から再生
<div>
[ <span id="ichi"></span> / <span id="allt"></span> ] Sec
<script type="text/javascript">
function get_time() { // 現在の再生位置(秒)及びトータル時間を表示
  var v = document.getElementById("demo");
  v.addEventListener("timeupdate", function(){
    document.getElementById("ichi").innerHTML = time_ms(v.currentTime);
    document.getElementById("allt").innerHTML = time_ms(v.duration);
  }, false);
}
function time_ms(sec){
 var m,s
 m = Math.floor(sec/60);
 s = Math.floor(sec-m*60); if(s<10){s="0"+s;}
 return m+":"+s;
}
get_time();
</script>


ボタンは、再生します。
ボタンは、一時停止します。
ボタンは、音量をアップします。
ボタンは、音量をダウンします。
ボタンは、再生位置が5秒進みます。
ボタンは、再生位置が5秒戻ります。
ボタンは、10秒の位置から再生します。
ボタンは、20秒の位置から再生します。



※ 詳細はソースを見てください。なお、Firefox 以外では動作確認をしていません!