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

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

html 复制代码
<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>
相关推荐
Asort14 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney33 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥35 分钟前
前端必学的 CSS Grid 布局体系
前端·css
EMT35 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare36 分钟前
选择文件夹路径
前端
艾小码36 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月37 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁41 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅41 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript