LoginSignup
3
3

More than 5 years have passed since last update.

HTML5のvideoの動画を任意の秒数で停止させる方法

Posted at

currentTimeプロパティに秒数を設定することでvideoタグの動画を任意の秒数で停止させることが可能です。
HTML例は次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title></head>
<body>
<div>
  <video width="320" height="240" id="video">
    <source src="YOUR_VIDEO.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>
<div>
  <button onclick="play()">play</button>
  <button onclick="pause()">pause</button>
  <input type="text" id="time" placeholder="秒" value="0">
  <button onclick="seek()">seek0</button>
</div>


<script>
    var myVideo = document.getElementById("video");

    function play() {
        myVideo.play();
    }
    function pause() {
        myVideo.pause();
    }

    function seek() {
        var time = document.getElementById("time").value;
        myVideo.currentTime = time;
    }
</script>

</body>
</html>
3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3