实际效果查看：
http://keleyi.com/keleyi/phtml/jqtexiao/28.htm

请使用支持HTML5的浏览器查看本效果。

完整代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>如何使用jQuery制作全屏幕背景的嵌入mp4-柯乐义</title>

<meta name="description" content="柯乐义使用jQuery 制作全屏幕背景的嵌入视频" />

<meta name="author" content="Keleyi" />

<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/28/css/style.css">

<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/28/BigVideo/css/bigvideo.css">

</head>

<body>

<div class="main">

<div id="overview" class="box">

<h1>一只小蜜蜂，飞在花丛中</h1>

<h2>左飞飞，右飞飞，剪刀、石头、布</h2>

<h2>请使用<a href="http://keleyi.com/a/bjac/g039tue3.htm">支持HTML5的浏览器</a>查看本页。<a href="http://keleyi.com/a/bjad/s11hwa0d.htm">原文</a></h2>

</div>

</div>

<!-- BigVideo Dependencies -->

<script src="http://keleyi.com/keleyi/pmedia/jquery/jquery-2.1.1.min.js"></script>

<script src="http://keleyi.com/keleyi/phtml/jqtexiao/28/jquery-ui.min.js"></script>

<script src="http://keleyi.com/keleyi/phtml/jqtexiao/28/video.js/video.js"></script>

<!-- BigVideo -->

<script src="http://keleyi.com/keleyi/phtml/jqtexiao/28/BigVideo/lib/bigvideo.js"></script>

<!-- Demo -->

<script>

$(function () {

var BV = new $.BigVideo();

BV.init();

BV.show('http://down.keleyi.com/files/Keleyi.mp4', { doLoop: true });

});

</script>

</body>

</html>

参考：HTML5播放视频简单代码

web前端汇总 : http://www.cnblogs.com/jihua/p/webfront.html

如何使用jQuery 制作全屏幕背景的嵌入视频的更多相关文章

  1. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  3. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  4. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  5. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  6. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  7. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  8. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  9. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. Java Web应用的开发环境配置

    1:第一是下载好Eclipse开发工具,这里不做叙述,自行下载安装. 2:使用Eclipse开发WEB项目,启动Eclipse,选择File--->new --->other---> ...

  2. react Props 验证 propTypes，

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  3. Javaweb中解决跨越问题的拦截器代码

    public class AccessControlFilter implements Filter { @Override public void init(FilterConfig filterC ...

  4. n个结点，不同形态的二叉树（数目+生成）

    题目链接: 不同的二叉查找树:http://www.lintcode.com/zh-cn/problem/unique-binary-search-trees/ 不同的二叉查找树 II:http:// ...

  5. 掌握 cinder-scheduler 调度逻辑 - 每天5分钟玩转 OpenStack（48）

    上一节我们详细讨论了 cinder-api 和 cinder-volume,今天讨论另一个重要的 Cinder 组件 cinder-scheduler. 创建 Volume 时,cinder-sche ...

  6. Javascript优化细节：短路表达式

    什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程 ...

  7. iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调

    UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout,然后好好的介绍一下UICollecti ...

  8. 如何高效地向Redis插入大量的数据

    最近有个哥们在群里问,有一个日志,里面存的是IP地址(一行一个),如何将这些IP快速导入到Redis中. 我刚开始的建议是Shell+redis客户端. 今天,查看Redis官档,发现文档的首页部分( ...

  9. Google Chrome 应用商店上传扩展程序

    1. 进入 Google 开发者中心 网址: https://chrome.google.com/webstore/developer/dashboard?hl=zh-cn 2. 添加新项 上传后,出 ...

  10. 小菜学习Winform（六）剪切板和拖放复制

    前言 在做winform项目的时候有时候会用到复制粘贴,在.net中提供了Clipboard类来操作剪切板,我们来看下. clipbrd.exe clipbrd是系统剪切板程序,但是在vista及以上 ...