网页使用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>
相关推荐
WeilinerL1 天前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊1 天前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
老贾专利烩1 天前
音频共享耳机专利拆解:碰击惯性数据监测与阈值减速识别机制研究
音视频·信息与通信·科技前沿·创新专利
-睡到自然醒~1 天前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了1 天前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫1 天前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman1 天前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 天前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥1 天前
Vue2 封装二维码弹窗组件
javascript·vue.js
凉柚ˇ1 天前
Vue图片压缩方案
前端·javascript·vue.js