<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动画背景</title>
<style>
body{
margin:0;
}
video{
position:fixed;
right:0;
bottom:0;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-9999;
}
</style>
</head>
<body>
<video autoplay muted style="width:100%;">
<source src="动画背景5.mp4">
</video>
</body>
</html>
这是百度搜来的一个用视频作为网页背景的代码,现在有个疑问,如何在这段背景播放完之后让背景转换成一个固定的图片或者换个思路让视频停留在最后一帧也行,可以实现么
添加ended事件,然后给body设置背景图片什么的
<video autoplay muted style="width:500px;" id="video1">
<source src="xxx.mp4">
</video>
<script>
var v = document.getElementById('video1');
v.addEventListener('ended', function () {
alert('视频播放完毕!')
//....设置背景图片,移除video标签等代码
}, false);
</script>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。