jquery html body下追加内容
最近有个项目要用到IE6下提示内容，但是HTML之前已经写好了，所以只能用JQUERY追加内容的方法去做，代码如下：
if($.browser.msie && parseInt($.browser.version)==6) {
$(document.body).append(‘<div><div>请您更新浏览器IE浏览器！</div></div>’);
}
Popularity: 8%
jQuery Lightbox By Group 图片分组
jQuery 的lightbox插件图片分组，baidu不到，这里给出实例
html:
<div>
<div>Details here</div>
<div id=”tour-lightbox-images-1″>
<a href=”/images/pic1.jpg”><img src=”/images/pic1.jpg” /></a>
<a href=”/images/pic2.jpg”><img src=”/images/pic2.jpg” /></a>
<a href=”/images/pic3.jpg”><img src=”/images/pic3.jpg” /></a>
</div>
</div><div>
<div>Details 2 here</div>
<div id=”tour-lightbox-images-2″>
<a href=”/images/pic4.jpg”><img src=”/images/pic4.jpg” /></a>
</div>
</div><div>
<div>Details 3 here</div>
<div id=”tour-lightbox-images-3″>
<a href=”/images/pic5.jpg”><img src=”/images/pic5.jpg” /></a>
<a href=”/images/pic6.jpg”><img src=”/images/pic6.jpg” /></a>
<a href=”/images/pic7.jpg”><img src=”/images/pic7.jpg” /></a>
<a href=”/images/pic8.jpg”><img src=”/images/pic8.jpg” /></a>
<a href=”/images/pic.9jpg”><img src=”/images/pic8.jpg” /></a>
</div>
</div>
JAVASCRIPT:
$(function() {
$(“div.tour-lightbox-images”).each(function(){
$(“#” + this.id + ” a”).lightBox({
imageLoading: “/images/lightbox-ico-loading.gif”,
imageBtnClose: “/images/lightbox-btn-close.gif”,
imageBtnPrev: “‘/images/lightbox-btn-prev.gif”,
imageBtnNext: “/images/lightbox-btn-next.gif”,
imageBlank: “/images/lightbox-blank.gif”
});
});
});
Popularity: 12%
jQuery DIV遮罩层
非常简单的jQuery DIV遮罩层，点击查看DEMO
代码如下所示：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>jQuery 的DIV遮罩层示例</title>
<script type=’text/javascript’ src=’http://code.jquery.com/jquery-latest.js’></script>
<style>
.targetDiv{display:none;}
.txt{ border:solid 20px #000000; width:400px; height:400px; margin:100px auto auto 400px; color:#fff;}
.cbtn{margin-top:-20px; text-align:right; margin-right:-20px;}
.txt a{text-decoration:none; color:#fff;}
</style>
<script>
$(document).ready(function(){
$(‘.main a’).click(function(){
$(this).parent().find(‘.targetDiv’).css({ “position”: “absolute”, “text-align”: “center”, “top”: “0px”, “left”: “0px”,”background”: “#555″, “display”: “block”,’width’:’100%’,'height’:$(document).height(), “filter”: “Alpha(opacity=80)”,’opacity’:’0.8′});
});
$(‘.targetDiv,.cbtn a’).click(function(){
$(this).parent().find(‘.targetDiv’).css(‘display’,'none’);
});
});
</script>
</head><body>
<div>
<a href=”#”>点我显示jQuery的DIV遮罩层 http://jerryji.cn</a>
<div>
<div>
<div><a href=”#”>关闭 Close</a></div>
<p>这里是正文内容 <a href=”http://jerryji.cn”>http://jerryji.cn</a></p></div>
</div>
</div>
<p>By Jerry Jee</p>
<p><a href=”http://jerryji.cn”>http://jerryji.cn</a></p>
</body>
</html>
Popularity: 12%
jquery跳出each循环
最近有个任务用到了JQUERY的EACH，针对某个对象的事件操作以后恢复原样
大家可以用跳出试试,用return false跳出
$(‘ul.notices li .btn’).click(function(){
$(this).parent().parent().find(‘.noticepicb’).css(‘display’,'none’);
alert($(this).parent().parent().find(‘.noticepicb’).html());
return false;
});
Popularity: 13%
jQuery通过过滤器获取元素
通过过滤器(“滤镜”)，主要用来获取集合性的元素，尤其适用于需要操作的列表或表标签的情况下，通过（”元素名：过滤器名”)来使用这种方法
1.获取第一个li元素
2.获取最后一个li元素
var li_query=$(“li:last”);
3.获取第指定li外元素
var li=$(“li:not(:first)”).css(“fontSize”,”25″);
4.获取偶数序号的元素
var li=$(“li:even”).css(“color”,”blue”);
5.获取奇数序号的元素
var li=$(“li:odd”).css(“color”,”blue”);
6.获取指定序号的元素
var li=$(“li:eq(2)”).css(“fontSize”,”25″);
7.获取指定序号后的元素
var li=$(“li:gt(2)”).css(“fontSize”,”20″);
8.获取指定序号前的元素
var li=$(“li:lt(2)”).css(“fontSize”,”12″);
9.获取页面所有<h>标题元素
var li=$(“li:header”).css(“fontSize”,”30″);
10.获取包含指定字符串的元素
var li=$(“li:contains(‘dd’)”).css(“color”,”blue”);
11.获取空元素
var li=$(“li:empty”).text(“空元素”).css(“color”,”red”);
12.获取非空元素
var li=$(“li:parent”).css(“color”,”red”);
13.获取有子孙元素的元素
var li=$(“li:has(span)”).css(“fontSize”,”50″);
14.获取所有正在执行动画效果的元素
var li=$(“li:animated”);
Popularity: 13%
jquery 遍历 li 筛选属性
最近在一个thinkphp的项目中需要使用jquery去遍历li的属性然后筛选内容显示，代码如下：
<ul>
<li data-initial=”all”><a href=”#”>全部</a></li>
<volist name=’chars’ id=’chars’>
<li><a href=”#”>{$chars}</a></li>
</volist>
</ul><ul>
<volist name=”cityMer” id=”vo”>
<li data-initial=”{$vo.firstChar}” <eq name=”Think.session.area_from” value=”$vo.city”></eq>><a href=”__ROOT__/citylife.html?area={$vo.city|urlencode}” onclick=”" title=”{$vo.firstChar}” >{$vo.city|msubstr=0,-1}</a></li>
</volist>
</ul><script>
$(document).ready(function(){
$(‘ul.city-initials li’).each(function(i){
$(this).click(function(){
if($(this).attr(‘data-initial’) == “all”){
$(‘ul.pop-city-cont li’).show();
}else{
$(‘ul.pop-city-cont li’).hide();
$(“ul.pop-city-cont li[data-initial='"+$(this).text()+"']“).show();
}
});
});
});<script>
Popularity: 15%
jQuery获取Select选中的Text和Value（jquery学习备忘录）
语法解释：
1. $(“#select_id”).change(function(){//code…}); //为Select添加事件，当选择其中一项时触发
2. var checkText=$(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text
3. var checkValue=$(“#select_id”).val(); //获取Select选择的Value
4. var checkIndex=$(“#select_id “).get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$(“#select_id option:last”).attr(“index”); //获取Select最大的索引值
jQuery设置Select选择的Text和Value:
语法解释：
1. $(“#select_id “).get(0).selectedIndex=1; // 设置Select索引值为1的项选中
2. $(“#select_id “).val(4); //设置Select的Value值为4的项选中
3. $(“#select_id option[text='jQuery']“).attr(“selected”, true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项：
语法解释：
1. $(“#select_id”).append(“<option value=’Value’>Text</option>”); //为Select追加一个Option(下拉项)
2. $(“#select_id”).prepend(“<option value=’0′>请选择</option>”); //为Select插入一个Option(第一个位置)
3. $(“#select_id option:last”).remove(); //删除Select中索引值最大Option(最后一个)
4. $(“#select_id option[index='0']“).remove(); //删除Select中索引值为0的Option(第一个)
5. $(“#select_id option[value='3']“).remove(); //删除Select中Value=’3′的Option
5. $(“#select_id option[text='4']“).remove(); //删除Select中Text=’4′的Option
语法解释：
1. $(“#select_id”).append(“<option value=’Value’>Text</option>”); //为Select追加一个Option(下拉项)
2. $(“#select_id”).prepend(“<option value=’0′>请选择</option>”); //为Select插入一个Option(第一个位置)
3. $(“#select_id option:last”).remove(); //删除Select中索引值最大Option(最后一个)
4. $(“#select_id option[index='0']“).remove(); //删除Select中索引值为0的Option(第一个)
5. $(“#select_id option[value='3']“).remove(); //删除Select中Value=’3′的Option
5. $(“#select_id option[text='4']“).remove(); //删除Select中Text=’4′的Option
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关
获取一组radio被选中项的值
var item = $(‘input[@name=items][@checked]‘).val();
获取select被选中项的文本
var item = $(“select[@name=items] option[@selected]“).text();
select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[@name=items]‘).get(1).checked = true;
获取值：
文本框，文本区域：$(“#txt”).attr(“value”)；
多选框checkbox：$(“#checkbox_id”).attr(“value”)；
单选组radio： $(“input[@type=radio][@checked]“).val();
下拉框select： $(‘#sel’).val();
控制表单元素：
文本框，文本区域：$(“#txt”).attr(“value”,”);//清空内容
$(“#txt”).attr(“value”,’11′);//填充内容
多选框checkbox： $(“#chk1″).attr(“checked”,”);//不打勾
$(“#chk2″).attr(“checked”,true);//打勾
if($(“#chk1″).attr(‘checked’)==undefined) //判断是否已经打勾
单选组radio： $(“input[@type=radio]“).attr(“checked”,’2′);//设置value=2的项目为当前选中项
下拉框select： $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项
$(“<option value=’1′>1111</option><option value=’2′>2222</option>”).appendTo(“#sel”)//添加下拉框的option
$(“#sel”).empty()；//清空下拉框
—————————————————————————————————-
//遍历option和添加、移除option
function changeShipMethod(shipping){
var len = $(“select[@name=ISHIPTYPE] option”).length
if(shipping.value != “CA”){
$(“select[@name=ISHIPTYPE] option”).each(function(){
if($(this).val() == 111){
$(this).remove();
}
});
}else{
$(“<option value=’111′>UPS Ground</option>”).appendTo($(“select[@name=ISHIPTYPE]“));
}
}
//取得下拉選單的選取值
$(#testSelect option:selected’).text();
或$(“#testSelect”).find(‘option:selected’).text();
或$(“#testSelect”).val();
//////////////////////////////////////////////////////////////////
记性不好的可以收藏下：
1,下拉框:
var cc1 = $(“.formc select[@name='country'] option[@selected]“).text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $(‘.formc select[@name="country"]‘).val(); //得到下拉菜单的选中项的值
var cc3 = $(‘.formc select[@name="country"]‘).attr(“id”); //得到下拉菜单的选中项的ID属性值
$(“#select”).empty();//清空下拉框//$(“#select”).html(”);
$(“<option value=’1′>1111</option>”).appendTo(“#select”)//添加下拉框的option
稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性，
并且该属性值为’country’ 的select元素 里面的具有selected 属性的option 元素；
可以看出有@开头的就表示后面跟的是属性。
2,单选框:
$(“input[@type=radio][@checked]“).val(); //得到单选框的选中项的值(注意中间没有空 格)
$(“input[@type=radio][@value=2]“).attr(“checked”,’checked’); //设置单选框value=2的为选中状态.(注意中间没有空格)
3,复选框:
$(“input[@type=checkbox][@checked]“).val(); //得到复选框的选中的第一项的值
$(“input[@type=checkbox][@checked]“).each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});
$(“#chk1″).attr(“checked”,”);//不打勾
$(“#chk2″).attr(“checked”,true);//打勾
if($(“#chk1″).attr(‘checked’)==undefined){} //判断是否已经打勾
当然jquery的选择器是强大的. 还有很多方法.
<script src=”jquery-1.2.1.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
$(“#selectTest”).change(function()
{
//alert(“Hello”);
//alert($(“#selectTest”).attr(“name”));
//$(“a”).attr(“href”,”xx.html”);
//window.location.href=”xx.html”;
//alert($(“#selectTest”).val());
alert($(“#selectTest option[@selected]“).text());
$(“#selectTest”).attr(“value”, “2″);
});
});
</script>
<a href=”#”>aaass</a>
<!–下拉框–>
<select id=”selectTest” name=”selectTest”>
<option value=”1″>11</option>
<option value=”2″>22</option>
<option value=”3″>33</option>
<option value=”4″>44</option>
<option value=”5″>55</option>
<option value=”6″>66</option>
</select>
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中 项的值
var item = $(‘input[@name=items][@checked]‘).val();
获取select被选中项的文本
var item = $(“select[@name=items] option[@selected]“).text();
select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[@name=items]‘).get(1).checked = true;
获取值：
文本框，文本区域：$(“#txt”).attr(“value”)；
多选框checkbox：$(“#checkbox_id”).attr(“value”)；
单选组radio： $(“input[@type=radio][@checked]“).val();
下拉框select： $(‘#sel’).val();
控制表单元素：
文本框，文本区域：$(“#txt”).attr(“value”,”);//清空内容
$(“#txt”).attr(“value”,’11′);// 填充内容
多选框checkbox： $(“#chk1″).attr(“checked”,”);//不打勾
$(“#chk2″).attr(“checked”,true);// 打勾
if($(“#chk1″).attr(‘checked’)==undefined) //判断是否已经打勾
单选组radio： $(“input[@type=radio]“).attr(“checked”,’2′);//设置value=2的项目为当前选中项
下拉框select： $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项
$(“<optionvalue=’1′& gt;1111</option><optionvalue=’2′>2222</option& gt;”).appendTo(“#sel”)//添加下拉框的option
$(“#sel”).empty()；// 清空下拉框
获取一组radio被选中项的值
var item = $(‘input[@name=items][@checked]‘).val();
获取select被选中项的文本
var item = $(“select[@name=items] option[@selected]“).text();
select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[@name=items]‘).get(1).checked = true;
获取值：
文本框，文本区域：$(“#txt”).attr(“value”)；
多选框checkbox：$(“#checkbox_id”).attr(“value”)；
单选组radio： $(“input[@type=radio][@checked]“).val();
下拉框select： $(‘#sel’).val();
控制表单元素：
文本框，文本区域：$(“#txt”).attr(“value”,”);//清空内容
$(“#txt”).attr(“value”,’11′);//填充内容
多选框checkbox： $(“#chk1″).attr(“checked”,”);//不打勾
$(“#chk2″).attr(“checked”,true);//打勾
if($(“#chk1″).attr(‘checked’)==undefined) //判断是否已经打勾
单选组radio： $(“input[@type=radio]“).attr(“checked”,’2′);//设置value=2的项目为当前选中项
下拉框select： $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项
$(“<option value=’1′>1111</option><option value=’2′>2222</option>”).appendTo(“#sel”)//添加下拉框的option
$(“#sel”).empty()；//清空下拉框
Popularity: 13%
jquery validate 表单验证
jquery.validate.js是jquery旗下的一个验证插件，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法。
举个例 子，有这么一个表单：
<form id=”signupForm” method=”get” action=”">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for=”firstname”>Firstname</label>
<input id=”firstname” name=”firstname”/>
</p>
<p>
<label for=”lastname”>Lastname</label>
<input id=”lastname” name=”lastname” />
</p>
<p>
<label for=”username”>Username</label>
<input id=”username” name=”username” />
</p>
<p>
<label for=”password”>Password</label>
<input id=”password” name=”password” type=”password” />
</p>
<p>
<label for=”confirm_password”>Confirm password</label>
<input id=”confirm_password” name=”confirm_password” type=”password” />
</p>
<p>
<label for=”email”>Email</label>
<input id=”email” name=”email” />
</p>
<p>
<input type=”submit” value=”Submit”/>
</p>
</fieldset>
</form>
在这个表 单中，有名、姓、用户名、密码、确认密码和email。 他们都为非空，并且电子邮件需要是格式正确的地址、确认密码和密码一致。使用jQuery验证最简单的方式是引入jquery.js和jquery validation.js两个js文件。然后分别在input中加入class即：
<input id=”firstname” name=”firstname” class=”required”/>
<input id=”lastname” name=”lastname” class=”required”/>
<input id=”username” name=”username” class=”required”/>
<input id=”password” name=”password” type=”password”/>
<input id=”confirm_password” name=”confirm_password” type=”password” class=”required” equalTo=”#password”/>
<input id=”email” name=”email” class=”required email”/>
以下列出validate自带的默认验证
required: “必选字段“,
remote: “请修正该字段“,
email: “请输入正确格式的电子邮件“,
url: “请输入合法的网址“,
date: “请输入合法的日期“,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字“,
digits: “只能输入整数“,
creditcard: “请输入合法的信用卡号“,
equalTo: “请再次输入相同的值“,
accept: “请输入拥有合法后缀名的字符串“,
maxlength: jQuery.format(“请 输入一个长度最多是 {0} 的 字符串“),
minlength: jQuery.format(“请 输入一个长度最少是 {0} 的 字符串“),
rangelength: jQuery.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串“),
range: jQuery.format(“请输入 一个介于 {0} 和 {1} 之间的值“),
max: jQuery.format(“请输入一个 最大为 {0} 的值“),
min: jQuery.format(“请输入一个 最小为 {0} 的值“)
然后，在document的read事件中，加入如下方法：
<script>
$(document).ready(function(){
$(“#signupForm”).validate();
}
</script>
这样，当form被提交的时候，就会根据input指定的class来进行验证了。如果失败，form的提交就会被阻止。并且，将提示信息显示在input的后面。
不过，这 样感觉不好，因为验证规则侵入了我们的html代 码。还有一个方式，便是使用“rules”。 我们将input的那些验证用class删除掉。然后修改document的ready事件响应代码：
$(document).ready(function(){
$(“#signupForm”).validate({
rules:{
firstname:”required”,
lastname:”required”,
username:”required”,
password:”required”,
confirm_password:{
required:true,
equalTo:”#password”
},
email:{
required:true,
email:true
}
}
});
})
这样以来，也能达到相同的效果。
那么，接下的问题，就是显示的错误提 示是默认的。我们需要使用自定义的提示：
$(document).ready(function(){
$(“#signupForm”).validate({
rules:{
firstname:”required”,
lastname:”required”,
username:”required”,
password:”required”,
confirm_password:{
required:true,
equalTo:”#password”
},
email:{
required:true,
email:true
}
},
messages:{
firstname:”必填项“,
lastname:”必填项“,
username:”必填项“,
password:”必填项“,
confirm_password:{
required:”必填项“,
equalTo:”密码不一致“
},
email:{
required:”必填项“,
email:”格式有误“
}
}
});
})
如果你还 想在错误信息上显示特别的样式(比 如字体为红色)即可通过添加：
<style type=”text/css”>
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>
继续添加对输入密码长度的验证规则：
$(document).ready(function(){
$(“#signupForm”).validate({
rules:{
firstname:”required”,
lastname:”required”,
username:”required”,
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:”#password”
},
email:{
required:true,
email:true
}
},
messages:{
firstname:”必填项“,
lastname:”必填项“,
username:”必填项“,
password:{
required:”必填项“,
minlength:jQuery.format(“密码长度不少于{0}位“),
maxlength:jQuery.format(“密码长度不超过{0}位“)
},
confirm_password:{
required:”必填项“,
equalTo:”密码不一致“
},
email:{
required:”必填项“,
email:”格式有误“
}
}
});
})
使用remote
可以通过event指定触发效验方式（可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不指定时就只在按提交按钮时触发）
$(document).ready(function(){
$(“#signupForm”).validate({
event:”keyup” || “blur”
})
})
如果通过指定debug为true则表单不会 提交只能用来验证(默 认为提交)， 可用来调试
$(document).ready(function(){
$(“#signupForm”).validate({
debug:true
})
})
如果在提交前还需要进行一些自定义处理使用submitHandler参 数
$(document).ready(function(){
$(“#signupForm”).validate({
SubmitHandler:function(){
alert(“success”);
}
})
})
Popularity: 14%
Jquery表单取值赋值的一些基本操作
/*获得TEXT.AREATEXT的值*/
var textval = $(“#text_id”).attr(“value”);
//或者
var textval = $(“#text_id”).val();
/*获取单选按钮的值*/
var valradio = $(“input[@type=radio][@checked]“).val();
/*获取一组名为(items)的radio被选中项的值*/
var item = $(‘input[@name=items][@checked]‘).val();
/*获取复选框的值*/
var checkboxval = $(“#checkbox_id”).attr(“value”)；
/*获取下拉列表的值*/
var selectval = $(‘#select_id’).val();
//文本框，文本区域：
$(“#text_id”).attr(“value”,”);//清空内容
$(“#text_id”).attr(“value”,’test’);//填充内容
//多选框checkbox：
$(“#chk_id”).attr(“checked”,”);//使其未勾选
$(“#chk_id”).attr(“checked”,true);//勾选
if($(“#chk_id”).attr(‘checked’)==true) //判断是否已经选中
//单选组radio：
$(“input[@type=radio]“).attr(“checked”,’2′);//设置value=2的项目为当前选中项
//下拉框select：
$(“#select_id”).attr(“value”,’test’);//设置value=test的项目为当前选中项
$(“
test test2
“).appendTo(“#select_id”)//添加下拉框的option
$(“#select_id”).empty()；//清空下拉框
获取一组名为(items)的radio被选中项的值
var item = $(‘input[@name=items][@checked]‘).val();//若未被选中 则val() = undefined
获取select被选中项的文本
var item = $(“select[@name=items] option[@selected]“).text();
select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[@name=items]‘).get(1).checked = true;
//重置表单
$(“form”).each(function(){
.reset();
});
Popularity: 13%
21个为您的网站和博客提供的免费视频播放器
很多设计师在都会在他们的网站使用视频播放器。在线视频播放器无需为简单的用户和Web开发人员提供过多的介绍，它简单易用，为您建站时提供了灵活 性和创造性，您可以添加无限数量的视频，并根据你的想法安排它们的专辑标题、艺术家的名字或年份，这些都完全取决于你！
如今，有超过100万的网络媒体相关的资源可以 用。与其花费时间去做那些研究，还不如选择使用一些最好的并且免费的 网站视频/媒体播放器的插件。下面就是我爱互联网为您收集的非常有价值的免费的视频播放器，不仅有网站上应用的视频播放器，而且对于wordpress爱好者，还有专门为wordperss定制的插件啊，如果你正在寻找此类资源，赶紧来看下吧。
1. Flowplayer
Flowplayer 是一个开源（GPL 3的）网络上的视频播放器。它用来将视频流嵌入到您的网页。专为网站拥有者，开发商，爱好者，企业和认真的程序员。使用Flowplayer，你可以定制 自己的播放器并放到你的网站来接收网络上的视频。
特性:
它是完全自由和开放源码
你可以在几分钟内建立您的播放器
流畅如丝 — 它已经全面地优化并隐藏了边缘弯曲和下载堵塞等行为. 时间轴展示非常流畅，有两种不同的自动隐藏模式：“隐藏”和“滑动”效果。
可接收来自任何地方的视频流 – 使用行业标准协议的RTMP或HTTP流与最常见的Web服务器的lighttpd，Apache，nginx或IIS或从众所周知的内容传递网络 Akamai公司，Amazon Cloudfront，Highwinds，HDDN，SimpleCDN和更多的视频。
扩展性 — Flowplayer是使用Flash技术，确保98％的互联网用户可以看到您的影片。另外还有一个独立的javascript API来帮助你改变与Flash进行通信的方式。
如何安装: 有详细的安装指南可利用帮你创建视频播放器。官方 链接
2. Video LightBox
Video LightBox是一个免费的向导程 序，它可以帮助您轻松地将视频嵌入到网站，网页或博客，只需点击几下，而无需编写代码。Video LightBox免费用于非商业用途，商业网站使用需要许可费用。Video LightBox的企业版提供了一个额外的选项，可以消除VideoLightBox.com的版权信息同时可在视频中增加你自己的水印。
特性:
嵌入的FLV，MP4，3GP等视频文件
新增YouTube，Facebook和谷歌视频，metacafe，Vimeo，MySpace的视频
Mac和Windows版本
符合XHTML标准
自动创建缩略图
添加标题
拥有很多华丽的主题
内置FTP
如何安装:
有Video LightBox团队在他们网站上提供的 详细的安装指南。官方链接
3. JW Player
JW Player是一款方便的和灵活的flash视频播放器，它支持Adobe Flash Player可以处理的任何格式（FLV, H.264, MP4, MP3, AAC, JPG, PNG and GIF），它也支持多种流媒体和流媒体和播放列表格式（包括RMTP协议，即HTTP，以及更多），开放的Flashvar设置及javascript API的可扩展性。
特性:
可更改JW Player的皮肤来匹配你的站点；设计您自己或检出JW Player的自定义皮肤库。
良好的插件系统 – 通过插件，您的播放器可以做任何事情。 您可以建立与开发SDK和资源，或浏览我们的插件自己拿来分析，评分，以及更多。
无忧视频管理
如何安装:
本指南将告诉您如何在Flash V5的环境下安装JW Player。首先，从网上下载安装ZIP包，其中包含你开始时的所有文件。第1步：上传播放器文件到网站 – 将player.swf，yt.swf和swfobject.js文件从您的网站解压缩，请确保您已上传所有必要的影片，歌曲或您网站的图片。
第2步：在html中嵌入播放器代码 – 在你的html页面中嵌入下面的代码。注：如果您放置的文件在不同的目录 中，请确保设置此代码中相应的参数。
| <p id=’preview’>The player will show in this paragraph</p> <script type=’text/javascript’ src=’swfobject.js’></script> <script type=’text/javascript’> var s1 = new SWFObject(‘player.swf’,'player’,’400′,’300′,’9′); s1.addParam(‘allowfullscreen’,'true’); s1.addParam(‘allowscriptaccess’,'always’); s1.addParam(‘flashvars’,'file=video.flv’); s1.write(‘preview’); </script> |
注意上述的FlashVars参数包含了使用不同的皮肤插件或列表的配置变量，要迅速建立 FlashVars的，使用安装向导，只需选择一个例子，选择您要使用的变量并粘贴到您的网页的代码，就是这么简单。
有 详细的安装指南 提供如何在你的站点中创建视频播放器。官方链接
4. GDD FLVPlayer
GDD FLVPlayer是一个基于网络的免费软件，它可以播放FLV/mp4 (MPEG-4 为FLash编码视频文件)文件，使用GDD FLVPlayer，你可以很容易地播放你的FLV/mp4影片，因为它并不需要复杂的Flash创作工具和Flash开发工具。
特性:
完全定制的控制面板
只需几下点击就可在网站发布您的FLV或MP4视频
只需几秒就可添加视频到您的Flash项目中
播放广告或任何自定义介绍
在播放器中使用自己的LOGO
使用你想要的任何尺寸
没有欺骗，完全是免费的
没有特殊的编程技能的要求
如何安装:
每个可下载的Player ZIP文件中都会有一个“howto”的指南。官方链接
5. MC Media Player
有一个 安装工具 的球员可以用MC的媒体播放器的网站，其中你可以创建你自己的。MC Media Player是一个基于Flash的在网页中嵌入视频, 音频和图像的媒体，它免费应用于非盈利和商业网站。
目前有两种版本的播放器：MC 经典（以前已知为720 × 360版）和MC 牛郎星（测试版），名称很有意思。
MC 牛郎星 — 单一文件的视频播放器，都容易建立和定制，支持FLV和H.264的（渐进式下载和RTMP数据流）。
MC 经典 — 这是我们原始的播放器，但现在是在停产（寿命终结）阶段，也就是说，它不再是正在开发中。.
特性:
可定制的界面
可以运行在MC Media Player’s的服务器或你自己的服务器
R可调整大小尺寸和纵横比
如何安装:
在其官网上有一个 安装工具 可以用来指点你创建播放器。官方链接
6. Video Player Pro
特性:
Video Player Pro根据你自己的需要采用不同的版本
不需要Flash编程实现
如何安装:
有一个非常详细的 视频教程 可在网上了解的安装和设置过程。官方链接
7. VISCOM Web Player
是一个免费的平台独立的Web网站视频播放器，它用一种简单，方便的方法来添加单个或多个视频到任何网站，包括视频共享网站，在线培训，远程教育和 学习，你的博客，Myspace，论坛等。
特性:
Support streaming flv video from your web site.
支持XML播放列表，你可以向您的播放器中添加一个或多个电影
启用或禁用视频缩略图列表
支持全屏幕播放
支持播放下一个视频，如果超过一个电影
支持宽高比控制
不需懂编码知识就可以轻松个性化你的播放器
内置高质量皮肤，免费的YouTube风格，Quick time player的风格，Window media player风格，Real player风格，标准播放器的风格
8. SS4UPlayer
SS4UPlayer是一个灵活的基于互联网的视频播放器，同时支持流和渐进式下载。可工作在Windows和Linux平台。它支持如 FLV，264，MP4，MP3的音乐格式播放。它可以通过JavaScript设置flashvar。基于XML的换肤功能，使您可以完全自定义的颜 色，工具条颜色和大小，透明度，字体类型，字体颜色和字体大小。
特性:
播放/暂停，寻道，定时器，全屏，音量条，预览图像
你可以载入你自己的logo.
完全Flash AS3的类和包
可以通过Flash的var参数指定使用JavaScript或XML文件方式加裁视频
支持使用XML播放列表
支持流及渐近式下载
非常稳定
如何安装:
每个可下载的Player ZIP文件中都有一份说细的安装指南或者你可以直接下载Installation PDF guide的安装指南。官方链接
9. Anarchy Media Player
Anarchy Media播放器是为所有那些想要在出版的音像内容网站中简单应用，而且它可以使得任何可直接播放的在您的网页上的MP3，Flash flv或QuickTime MOV链接直接播放，同时可以选择隐藏的下载链接。使用GNU通用公共许可证。
如何安装:
详细安装请参考这个 链接
10. SublimeVideo (尚未发布)
SublimeVideo是HTML5的视频播放器，让您轻松地在任何使用最新的网页标准的网页，博客或网站中嵌入视频。
浏览器制造商仍然致力于全面支持HTML5视频规范，因此现在SublimeVideo仍是在实验状态，只能工作在少数浏览器下。但是，长期的目标 是让它可在所有的现代浏览器上工作。SublimeVideo将很快免费发布（至少用于非商业用途）。
特性:
全窗口模式 – 这将最大限度地提高视频尺寸以适应浏览器的窗口。在你在浏览器中最大化看视频时，如果你还想访问其他应用程序它是很方便的。
全屏幕模式 – 目前只在最新的WebKit中得以支持，您可以通过ALT键激活此上全窗口按钮点击模式。
HTML5视频的好处 – 没有浏览器插件，无Flash依赖！ 您也可以跳到视频的任何地方，而不必等待它的缓冲区。
独立的纯JavaScript库
wordpress的 免费视频播放器插件
11. WP Media Player
WP Media Player是一个基于Silverlight的wordpress媒体播放插件，它可以用于播放在同一博客或网页中 一个或多个播放器。还可用于播放自己主机上的或外部的托管视频服务器上的视频。
特性:
6种播放器样式
跟踪并报告影片已经看过多少次
默认播放器配置设置，如大小，缩略图，自动装载和自动播放
每个Player实例的配置，可用于自定义每一个在博客内或文章中的Player设置
视频文件的上传和选择是充分考虑结合了WordPress的用户编辑界面
如何安装:
详细安装请参考这个 链接
12. Flash Video Player
WordPress的Flash 视频插件，允许向Wordpress站使用符合标准的标记语言来添加加视频（和其他媒体），是领先的开放源码软件。安装快捷，方便，无需额外安装/编码 /PHP。 这个插件是少痕迹，不创建表，卸载干净。第5版提供了播放器皮肤的全面支持, 与谷歌分析的整合, 并且有能力显示来自长尾解决方案的广告。
特性:
强健的选项菜单定制功能
谷歌分析功能
长尾广告解决方案
兼容XHTML
无后顾之忧！无数据库表和卸载干净
播放列表，简易信息聚合，原子，XSPF，RTMP数据
组件化
如何安装: 如需详细的安装请参考这个 链接
13. Anarchy Media Player
WordPress的 Anarchy Media Player 2.5可以播放在你网页中合适的播放器中任何简单的href链接，如mp3, flv, Quicktime mov, mp4, m4v, m4a, m4b, 3gp以及Windows的wmv, avi和asf文件等。WordPress的版本也将按钮添加到编辑器中以用来嵌入Flash的SWF和主导的电影如YouTube, Google Video, iFilm, DailyMotion, Revver, Metacafe, MySpace, Apple iTunes iMix，和GoEar players.
如何安装: 如需详细的安装请参考这个 链接
14. All in One Video Pack
这不仅是一个视频嵌入工具 – 它包含你可能需要的所有视频和富媒体的功能，包括上传/录制/直接导入影片到您的文章，使用在线视频编辑器来编辑和混排内容，视频评论，管理和跟踪您的视 频内容，创建播放列表等等。
特性:
上传，从摄像头录制并且直接导入所有富媒体到您的博客文章
让读者和用户添加视频和音频的意见，并参与影片合作
通过管理控制台管理和跟踪互动视频
允许视频广告
完整的管理功能，您来决定谁可以添加和编辑每个视频
支持150多个视频，音频和图像文件格式和编解码器
如何安装: 对于安装及其他常见问题请参考这 链 接
15. Viper’s Video Quicktags
厌倦了从YouTube等网站复制和粘贴的嵌入HTML吗？那么请你试试这个插件。
只是简单的按一下其中一个新的按钮，这个插件就加进了写作的屏幕（包括丰富的编辑器），然后粘贴网址，这样视频就出现在提示框中了 – 就是这么简单。你可以完全配置如何显示的视频（宽度，高度，颜色，网页上的排列）等等。
特性:
支持的文件类型：Flash视频文件，QuickTime，通用视频文件
目前，支持多种大型视频网站如YouTube（包括播放列表）, Google Video, DailyMotion, Vimeo etc
如何安装:
如需详细的安装请参考这个 链 接
16. Smart YouTube
Smart YouTube是一个WordPress的YouTube插件，让您轻松地插入Youtube视频/播放列表在您的文章，评论和RSS摘要。
这个 插件的主要是为了在你博客文章中正确地嵌入Youtube视频，这个视频还会在你的RSS摘要中完全显示出来。
特性:
简单的嵌入Youtube视频和播放列表
支持最新的高质量的视频协议(360p和HD quality 720p)
允许完全的YouTube定制（颜色，边框，全屏）
支持视频深层链接
可工作在iPod和iPhone
提供一个侧栏小工具
生成XHTML代码
如何安装:
如需详细的安装请参考这个 链 接
17. Embedded Video
该插件是用来简单地嵌入视频到一个博客帖子上，这些视频可以和外部门户网站如YouTube，谷歌视频和许多许多其他的集成，或者他们可以上传到 Web服务器或远程服务器做集成，另外可以自动生成一个相应的特定的视频门户网站的链接或下载到本地文件的链接，如有需要。链接文字也可配置。此外，该视 频可以轻松地集成在使用内置的所见即所得的编辑器中。该插件生成XHTML的有效代码并可以工作在WP2.5版本及以上。
特性:
支持文件格式: flv, swf, mov, qt, wmv, mpg, mpeg, mpe, asf, asx, wax, wmv, wmx, avi
当前支持视频门户: YouTube, Google Video, dailymotion, MyVideo, Clipfish, Sevenload, Revver, Metacafé, Yahoo! Video, ifilm, MySpace Video, Brightcove, aniBOOM, vimeo, GUBA, Garage TV, GameVideos, vSocial, Veoh, Gametrailers.
如何安装:
如需详细的安装请参考这个 链 接
18. wordTube
这个插件管理的JW的FLV媒体播放器5.1，让你可以轻松的在Wordpress的文章和页面中放置音乐，视频或Flash电影。
wordTube 支持流媒体视频格式（格式 .FLV或.swf）文件，音频文件MP3，JPG，GIF或PNG grafic文件。使用wordTube你可以简单在您的博客中插入标签[media id="media id"]或播放列表[playlist id="playlist id"]。
插入这样的标记你不需要改变所见即所得模式或特殊的HTML知识，您可以显示一个简单的媒体文件（即一个 flv格式）或您的所有媒体文件的播放列表。
如何安装:
如需详细的安装请参考这个 链接
19. ProPlayer
可把在线视频如(YouTube, Vimeo, Veoh, Youku, Dailymotion, etc..)等通过JW FLV播放器放置在你的文章中。
特性:
27种不同的皮肤
自定义播放列表
视频评分
音频可视化
如何安装:
如需详细的安装请参考这个 链接
20. SeeTheFace
WordPress的SeeTheFace插件可以瞬间升级您的文字博客到视频博客。在SiteClip的帮助下用户将能够方便地使用 Publisher的视频信息记录和过滤器。此外，SiteClip内在的机制使其有可能和任何种类的网站结合起来，不论其类型和复杂性的机制。 SiteClip可以内置在电子商务，教育/信息和新闻，社区，拍卖网站以及工作门户网站，一个管理单元等。
如何安装:
如需详细的安装请参考这个 链接
21. FLV Embed
FLV Embed是一个WordPress插件用来简化添加到您的博客（视频）Flash视频的过程。用于商业用途和执行，你需要购买球员的许可证。如果你想了 解FLV视频编码以及为什么你使用FLV，Jeroen也写了一篇出色的文章，你可以在他的网站上找到。
特性:
执行一个标准的插件标记的样式
嵌入一个FLV文件，它的最简单的方法
高度便携，可扩展和面向未来的标签
兼容XHTML
如何安装:
如需详细的安装请参考这个 链接
Popularity: 11%
在 
在 