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

实际效果查看:
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

时间: 2024-10-14 08:48:41

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

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

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 1 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> 2 <div id="myModal" class="reveal-modal&quo

css3+jquery制作3d旋转相册&lt;转&gt;

css3+jquery制作3d旋转相册 首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备 新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 1 <div id="wr

自定义表单——jQuery制作个性化Checkbox

要让表单中的元素具有个性化风格,仅仅通过样式来实现是相当困难的,大家都很清楚,每种内核的浏览器.每种系统平台下对form元素解析的风格都是不一致的.如果你想让form元素在各种平台或者说各种浏览器具有统一的样式风格,仅仅通过CSS来制作是很难达到统一的标准,但实现他也并不是一件很难的事情,你只要借助jQuery就能轻松的实现.那么今天开始一起来学习使用jQuery制作表单元素的系列,让你不在为此感到头痛. 今天我们就先来看第一个实例,这个实例是由Martin Angelov给我们带来的<Bett

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

jquery制作滑动面板

[web开发]☆★之jquery制作滑动面板 项目开发中,我们有时候需要点击某个按钮出现一个面板,在面板上有我们需要的一些操作,或者是图片.ok!如下简单制作滑动面板效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

Qt 制作透明背景图片与裁剪图片(很实用)

这两天想做一个五子棋游戏,想从零开始自己绘制各种图片素材,将经验心得整理如下. 制作透明背景图片: void MyPainter::DrawKit() { QImage image(30, 30, QImage::Format_ARGB32); memset(image.bits(), 0x00, image.byteCount()); // 绘制图片 QPainter painter(&image); painter.setPen(QPen(Qt::red, 2, Qt::SolidLine)

Photoshop:制作方块背景

1.填充背景色 2.滤镜->杂色->添加杂色 3.滤镜->像素化->马赛克 4.添加横线,明度-10 最终效果 附: 利用:查找边缘.最小值,还可以做这样的效果 Photoshop:制作方块背景,布布扣,bubuko.com

jquery动态改变背景颜色插件

GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> <style> div { background-color: #bada55; width: 100px; border: 1px solid green; } </style> <script src="http://code.jquery.com/jquery-1