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

1 948 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视频预览

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

导出教程下载word版教程

关于JS/JQuery

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

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