如何在点击按钮时停止自动播放视频，然后使用js在点击按钮时重新开始播放

要在点击按钮时停止自动播放视频并使用JavaScript在点击按钮时重新开始播放，你可以使用HTML5的<video>元素和JavaScript来实现这一功能。以下是详细的步骤和示例代码：

HTML部分

首先，创建一个视频元素和一个按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Control</title>
</head>
<body>
    <video id="myVideo" width="320" height="240" autoplay>
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button id="playPauseBtn">Stop/Play</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分

接下来，在script.js文件中编写JavaScript代码来控制视频的播放和暂停：

document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('myVideo');
    var playPauseBtn = document.getElementById('playPauseBtn');

    playPauseBtn.addEventListener('click', function() {
        if (video.paused || video.ended) {
            video.play();
        } else {
            video.pause();
        }
    });
});

解释

HTML部分：
- <video>元素用于嵌入视频，autoplay属性使视频在加载后自动播放。
- <button>元素用于创建一个按钮，用户可以点击该按钮来停止或重新开始播放视频。

JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取视频元素和按钮元素的引用。
- 为按钮添加点击事件监听器，当按钮被点击时，检查视频是否处于暂停或结束状态。如果是，则调用play()方法重新开始播放；否则，调用pause()方法停止播放。