html5video播放状态

作者：メ可遇不可求发布日期:2025-08-09 浏览:37

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Video 播放状态</title>
</head>
<body>
    <h1>HTML5 Video 撕吧状态示例</h1>
    <video id="myVideo" width="600" controls>
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

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

        // 当视频播放时触发
        video.onplay = function() {
            console.log("视频开始播放");
        };

        // 当视频暂停时触发
        video.onpause = function() {
            console.log("视频暂停");
        };

        // 当视频结束时触发
        video.onended = function() {
            console.log("视频播放结束");
        };

        // 当视频加载完成时触发
        video.onloadstart = function() {
            console.log("视频开始加载");
        };

        // 当视频加载完毕时触发
        video.onloadeddata = function() {
            console.log("视频加载完毕");
        };
    </script>
</body>
</html>

解释说明：

HTML5 <video> 标签：用于嵌入视频内容。controls 属性为视频添加了播放、暂停等控制按钮。
JavaScript 事件监听器：
- onplay：当视频开始播放时触发。
- onpause：当视频暂停时触发。
- onended：当视频播放结束时触发。
- onloadstart：当视频开始加载时触发。
- onloadeddata：当视频加载完毕时触发。

这些事件可以帮助你监测视频的播放状态，并在特定时刻执行相应的操作或记录日志。

下一篇：html2canvas