织梦ckplayer插件如何实现视频播放与适配？-织梦建站-盈思创科技

CKplayer是一款非常流行且功能强大的网页视频播放器，它支持多种格式（通过转换）、广告、弹幕、皮肤切换等,非常适合织梦网站使用。

（图片来源网络，侵删）

下面我将分步为您介绍从下载、安装到使用的完整流程。

第一步：准备工作

下载CKplayer
- 访问CKplayer官方网站或可靠的第三方资源网站下载最新版本的播放器。
- 官方网站地址（可能需要网络访问）：http://www.ckplayer.com/
- 下载后，你会得到一个压缩包，里面通常包含以下核心文件和文件夹：
  - ckplayer.js：播放器核心脚本文件。
  - ckplayer.swf：Flash播放器核心文件（虽然HTML5是主流，但保留以防兼容）。
  - video 或 media 文件夹：存放示例视频。
  - style 文件夹：存放播放器皮肤样式。
  - 其他配置文件和说明文档。
上传播放器文件到服务器
- 登录你的网站FTP或通过主机管理面板的文件管理器。
  （图片来源网络，侵删）
- 在织梦网站的根目录（）下创建一个文件夹，用于存放CKplayer文件，我们通常命名为 ckplayer 或 player。
- 将下载的 ckplayer.js、ckplayer.swf 以及 style 等文件夹上传到你刚创建的 ckplayer 文件夹中。
- 示例目录结构：
```
/你的网站根目录/
├── /ckplayer/          <-- 上传的播放器文件
│   ├── ckplayer.js
│   ├── ckplayer.swf
│   ├── /style/
│   └── ...
├── /dede/             <-- 织梦后台目录
├── /templets/         --> 网站模板目录
└── ...
```

第二步：在织梦模板中调用CKplayer

这是最关键的一步，你需要修改织梦的内容详情页模板（通常是 article_article.htm）,让视频能够在文章中正常播放。

（图片来源网络，侵删）

详情页模板
- 进入织梦后台：后台 -> 模板 -> 默认模板管理。
- 在左侧列表中找到并点击 内容页模板 (article_article.htm)。
- 点击 修改 按钮进入模板编辑器。

引入CKplayer核心JS文件

在模板的 <head> 标签内，添加对 ckplayer.js 的引用，建议放在 {dede:global.cfg_webname/} 或其他JS文件的后面。

<head>
    <meta charset="utf-8">
    <title>{dede:field.title/} - {dede:global.cfg_webname/}</title>
    <!-- 其他 head 内容... -->
    <!-- 引入CKplayer核心JS文件 -->
    <script type="text/javascript" src="/ckplayer/ckplayer.js"></script>
</head>

区域放置视频播放容器
- {dede:field.body/} 的合适位置（比如文章开头），添加一个 <div> 作为视频播放的容器。必须为这个 div 设置一个唯一的ID。
```
<div id="videoContent">
    
</div>
{dede:field.body/}
```

编写初始化播放器的JS代码

在模板的底部，</body> 标签之前，编写一段JavaScript代码来初始化CKplayer,这段代码会读取文章中的视频地址并播放。

代码示例：

<script type="text/javascript">
    // 等待文档加载完成
    window.onload = function () {
        // 1. 获取文章内容中的视频地址
        // 假设你的视频地址是直接写在文章内容里的，或者通过自定义字段获取
        // 这里我们通过一个简单的正则表达式从文章内容里提取第一个 .mp4 或 .flv 文件
        var content = document.getElementById('article_content').innerText; // 注意：这里用innerText获取纯文本，避免HTML标签干扰
        var videoUrl = '';
        // 简单匹配，你可以根据实际情况修改正则表达式
        var match = content.match(/http[s]?:\/\/[^\s]+\.(mp4|flv|webm|m4v)/i);
        if (match) {
            videoUrl = match[0];
        }
        // 如果找到了视频地址，则初始化播放器
        if (videoUrl) {
            // 2. 定义一个对象，用于配置播放器
            var flashvars = {
                f: videoUrl, // 视频地址
                c: 0,        // 调试模式，0为关闭，发布时请务必设置为0
                b: 1,        //  barbar显示控制栏，1为显示
                s: 2,        //  定义清晰度切换的接口，2为使用内置的清晰度切换
                p: 1,        //  自动播放，0为不自动，1为自动
                loaded: 'loadedHandler' // 视频加载完成后执行的函数名
            };
            // 3. 定义一个对象，用于配置播放器容器
            var video = ['videoUrl']; // 也可以写成 ['http://xxx.com/video.mp4'] 直接写死
            // 4. 调用CKplayer初始化函数
            // 参数1: 容器ID
            // 参数2: 视频地址数组
            // 参数3: flashvars配置对象
            // 参数4: 其他配置项（如播放器宽高）
            CKobject.embed('/ckplayer/ckplayer.swf', 'videoContent', 'ckplayer_a1', '100%', '100%', true, flashvars, video, ['/ckplayer/style/ckplayer.style.min.css']);
        }
    };
    // 视频加载完成后的回调函数
    function loadedHandler() {
        console.log('视频加载完成');
    }
</script>

代码解释：

window.onload: 确保页面所有元素都加载完毕后再执行JS,避免找不到容器。
videoUrl: 这里是获取视频地址的核心。强烈建议使用织梦的自定义字段来存储视频地址，这样更可控、更高效，上面的正则表达式只是示例,不稳定。
flashvars: 播放器的配置参数，f 是视频地址，p 是自动播放，s 是清晰度切换等。
CKobject.embed: 这是CKplayer的初始化函数，负责将播放器嵌入到指定的 div 中。
- '/ckplayer/ckplayer.swf': 播放器SWF文件路径。
- 'videoContent': 你在HTML中定义的播放器容器 div 的ID。
- 'ckplayer_a1': 为播放器实例生成的唯一ID。
- '100%', '100%': 播放器的宽度和高度，设置为100%可以让它自适应容器大小。

第三步（推荐）：使用织梦自定义字段管理视频

里写视频地址，或者用正则匹配，都非常不灵活,最佳实践是使用织梦的自定义字段。

创建自定义字段
- 进入织梦后台：后台 -> 核心 -> 内容模型管理。
- 点击你正在使用的模型（文章模型”）的 修改 按钮。
- 切换到 字段管理 标签页。
- 点击 添加新字段。
- 字段名称: video_url (英文,方便调用)
- 字段提示: 视频播放地址 (在后台发布文章时显示的提示)
- 字段类型: 单行文本
- 字段值列表: 可以留空，或者填写一些常用后缀，如 .mp4,.flv,.webm
- 其他选项保持默认即可，然后点击 保存。
在后台发布文章时填写视频地址
- 现在去发布一篇新文章，你会发现文章编辑界面上多了一个“视频播放地址”的输入框。
- 将你的视频文件地址（http://www.yoursite.com/uploads/video.mp4）填写到这个框里。

修改模板，调用自定义字段

回到 article_article.htm 模板，修改JS代码,将视频地址的获取方式改为调用自定义字段。

修改后的JS代码：

<script type="text/javascript">
    window.onload = function () {
        // 使用织梦的标签直接获取自定义字段的值
        var videoUrl = '{dede:field.video_url/}';
        if (videoUrl) {
            var flashvars = {
                f: videoUrl,
                c: 0,
                b: 1,
                s: 2,
                p: 0, // 建议不自动播放，对用户更友好
                loaded: 'loadedHandler'
            };
            var video = [videoUrl];
            CKobject.embed('/ckplayer/ckplayer.swf', 'videoContent', 'ckplayer_a1', '100%', '100%', true, flashvars, video, ['/ckplayer/style/ckplayer.style.min.css']);
        }
    };
    function loadedHandler() {
        console.log('视频加载完成');
    }
</script>

这样,你就实现了与织梦完美结合的视频发布和管理流程。

第四步：CKplayer高级功能（可选）

CKplayer功能非常丰富，你可以根据需要调整 flashvars 对象来启用更多功能。

添加多个视频源（清晰度切换）: flashvars 中的 s: 2 已经开启了清晰度切换功能，你只需要在 video 数组中提供多个视频源即可。
```
var video = [
    ['高清地址.mp4', '高清'],
    ['标清地址.mp4', '标清'],
    ['流畅地址.mp4', '流畅']
];
```

添加视频结尾广告:

var flashvars = {
    // ... 其他配置
    e: [
        [0, '/path/to/your/ad.swf', 15, 0, 0, 'http://www.your-ad-link.com'] // [0,广告地址,广告时长,跳过按钮,广告类型,广告链接]
    ]
};

添加视频暂停广告:

var flashvars = {
    // ... 其他配置
    tu: '/path/to/your/pause-ad.png', // 暂停广告图片
    tuClick: 'http://www.your-ad-link.com' // 点击广告跳转的链接
};

启用弹幕: 这通常需要结合后端接口来实现，相对复杂，CKplayer官方有提供弹幕插件和文档,可以查阅其官方API。

下载并上传 CKplayer文件到网站根目录的 ckplayer 文件夹。
修改织梦内容页模板 (article_article.htm)。
在 <head> 中 引入 ckplayer.js，区 放置一个 div 作为播放容器,并设置唯一ID。
在 <body> 底部 编写JS代码，使用 CKobject.embed 初始化播放器。
强烈推荐使用织梦自定义字段 (video_url) 来管理视频地址，使流程更清晰、更易于维护。
根据需要，调整 flashvars 配置以实现更高级的功能。

通过以上步骤,你就可以成功地在织梦网站中集成并使用功能强大的CKplayer视频播放器了。

织梦ckplayer插件如何实现视频播放与适配？

第一步：准备工作

第二步：在织梦模板中调用CKplayer

第三步（推荐）：使用织梦自定义字段管理视频

第四步：CKplayer高级功能（可选）

相关文章

目录[+]