网页使用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>
相关推荐
哆啦A梦15882 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
智码看视界3 小时前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
小周同学@4 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok4 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~4 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号4 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌5 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康6 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海6 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏6 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端