如何使用jQuery 制作全屏幕背景的嵌入视频-jquery设置背景

现在的web开发者都十分喜欢使用全屏的背景。一般来说，这可以通过使用一张很大尺寸的图来做背景去实现，这就会充满整个浏览器。但是，更佳的做法是使用jQuery 和CSS 3去实现，这将获得更多浏览器的支持。在本文中，将介绍如何使用jQuery和CSS去做一个全屏的视频效果，这在目前众多WEB开发者中也是一个很热门的话题。

在本文中，我们将学习到使用jQuery和各种jQuery的视频相关插件及CSS 3在一个基本页面中实现嵌入全屏背景视频。我们使用的视频插件是BigVideo.js，它其实是基于视频插件Video.js script.改造增强而成的。因为目前的一些浏览器在兼容视频流的H.264标准时有些小问题，幸运的是BigVideo.js能支持用户向其传入参数地址可以解决这个问题。我们首先看下本文的运行效果，如下图所示：　　　

读者可以通过如下地址看到本文的运行效果：http://blog.tmimgcdn.com/wp-content/uploads/2013/06/demo-video-background-tut/index.html，

代码的下载地址在：http://blog.tmimgcdn.com/wp-content/uploads/2013/06/fullscreen-video-bg-source-code.zip?9d7bd4

开始

首先用户可以按上面的地址下载本文的代码，或者从BigVideo的GitHub网站中（https://github.com/dfcb/BigVideo.js）获得一份BigVideo类库。其中我们会用到很多要包含的jQuery类库，最重要的当然是jQuery和jQuery UI、jQuery imagesloaded和Video.js，其中BigVideo都包它们都包括进去了。如下代码所示：

<!doctype html> 
<html lang="en-US"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
  <title>Fullscreen Video Backgrounds - Demo Page</title> 
  <meta name="author" content="Jake Rocheleau"> 
  <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico"> 
  <link rel="icon" href="http://www.templatemonster.com/favicon.ico"> 
  <link rel="stylesheet" type="text/css" media="all" href="styles.css"> 
  <script type="text/javascript" src="js/jquery-1.10.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script> 
  <script type="text/javascript" src="js/jquery.imagesloaded.js"></script> 
  <script type="text/javascript" src="js/video.js"></script> 
  <script type="text/javascript" src="js/bigvideo.js"></script> 
</head>

可以看到，在上面的代码中，逐一引入了相应的jQuery插件，其中把样式文件单独写在了styles.css中了。
　　　至于要播放的视频，代码中的是从Beachfront B-Roll 中下载的一个视频，一个要注意的是为了能在Firefox浏览器中运行，有的视频会需要重新编码或者是只能选取的是OGV或是WebM格式的文件。

如何选择视频？

　　本文中的代码是引用了两个不同的视频。但当使用Miro Video Converter这个软件对MP4转换为OGV或Theora格式的视频文件时，发现效果不是太好。但是，我们也要把OGV文件复制到例子中的Demo文件夹下。因为如果支持H.264解码标准的HTML 5视频浏览器会解码成MP4格式的视频，但另外的浏览器阵营（如Mozilla）会解码为OGV格式文件，因此我们准备了两种格式的文件，这个情况只能期望将来各大浏览器厂商统一标准去解决了。

视频的样式
　　在展示代码前，首先展示下视频的CSS部分样式，这里都存放在styles.css文件中，其中的很多样式和涉及到的ID在本文中的例子中是有具体使用场景的，如果用户想放在自己的应用中，可能需要作一些适当的修改：

/* BigVideo Styles */
#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0;}
#big-video-vid,#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:20px;padding: 0 20px;width:100%;
  -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}

注意其中的有些选择器如#big-video-wrap 不需要调整，因为这些是为了实现全屏幕效果而设的。其中要注意big-video.js这个本身是一个视频播放的控件，有一些如“播放”，“暂停”的按钮，但在这个样式中，我们对其进行了隐藏。有css基础的读者可以留意到，

#big-video-control-play中指定了透明的png图。

使用jQuery播放视频
　　下面，我们看下如何在HTML页面中调用bigvideo.js插件，代码如下：

<script type="text/javascript"> 
 
$(function() { 
 
  var BV = new $.BigVideo({useFlashForFirefox:false}); 
 
  BV.init(); 
 
  BV.show('media/rochester-falls.mp4', {altSource:'media/river.ogv', ambient: true}); 
 
});

这个如果熟悉Javascript的朋友相信应该知道，首先是新建立了BigVideo的实例对象，其中useFlashForFirefox为false,指定在FireFox浏览器中不显示Flash格式的视频，然后对视频进行了初始化。
　　接着看show的方法，其中接收两个参数，***个是视频的url地址，这里我们使用的是mp4 视频，但为了FireFox浏览器，在第二个参数也就是可选参数中，使用altSource指定了ogv格式的视频，并且设定ambient属性为true,表示不播放声音。
　有点可惜的是，开发者除了在BigVideo.js demo page中获得相关的视频插件参数外，其他文档和例子也不多，这个希望将来相关的开源项目开发者能加强这方面的文档和例子的补充。

原文链接：http://blog.templatemonster.com/2013/06/19/embed-fullscreen-background-videos/