工作中,经常遇到CMS里内嵌的使用embed标签的Flash网页播放器,这些播放器交互性差、不好用,但是因为embed标签往往已通过富文本编辑器写入了数据库的内容字段,很难去改写。如何在不改变数据库的情况下,快速将其替换为好用的CK播放器呢?以下是我的做法,贴出来供大家参考。
1.引入JQuery和CKplayer相关文件。要说明的是,引入JQuery主要是为简便操作网页元素,如果通过原生JS实现网页元素操作,也可以不引入JQuery。CKplayer此处使用6.8版本,如何使用,参见 http://www.ckplayer.com/manual,此处不多介绍。主要代码如下:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
<script src="https://gitee.com/niandeng/ckplayer/blob/master/ckplayer/ckplayer.js">
2.将embed标签替换为CK播放器(可以实现多个embed同时替换)。代码如下:
<script>
jQuery(document).ready(function($){
// 遍历多个embed标签
$("embed").each(function(i){
// 增加CKplayer容器,删除embed
$(this).after($("<div id='video" + i + "'></div>")).remove();
// 获取视频URL
var url = $(this).attr('src');
//设置自动播放参数
var autostart = 0;
if($(this).attr('autostart') == 'true'){
autostart = 1;
}
// 设置视频尺寸
var width = 800;
var height = 450;
if(typeof($(this).attr('width')) != 'undefined' && typeof($(this).attr('height')) != 'undefined'){
width = parseInt($(this).attr('width'));
height = parseInt($(this).attr('height'));
}
// 设置CKplayer参数,添加播放器
if(url){
// CKplayer6.8
var flashvars = {
f: url,
c: 0,
b: 1,
p: autostart
};
var params = {
bgcolor: '#FFF',
allowFullScreen: true,
allowScriptAccess: 'always',
wmode: 'transparent'
};
// ckplayer.swf 主要是为不支持html5的网页准备,此处路径根据具体位置调整
CKobject.embedSWF('/img/ckplayer.swf', 'video'+i, 'ckplayer_video'+i, width, height, flashvars, params);
var video = [url + '->video/mp4'];
var support = ['all'];
CKobject.embedHTML5('video'+i, 'ckplayer_video'+i, width, height, video, flashvars, support);
}
});
});
</script>