【问题标题】：Using an h264/mp4 video as background for a website使用 h264/mp4 视频作为网站背景
【发布时间】：2013-01-02 14:00:48
【问题描述】：
我的一个客户想要一个 mp4 视频作为整个网站的视频背景。
确保它在我们的 CMS 中正常工作已经成为一个皮塔饼，因为他们不希望视频在转到其他页面时重新加载。
他们发给我的文件是 1080p 和大约。 100MB 大，时长 2 分钟。
有什么方法可以调整视频的大小/重新缩放并将其用作 html5 网站中的视频背景？
我应该告诉客户它不会对用户友好，会占用带宽并且肯定会增加开发成本。
作为一般规则，我们不会在我们的代理机构建立 Flash 网站，因此这不是一种选择。
【问题讨论】：
标签：
html
video
content-management-system
html5-video
【解决方案1】：
您可以使用 html5 <video> 标签来播放该视频并通过 AJAX 完成其余的导航。
但您需要为不支持 h264 的浏览器（如 Opera）提供不同的视频格式。我推荐 webm 作为替代方案。
你需要缩小视频的大小，我想无论是质量还是分辨率。
对于 pre-html5 时代的浏览器，我建议使用静态图片；）
一应俱全：
跨浏览器兼容的解决方案将是 PITA。
现代浏览器具有允许这种解决方案的技术。
我想这是可能的，但您必须为大约 5% 的浏览器不兼容或 CPU 太慢的用户提供备用方案！
【解决方案2】：
为了实现浏览器兼容性，您还必须将视频转换为 Ogg Theora（这将减小它的大小，但它只能在 WebKit/Mozilla 下播放）。 HTML5 视频支持缓冲，但在不同的浏览器下以不同的方式。例如，WebKit 尝试预缓冲整个视频，IE 一次预缓冲一个固定大小的块，等等。所以这在不同的浏览器中会有不同的表现。
【解决方案3】：
网站的全屏视频：查看www.gossdekort.com的源代码你甚至可以在视频上方添加一个菜单