html5-有关用视频做HTML网页背景的一些疑问

问题描述

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

html5-有关用视频做HTML网页背景的一些疑问的相关文章

使用视频作为网页背景的技术探讨

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 使用视频作为网页背景是件很酷的事情,但也是件困难的事情.CSS里的background-image属性只能使用图片.SVG.颜色或渐变色.但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在其它HTML元素后面.这其中的难点是视频要填充整个浏览器页面,而且要响应浏览器窗口大小的变化. 观看演示1 http://www.webhek.

网站中一些场合的网页背景音乐会让人尴尬

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站的一些功能的运用,要自然合适,比如今天我想说的网页背景音乐.大家在浏览网页的时候,比如一些博客,QQ空间等一些展示个性的页面的一些背景音乐,大家可能会感觉很酷.一些网站制作人员在自己的设计中,也喜欢搞一些背景音乐,不过这里要说的是,大家如果要使用这项功能,要注意一些方面的问题.有些企业网站的页面真的不太适合用背景音乐. 网页背景音乐可能带

html5-HTML5做手机网页,为什么设置百分比没用

问题描述 HTML5做手机网页,为什么设置百分比没用 为什么这么 设置百分比不起作用 解决方案 不知道你想问什么,这样看是100%的啊,你上边还有个div撑着,这个div怎么全屏呢 解决方案二: 什么百分百?说清楚点 解决方案三: 把这句话 放在head里试一试 解决方案四: 把这句话" "最外面不要那个引号

网页设计技巧:设计优秀的网页背景和设计方法

文章描述:背景真的可以为你的网站定调,在你做决定之前,你可以从图片.颜色.图案方面进行多方面的选择,不要局限你的设计风格,其实你可以做得更好的.选择一个背景主题的时候要结合你的内容,记住最重要的规则:确保你的设计是具有可读性的. 一个好的背景风格,可以为你的网站定下基调.我们将探讨关于网页背景设计以及趋势的一些优秀的例子,包括采用大图片,鲜艳的色彩和大胆的图案. 有时候你的网页设计某一部分引入注目,但大多数情况下是背景起到了决定性作用.背景设计往往可以用图片.图案.颜色色块组合而成,但如何才能设

学习网页制作: 用CSS来控制网页背景

css|控制|网页|网页背景 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的.  想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会.不过,我想在网上"成家"的朋友一般分为在网吧里"开业"(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的专业软件制作好上传的,所以呢,我打算分开两步介

CSS网页制作技巧之控制网页背景

css|技巧|控制|网页|网页背景 [简 介] 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的. 想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会.不过,我想在网上"成家"的朋友一般分为在网吧里"开业"(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的专业软件制作好上传的,所以呢,

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

网页设计中如何让CSS控制网页背景?

css|控制|设计|网页|网页背景|网页设计 在符合标准的网页设计中如何用CSS控制网页的背景呢?包括背景的颜色,背景的图片等一些问题,在本教程中一次给你讲清楚. ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow}H1{background-color:#000000} ·背景图片 backgr

用CSS来控制网页背景

css|控制|网页|网页背景 ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成.但是在这里,我所指的并非