Question

我尝试使用HTML5标记并创建自己的palyer。

我的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>

我的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>

所有三个按钮：1,2,3在Google Chrome中无效。单击它时我会出现下一个错误：“Uncaught TypeError：无法在'HTMLMediaElement'上设置'currentTime'属性：提供的double值是非限定的。”

当我在 video.currentTime =（video.duration / 3）* 2 上替换 video.currentTime = p * 2 时，一切正常。

有人可以解释我为什么会这样吗？

非常感谢。

Answer 1

问题是这些问题：

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

我想你想写：

var p = video.duration / 3;

希望它有所帮助！

更新1：

而且，正如Derek朕会功夫所指出的那样，如果视频没有准备就无法计算持续时间。您可以获得更多信息here。

更新2：

我添加了一个包含所有按钮的代码段。

    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>

创建自己的视频播放器

1 个答案: