如何将embed嵌入式Flash网页播放器替换为CKplayer

81 阅读 0 评论 54 点赞

我是靠谱客的博主痴情犀牛，这篇文章主要介绍如何将embed嵌入式Flash网页播放器替换为CKplayer，现在分享给大家，希望可以做个参考。

工作中，经常遇到CMS里内嵌的使用embed标签的Flash网页播放器，这些播放器交互性差、不好用，但是因为embed标签往往已通过富文本编辑器写入了数据库的内容字段，很难去改写。如何在不改变数据库的情况下，快速将其替换为好用的CK播放器呢？以下是我的做法，贴出来供大家参考。

1.引入JQuery和CKplayer相关文件。要说明的是，引入JQuery主要是为简便操作网页元素，如果通过原生JS实现网页元素操作，也可以不引入JQuery。CKplayer此处使用6.8版本，如何使用，参见 http://www.ckplayer.com/manual，此处不多介绍。主要代码如下：

复制代码

1
2
<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同时替换）。代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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>