video标签怎样在视频暂停时出现封面图片

1 873 2022-03-16 13:03:38

本文目录

1. video标签在视频暂停时显示封面

video标签常用于网页视频播放，简单方便。但如果需要自定义需求时，则需要了解一定的js知识。例如播放、暂停后的交互效果。

那么，video标签怎样在视频暂停时出现封面图片？

video标签在视频暂停时显示封面

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title>video标签暂停后显示封面图</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
img{
    position: absolute;
    top:40px;
    left:750px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
    var myVideo=document.getElementById("video");
    function eventTester(e){
        myVideo.addEventListener(e,function(){
            if(e=='pause'){
                $('img').show();
            }else{
                $('img').hide();
            }

        });
    }
    eventTester("pause");
    eventTester("play");
}
</script>
</head>
<body>
 
<div class="video">
    <video id="video" width="420" autoplay="autoplay" controls="controls">
        <source src="http://d.liyi.in/incobook.mp4" type="video/mp4" />
    </video>
</div>
<img src="video.jpg" width='420'>
</body>
</html>

这样，我们就实现了video标签暂停时显示封面的需求。

本文地址：https://xzo.com.cn/develop/js/1073.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

video标签

视频播放

jQuery视频预览

移动端加载序列化图片实现伪视频播放 jQuery点击弹出视频播放效果微信小程序视频标签video不能全屏显示/有黑边怎么办？ video标签怎样在视频暂停时出现封面图片 dplayer.js视频播放器下载 jQuery鼠标上移自动播放预览视频插件帝国cms点击切换视频播放源功能操作流程 CKplayer.js X2视频播放器插件下载 jQuery控制视频在滑动到当前区域自动播放帝国CMS文章怎样插入短视频？ js网站视频播放器ckplayer和dplayer优缺点分析微信小程序video标签在开发调试中无法正常播放的几个原因分析

导出教程下载word版教程

关于JS/JQuery

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。