Create own video player

Question

I try to work with HTML5 tag and create my own palyer.

My html:

   <video id="video">
        <source src="video/v.mp4" />
        <source src="video/v.ogg" />
        <source src="video/v.webm" />
    </video>

    <br />

    <button id="part1Button">
        1
    </button>
    <button id="part2Button">
        2
    </button>
    <button id="part3Button">
        3
    </button>

    <button id="playButton">play</button>
    <button id="pauseButton">pause</button>

My JavaScript:

<script type="text/javascript">
        window.onload = function () {
            var video = document.getElementById("video");
            var p = v.duration / 3;


            document.getElementById("part1Button").onclick = function () {
                video.currentTime = 0;
            };

            document.getElementById("part2Button").onclick = function () {
                video.currentTime = p;
            };

            document.getElementById("part3Button").onclick = function () {
                video.currentTime = p * 2;
            };

            document.getElementById("playButton").onclick = function () {
                video.play();
            };

            document.getElementById("pauseButton").onclick = function () {
                video.pause();
            };
        }
    </script>

All three buttons: 1,2,3 do not work in Google Chrome. I will have the next error when I click on them : "Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite".

When I replace video.currentTime = p * 2 on video.currentTime = (video.duration / 3) * 2 everything works fine.

Can somebody explan me why is this happening?

Many thanks.

score 0 · Answer 1 · edited May 23 '17 at 12:14

The problem are these lines:

var video = document.getElementById("video");
var p = v.duration / 3;

I guess you wanted to write:

var p = video.duration / 3;

Hope it helps!

UPDATE 1:

And, as Derek 朕會功夫 has pointed out, if the video is not ready is not possible to calculate the duration. You can get more info here.

UPDATE 2:

I have added a snippet with all the buttons working.

    var v = document.getElementById("video");

    v.onloadedmetadata = function() {

      var part = Math.floor(v.duration / 3);

      document.getElementById("part1Button").onclick = function() {
        v.currentTime = 0;
      };

      document.getElementById("part2Button").onclick = function() {
        v.currentTime = part;
      };

      document.getElementById("part3Button").onclick = function() {
        v.currentTime = part * 2;
      };

      document.getElementById("playButton").onclick = function() {
        v.play();
      };

      document.getElementById("pauseButton").onclick = function() {
        v.pause();
      };
    }

<video id="video" style="border: 2px solid gray;" height="200" width="200">
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/4/4d/Wikipedia_Edit_2014.webm/Wikipedia_Edit_2014.webm.480p.webm" />
</video>
<br>

<button id="part1Button">
  1
</button>
<button id="part2Button">
  2
</button>
<button id="part3Button">
  3
</button>

<button id="playButton">play</button>
<button id="pauseButton">pause</button>

You will also have to check `video.readyState` to see if the video is ready. — Derek 朕會功夫, Sep 09 '15 at 00:30
I have added loadedmetadata and all buttons works. Could somebody explain why other browsers (FF) do not need this event?One more issue. When I click on the "2" and than "0" my player stop working. Thank you. http://codepen.io/OleksandrPetryk/pen/KdpGPO — Alexander, Sep 09 '15 at 01:35
I'm not sure wthat you mean with "and then 0". I left you a working snippet. Regarding your question about FF and other browsers, there is a short explanation in the provided link: "The issue is in WebKit browsers; the video metadata is loaded after the video so is not available when the JS runs". — David, Sep 09 '15 at 02:19

Create own video player

1 Answers1