让jquery也和swfonject一样插入视频
目录
大家正在做网站SEO时,都会用到swfobject来插入相关的flash的吧,然后再做SEO的内容。
那么如果是视频呢?可以像flash一样插入到网页中吗?
答案当然是可以的,因为我有jquery这样的利器。利用jquery我写了一个简单的扩展,像swfobject一样插入视频。
支持youku 和youtube的视频,支持自定义宽度。
代码如下 :
<!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>Video Object</title>
<style media="screen" type="text/css">
#video{
width:480px;
height:400px;
margin:0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript">
$(function(){
$("#video").videobject({id:'XMTQ4NTM5MjYw'});
});
</script>
</head>
<body>
<div id="video">测试代码</div>
</body>
</html>
首先在页面引入jquery在google Libraaries API 上的库文件。然后就是我编写的一个扩展,该扩展的名字叫videobject,首先设置了扩展的默认设置,为了简化复杂的参数列表,jquery建议使用这种简化参数列表的形式,就是选项散列对象,即key/value,利用jquery自带的$.extend()函数合并参数,防止传递null或者 undefined的参数进来,在这里,我设置了flash,id,url,width,height等参数。
flash:需要插入的视频代码,可替换部分内容。
id:视频的id
如优酷的视频 查找 id 如
视频地址为http://player.youku.com/player.php/sid/XMTY0NzY4NjI4/v.swf 则
即为id
url:此参数来区分是视频的类型,如优酷为youku,youtube为ytb
width:视频的宽度
height: 视频的高度
然后再声明了一个匿名函数(关于js匿名函数这里有比较好的分析),声明两个变量分别保存了,youku和youtube的视频通用的url地址,通过视频的id的长度来判断替换不同的视频的类型。然后就根据id来插入不同的对象,最后返回当前的对象,先清空当前的div的内容,然后插入填充好了的对象。
video.js 源代码
/*
*videoobject version: 2.0 beta
* 利用jquery 插入视频 支持自定义宽度和高度 支持优酷和youtube视频
*用法$("div的id").videoobject(' 视频代码','类型代码','宽度','高度');
*
*视频代码:如http://player.youku.com /player.php/sid/XMTcwMDMxNTA4/v.swf XMTcwMDMxNTA4即为视频代码 13位
*默认视频的 宽度:480 高度:400
*
*支持 长地址 默认高度和宽度 支持优酷的自动播放
*如优酷的视频 查找 id 如
* 视频地址为http://player.youku.com/player.php/sid/XMTY0NzY4NjI4 /v.swf 则XMTY0NzY4NjI4即为id
*调用方式:以youku为例
*$("#video").videobject({id:'XMTY0NzY4NjI4'});
*$("#video").videobject({id:'XMTY0NzY4NjI4',url:'youku'});
*
*/
(function($){
$.fn.videobject = function (callerSettings){
var settings = $.extend({
flash:'<object width="mywidth" height="myheight" type="application/x-shockwave-flash" data="myurl" id="youku_player" style="visibility: visible;"><param name="quality" value="high"><param name="allowScriptAccess" value="always"><param name="flashvars" value="playMovie=true&isAutoPlay=true"></object>',
id:'XMTcwMDMxNTA4',
url:'youku',
width:'480',
height:'400'
},callerSettings||{});
var showvideo = function(uri){
var yk = 'http://player.youku.com/player.php/sid/myid/v.swf';
//var yk ='http://static.youku.com/v/swf/qplayer.swf?VideoIDS=myid=&isAutoPlay=true&isShowRelatedVideo=false&embedid=-&showAd=0';
var ytb ='http://www.youtube.com/v/myid&hl=en_US&fs=1&autoplay=1';
// urlij жΪyouku or youtube
if(uri.length ==13){settings.id = yk.replace(/myid/,uri);};//youku
if(uri.length ==11){settings.id = ytb.replace(/myid/,uri);};//youtube
return uri == 'youku'?settings.flash.replace(/myurl/,settings.id).replace(/mywidth/,settings.width).replace(/myheight/,settings.height):settings.flash.replace(/myurl/,settings.id).replace(/mywidth/,settings.width).replace(/myheight/,settings.height);
};
return this.empty().html(showvideo(settings.id));
}
})(jQuery);