Javascript 创建自己的视频播放器

我尝试使用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在谷歌浏览器中都不起作用。单击它们时会出现下一个错误：Uncaught TypeError:未能在“HtmlMedia元素”上设置“currentTime”属性：提供的双精度值是非有限的

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

有人能解释一下为什么会这样吗

---

非常感谢

问题在于以下几行：

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

我猜你想写：

var p = video.duration / 3;

希望有帮助

更新1：

作为德里克朕會功夫 已经指出，如果视频未准备好，则无法计算持续时间。你可以得到更多信息

更新2：

我添加了一个代码片段，其中所有按钮都正常工作

var v=document.getElementByIdvideo； v、 onloadedmetadata=函数{ var部分=数学运算时间/3； document.getElementByIdpart1Button.onclick=函数{ v、 currentTime=0； }; document.getElementByIdpart2Button.onclick=函数{ v、 当前时间=部分； }; document.getElementByIdpart3Button.onclick=函数{ v、 当前时间=第2部分； }; document.getElementByIdplayButton.onclick=函数{ v、 游戏； }; document.getElementByIdpauseButton.onclick=函数{ v、 停顿； }; } 1. 2. 3. 玩

---

暂停您还必须检查video.readyState以查看视频是否准备就绪。我添加了loadedmetadata，所有按钮都可以工作。有人能解释一下为什么其他浏览器不需要这个事件吗？还有一个问题。当我点击2和0时，我的播放器停止工作。非常感谢。我不知道你说的是什么意思，然后是0。我给你留了一个工作片段。关于您关于FF和其他浏览器的问题，在提供的链接中有一个简短的解释：问题在WebKit浏览器中；视频元数据在视频之后加载，因此在JS运行时不可用。