<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>js实现网页视频播放结束后自动隐藏(挽风博客www.a754.com)</title>
<style>
*{
/*外边距设为0*/
margin:0;
/*内边距设为0*/
padding:0;
}
#sp{
/*设置视频宽度*/
width:100vw;
/*设置视频高度，值为auto表示高度自动调整*/
height:auto;
}
p{
/*设置颜色*/
color:#ff0a00;
/*文本居中对齐*/
text-align:center;
/*设置字体大小*/
font-size:32px;
}
</style>
</head>
<body>
<!--视频标签video，controls显示视频控件，src视频路径，poster视频封面-->
<video id="sp" controls="controls" src="1.mp4" poster="fm.jpg"></video>
<p>记得收藏挽风博客哦！</p>
<script>
// 获取 id 为 “sp” 的视频元素
var video = document.getElementById("sp");
// 添加事件监听器，当视频播放结束时执行回调函数
video.addEventListener("ended", function() {
// 将视频的样式设置为不可见
video.style.display = "none";
});
</script>
</body>
</html>