当前位置: 首页 > 工具软件 > embedSWF > 使用案例 >

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

赏开宇
2023-12-01

工作中,经常遇到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>

 

 类似资料: