网页使用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>
相关推荐
Onion12 小时前
Vue2日历组件-仿企微日程日历
前端·javascript·vue.js
用户842981424181012 小时前
js中如何隐藏eval关键字?
前端·javascript·后端
chxii12 小时前
前端与Node.js
前端·node.js
zmirror12 小时前
React-Router v6 useNavigate 非组件不生效
前端
月弦笙音12 小时前
【React】19深度解析:掌握新一代React特性
javascript·react native·react.js
红树林0712 小时前
BeautifulSoup 的页面中需要获取某个元素的 xpath 路径
前端·python·网络爬虫·beautifulsoup
三小河13 小时前
教你发布一个npm的组织包
前端
用户61204149221313 小时前
使用JSP+Servlet+JavaBean做的课程后台管理系统
java·javascript·mysql
青椒a13 小时前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo13 小时前
react 中的useContext和Provider实践
前端·react.js