ckplayer织梦如何实现视频播放功能？-织梦建站-盈思创科技

CKplayer 是一个非常流行且功能强大的网页视频播放器，支持多种格式、广告、弹幕等高级功能，在织梦中集成它,主要分为以下几个步骤：

（图片来源网络，侵删）

第一步：准备工作（下载 CKplayer）

访问官网：你需要访问 CKplayer 的官方网站或其资源发布平台（如 GitHub、Gitee）。
下载文件：下载 CKplayer 的最新版本，通常你会得到一个压缩包，里面包含播放器所需的核心文件，如 ckplayer.js、ckplayer.swf、video-js.swf 以及一些示例文件。
上传文件：将下载并解压后的文件，通过 FTP 或主机控制面板，上传到你的织梦网站目录中，为了方便管理，建议创建一个专门的目录，/static/ckplayer/。

你的文件结构可能如下：

/你的网站根目录/
├── /static/
│   └── /ckplayer/
│       ├── ckplayer.js
│       ├── ckplayer.swf
│       ├── video-js.swf
│       └── ... (其他文件)
├── /templets/
│   └── /default//
└── /dede/ (后台目录)

第二步：创建织梦自定义表单字段（推荐方法）

为了让文章作者能够方便地添加视频，最推荐的方法是创建一个自定义表单字段，这样，在发布文章时，就像填写“标题”、“内容”一样,可以直接填写视频地址。

登录织梦后台：进入 dede 目录,登录你的网站后台。
找到“自定义表单”：在左侧菜单中，找到并点击 “系统” -> “SQL命令行工具”。
（图片来源网络，侵删）
执行 SQL：在 SQL 命令行输入框中，执行以下 SQL 语句来添加一个新的字段 video 到 dede_archives 表（文章主表）中。
```
ALTER TABLE `dede_archives` ADD `video` VARCHAR(255) NOT NULL DEFAULT '' COMMENT '视频地址' AFTER `litpic`;
```
- video 是字段名。
- VARCHAR(255) 是数据类型，足够存储一个视频 URL。
- AFTERlitpic`` 表示这个字段会添加在“缩略图”字段之后。
刷新缓存：执行成功后，去后台首页点击 “系统” -> “一键更新网站” -> “更新数据库缓存”,让织梦识别这个新字段。

第三步：修改文章模板

我们需要修改文章的显示模板，让它在发布文章时，能够读取并显示我们刚刚添加的 video 字段。

织梦的文章模板通常位于 /templets/default/article_article.htm。

（图片来源网络，侵删）

打开模板文件：用编辑器打开 /templets/default/article_article.htm。

添加 CKplayer 播放代码：在 {dede:field.body/} 标签附近，或者你希望视频出现的位置,插入以下代码。

{dede:field.video runphp='yes'}
if(@me != '') {
    // 视频地址不为空时才显示播放器
    @me = "
    <div id='video' style='width: 100%; height: 500px;'></div>
    <script type='text/javascript' src='/static/ckplayer/ckplayer.js'></script>
    <script type='text/javascript'>
        var videoObject = {
            container: '#video', // 播放器容器的ID
            variable: 'player', // 播放器实例的名称
            video: '" . @me . "' // 视频地址
        };
        var player = new ckplayer(videoObject);
    </script>
    ";
} else {
    // 如果视频地址为空，则不显示任何内容
    @me = '';
}
{/dede:field.video}

代码解释：

{dede:field.video runphp='yes'}：这是织梦调用 video 字段，并允许使用 PHP 代码。
if(@me != '')：判断 video 字段的值是否为空，如果不为空,才执行下面的代码。
@me = " ... "：将整个 CKplayer 的 HTML 和 JavaScript 代码赋值给 @me,这样织梦就会输出这段代码。
container: '#video'：指定播放器渲染到的 <div> 的 ID。
variable: 'player'：创建一个名为 player 的播放器实例。
video: '" . @me . "'：这里是最关键的部分，它将织梦 video 字段里的值（即你填写的视频地址）动态地插入到 videoObject 的 video 属性中。
new ckplayer(videoObject)：初始化并创建播放器实例。

第四步：发布文章并测试

进入“新增文档”：在后台，点击“核心” -> “内容发布” -> “新增文档”。
填写视频地址：在文章编辑页面，你会发现除了常规的标题、内容等，多了一个“视频地址”的输入框，填入你的视频文件的 URL。
- 注意：视频地址必须是公网可以访问的 URL，http://www.example.com/videos/myvideo.mp4。
保存并生成：填写完文章内容后，点击“保存”或“生成HTML”。
前台预览：到网站前台，找到你刚刚发布的这篇文章，刷新页面，你应该就能看到 CKplayer 播放器,并且可以正常播放视频了。

高级用法与常见问题

支持多种视频格式（M3U8 清晰度切换）

CKplayer 的一个强大之处是支持通过一个 M3U8 文件来切换不同清晰度的视频，你的 video 字段可以填写一个 JSON 字符串。

示例：假设你的 video 字段内容如下：

{
    "type": "h5",
    "sources": [
        {
            "src": "http://example.com/videos/video.m3u8",
            "type": "video/mp4"
        }
    ]
}

或者更常见的清晰度切换格式：

{
    "container": "#video",
    "variable": "player",
    "video": [
        ["http://example.com/videos/1080p.m3u8", "video/mp4", "高清"],
        ["http://example.com/videos/720p.m3u8", "video/mp4", "标清"],
        ["http://example.com/videos/480p.m3u8", "video/mp4", "流畅"]
    ]
}

修改模板代码：为了支持这种 JSON 格式，你需要修改模板中的 PHP 逻辑，使用 json_decode 来解析它。

{dede:field.video runphp='yes'}
if(@me != '') {
    // 尝试解析JSON，如果解析失败则当作普通URL处理
    $video_data = json_decode(@me, true);
    if (json_last_error() === JSON_ERROR_NONE && is_array($video_data)) {
        // 是有效的JSON格式
        $video_config = json_encode($video_data); // 直接使用JSON字符串
    } else {
        // 是普通URL
        $video_config = json_encode(['video' => @me]);
    }
    @me = "
    <div id='video' style='width: 100%; height: 500px;'></div>
    <script type='text/javascript' src='/static/ckplayer/ckplayer.js'></script>
    <script type='text/javascript'>
        var videoObject = " . $video_config . ";
        var player = new ckplayer(videoObject);
    </script>
    ";
} else {
    @me = '';
}
{/dede:field.video}

这样，你就可以在后台发布文章时，填写复杂的 JSON 配置来实现多清晰度、广告等功能。

视频文件放在本地服务器

如果你的视频文件存放在自己服务器的某个目录下（/uploads/videos/），那么视频地址就应该写成相对于网站根目录的绝对路径。视频文件在 /home/wwwroot/yourdomain.com/uploads/videos/myvideo.mp4，那么地址就填： /uploads/videos/myvideo.mp4

播放器不显示或报错

检查路径：确保 /static/ckplayer/ckplayer.js 的路径是正确的，可以用浏览器开发者工具（F12）的 Network 面板查看是否成功加载了 JS 文件。
检查视频地址：确认视频地址是完整且有效的，可以直接在浏览器中打开视频 URL 看是否能访问。
检查浏览器控制台：按 F12，查看 Console 面板是否有 JavaScript 错误信息,这通常会直接指出问题所在。

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

ckplayer织梦如何实现视频播放功能？