<!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>