HTML | DOM 视频 readyState 属性(1)

📌 相关文章

📜 HTML | DOM 视频 readyState 属性(1)

📅 最后修改于: 2023-12-03 15:01:13.206000 🧑 作者: Mango

HTML | DOM 视频 readyState 属性

readyState 属性是 HTML5 视频元素的 DOM 属性之一，用于指示视频的当前就绪状态。通过使用 readyState 属性，可以轻松地判断视频是否可以播放或者是否正在加载。

属性值

readyState 具有以下三个可能的值：

0：HAVE_NOTHING。视频元素尚未设置任何属性。
1：HAVE_METADATA。视频元素已经加载了一些媒体数据，如视频信息的头文件。
2：HAVE_CURRENT_DATA。视频元素已经加载了足够的媒体数据以开始播放，但不足以保持平稳的播放。
3：HAVE_FUTURE_DATA。视频元素已经加载了足够的媒体数据以保持平稳的播放，但未加载全部数据。
4：HAVE_ENOUGH_DATA。视频元素已经加载了全部媒体数据。

如何使用 readyState 属性

以下是一个简单的代码片段，演示如何使用 readyState 属性。

<!DOCTYPE html>
<html>
<head>
    <title>Video Ready State Example</title>
</head>
<body>
    <video id="myVideo" src="example.mp4"></video>

    <script type="text/javascript">
        var video = document.getElementById("myVideo");
        console.log("ReadyState: " + video.readyState);
    </script>
</body>
</html>

此示例创建一个视频元素，并在控制台窗口中记录了其 readyState 属性值。要使用 readyState 属性，请简单地将其分配给一个变量（在示例中为 video），并使用 JavaScript 访问它。

结论

readyState 是非常有用的 DOM 属性，可用于确定 HTML5 视频元素的加载和播放状态。在我们的代码中使用该属性，可以轻松地判断视频何时准备播放和何时已经加载全部数据。