网页使用JavaScript实现用户点击播放后再加载视频

由于视频通常体积较大，消耗流量开销较多，所以要实现点击播放后再加载视频资源以减少流量消耗，以下是代码示例

<div class="home-video">
    <video
        class="home-video1"
        id="myVideo"
        poster="../static/Icons/play.svg" <!-- 添加视频封面，显示播放按钮 -->
    ></video>
    <div class="home-play" onclick="playVideo()">
        <img
            alt="image"
            src="../static/Icons/play.svg"
            class="home-image13"
        />
    </div>
</div>

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

    function playVideo() {
        if (video.paused) {
            video.src = "../static/Videos/show.mp4"; // 加载视频资源
            video.load(); // 手动加载视频
            video.play(); // 播放视频
        } else {
            video.pause();  // 再点击一下就暂停
        }
    }
</script>