问题描述
- 有关用视频做HTML网页背景的一些疑问
-
<!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>
解决方案二:
可以的
1 直接当背景是不可行的,但是你可以实现一个视频然后浮动定位
2 html5有针对最后一针的停止
3 你也可以播放完了有个回调 去隐藏播放器然后显示图片
望采纳
时间: 2024-10-04 06:09:39