实际效果查看：
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. python网络编程——IO多路复用之epoll

    1.内核EPOLL模型讲解     此部分参考http://blog.csdn.net/mango_song/article/details/42643971博文并整理 首先我们来定义流的概念,一个流 ...

  2. Python框架之Tornado（一）

    本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...

  3. Java内部类的定义和使用

    为什么要用到内部类: 在java开发学习中我们经常会碰到内部类.内部类又有很多的优势:首先举一个简单的例子,如果你想实现一个接口,但是这个接口中的一个方法和你构想的这个类中的一个方法名称参数相同,你应 ...

  4. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  5. MVVM框架下，WPF实现Datagrid里的全选和选择

    最近的一个项目是用MVVM实现,在实现功能的时候,就会有一些东西,和以前有很大的区别,项目中就用到了常用的序号,就是在Datagrid里的一个字段,用checkbox来实现. 既然是MVVM,就要用到 ...

  6. es6学习笔记一数组（中）

    接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法 concat方法: 概述:    concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. ...

  7. 使H1 H2等标签不换行

    在网页优化中,经常要使用H标签对关键字进行优化, 可是如果是一行文字中的某个词加上了H1标记,就会换行. 可以使用下面的方法,H标签就不会强制换行了. <style type="tex ...

  8. 如何使用Xmanager及VNC登录远程桌面

    如何调用远程桌面,比较常见的有两种方式:Xmanager及VNC 正好今天鼓捣了一下,特整理如下: Xmanager Xmanager的调用也有两种方式: 一.直接在Xshell中调用 这时需设置会话 ...

  9. C++继承和多态

    继承 访问控制 基类的成员函数可以有public.protected.private三种访问属性. 类的继承方式有public.protected.private三种. 公有继承 当类的继承方式为pu ...

  10. supervisor 安装、配置、常用命令

    前言 在 web 应用部署到线上后,需要保证应用一直处于运行状态,在遇到程序异常.报错等情况,导致 web 应用终止时,需要保证程序可以立刻重启,继续提供服务. 所以,就需要一个工具,时刻监控 web ...