2 wsxcqesx123 wsxcqesx123 于 2016.03.28 01:03 提问

有关用视频做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>

这是百度搜来的一个用视频作为网页背景的代码,现在有个疑问,如何在这段背景播放完之后让背景转换成一个固定的图片或者换个思路让视频停留在最后一帧也行,可以实现么

2个回答

showbo
showbo   Ds   Rxr 2016.03.28 10:03
已采纳
 添加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>
wr10980170
wr10980170 厉害呦!
2 年多之前 回复
hanfeizaopao
hanfeizaopao   2016.03.28 09:12

可以的
1 直接当背景是不可行的,但是你可以实现一个视频然后浮动定位
2 html5有针对最后一针的停止
3 你也可以播放完了有个回调 去隐藏播放器然后显示图片
望采纳

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
使用视频作为网页背景的技术探讨
使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面,而且要响应浏览器窗口大小的变化。 观看演示1 视频作为网页背景的限制因素 在动手编码实现前,视频作为网页背景的有些问
网页嵌入视频背景(mp4当作banner)
网页视频背景
html创建视频网页背景
Website Beta:20151009001 body { margin:0; } video { position:fixed; right:0; bottom:0; min-width:100%; min-height:100%; width:auto; height:auto; }       最开始接触html感觉很无聊,各
怎么让页面动起来,做视频背景
附带video相关参数一张
以视频作为网页背景的jQuery插件
一个简单的以视频作为网页背景的jQuery 插件 浏览器支持 现代浏览器全部支持 IE9+ 效果演示地址 作为body背景 演示地址1:http://weber.pub/demo/160905/body-bg.html 作为一块区域背景 演示地址2:http://weber.pub/demo/160905/block-bg.html下载 直接下载 github 地址:https://github.c
网页 视频作为背景(解决google浏览器无法访问本地资源的问题)
具体的教程是我在google上找到的: 教程:http://sighingnow.github.io/web-tech/web_video_background.html这里我只做一个具体的实现和说明一下在具体操作中出现的bug: Not allowed to load local resource
【技巧】使用视频作为网页背景的技术探讨
使用视频作为网页背景是件很酷的事情,但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面,而且要响应浏览器窗口大小的变化。观看演示1:点我视频作为网页背景的限制因素在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚: 1
如何用FLASH做网页背景
1、在网页中插入一个表格,设置其宽度、高度为100%,再插入FLASH的SWF文件;2、设置SWF文件宽度和高度均为100%,点击其paramenters,参数设置为wmode,变量设置为transparent,功能为设置一个有透明效果的SWF;3、在SWF文件上插入一个层,大小不要超过SWF的大小,在层上写上字,大功告成!          最近在改版公司的网站时需要
html5视频作为页面背景
&amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; *{ margin: 0px; padding: 0px; } video{ position: fixed; ...
网页全屏背景 html5 + css3
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; body, html, p {