js 视频播放

作者：你不爱我就滚。发布日期:2026-07-26 浏览:88

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 视频播放</title>
</head>
<body>
    <video id="myVideo" width="640" height="360" controls>
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <button onclick="playVideo()">Play</button>
    <button onclick="pauseVideo()">Pause</button>
    <button onclick="stopVideo()">Stop</button>

    <script>
        // 获取视频元素
        var video = document.getElementById("myVideo");

        // 播放视频
        function playVideo() {
            video.play();
        }

        // 暂停视频
        function pauseVideo() {
            video.pause();
        }

        // 停止视频（暂停并回到开头）
        function stopVideo() {
            video.pause();
            video.currentTime = 0;
        }
    </script>
</body>
</html>

解释说明：

HTML 部分:
- 使用 <video> 标签创建一个视频播放器，并设置宽度和高度。
- <source> 标签用于指定视频文件的路径和类型。如果浏览器不支持该视频格式，会显示提示信息。
按钮:
- 提供了三个按钮：Play、Pause 和 Stop，分别用于控制视频的播放、暂停和停止。
JavaScript 部分:
- 使用 document.getElementById 获取视频元素。
- 定义了三个函数 playVideo、pauseVideo 和 stopVideo，分别用于播放、暂停和停止视频。
- play() 方法用于播放视频，pause() 方法用于暂停视频，currentTime = 0 将视频时间重置为初始位置。

上一篇：videojs 播放m3u8

下一篇：js 保存图片