dedecms如何本地视频教程播放？-建站教程-锦华智联科技

直接上传视频到服务器，使用 HTML5 `<video>` 标签（最简单）

这是最直接的方法，适用于视频文件不大、服务器带宽足够的情况。

（图片来源网络，侵删）

优点：

完全免费,无需任何额外插件或服务。
实现简单,上传即可用。

缺点：

消耗大量服务器资源：视频流会占用你服务器的带宽和流量。
影响网站速度：如果视频大且访问人多,会严重拖慢网站加载速度。
用户体验差：没有进度条、清晰度切换、全屏等播放器功能。
移动端兼容性一般：不同浏览器对视频格式的支持不同。

操作步骤：

上传视频文件：
（图片来源网络，侵删）
- 通过 FTP 工具（如 FileZilla）登录你的服务器。
- 在网站根目录下（通常是），创建一个名为 video 或 uploads/video 的文件夹,用于存放视频文件。
- 将你的本地视频文件（my-tutorial.mp4）上传到这个文件夹中。
在 Dedecms 后台发布文章：
- 登录 Dedecms 后台，进入“[核心] -> [内容发布] -> [添加文档]”。
- 填写文章标题、选择所属栏目等基本信息。
- 将光标移动到“[HTML 编辑]”模式下。
- 插入以下代码：
```
<video src="/video/my-tutorial.mp4" width="800" height="450" controls="controls">
您的浏览器不支持 video 标签。
</video>
```
- 代码解释：
  - src="/video/my-tutorial.mp4"：这里填写你上传视频的绝对路径,确保路径正确。
  - width="800" height="450"：设置视频播放器的宽度和高度,你可以根据需要调整。
  - controls="controls"：这是最重要的属性，它会显示默认的播放控件（播放/暂停、进度条、音量、全屏等）。
- 点击“保存”或“发布”即可。

使用第三方视频托管服务（推荐）

这是目前最专业、最推荐的方案，你将视频上传到专业的视频云平台，然后平台会提供播放代码，你只需要将代码嵌入到 Dedecms 文章中即可。

优点：

不占用你的服务器资源：视频托管在专业服务器上,不影响你的网站速度。
播放体验极佳：通常提供高清播放、倍速播放、清晰度切换、弹幕、互动等丰富功能。
CDN 加速：视频访问速度快,全球用户都能流畅观看。
省心省力：无需担心视频格式、带宽、流量等问题。

缺点：

（图片来源网络，侵删）

通常需要付费：免费版可能有水印、时长或流量限制。
依赖第三方服务：如果服务出问题,你的视频也无法播放。

常用平台：

腾讯云点播：国内领先，功能强大,有免费试用额度。
阿里云视频点播：与腾讯云类似,生态完善。
Bilibili（哔哩哔哩）：非常适合教程类视频，互动性强，可以直接将视频投稿到B站,然后使用其嵌入代码。
YouTube：如果面向海外用户,是首选。

操作步骤（以 Bilibili 为例）：

上传视频到 B 站：

登录 Bilibili，点击“投稿”，将你的视频教程上传并发布，注意设置为“公开”。
获取视频嵌入代码：
- 视频发布成功后，点击视频下方的“分享”按钮。
- 在弹出的窗口中，找到“嵌入代码”或“复制iframe代码”。
- 复制这段代码，代码看起来类似这样：
```
<iframe src="https://player.bilibili.com/player.html?aid=170001&page=1" scrolling="no" border="0" frameborder="0" framespacing="0" allowfullscreen="true"> </iframe>
```
在 Dedecms 后台发布文章：
- 进入“[核心] -> [内容发布] -> [添加文档]”。
- 填写文章标题、选择栏目等。
- 切换到“[HTML 编辑]”模式。
- 直接将你在 B 站复制的 <iframe> 代码粘贴进去。
- 点击“保存”或“发布”。

这样，你的文章页面上就会嵌入一个功能完整的 B 站播放器。

使用 Dedecms 视频插件/模块

市面上有一些专门为 Dedecms 开发的视频插件，它们通常集成了方案一和方案二的某些功能,并提供了更便捷的管理后台。

优点：

管理方便：可以在 Dedecms 后台直接上传、管理视频。
功能集成：可能自带播放器皮肤、播放列表、广告位等。
体验统一：所有视频都在你的网站域下,品牌更统一。

缺点：

可能需要付费购买：优质的插件通常不是免费的。
技术依赖：插件的质量和兼容性依赖于开发者,可能存在安全风险或停止更新的情况。

操作步骤（通用流程）：

获取插件：从 Dedecms 官方市场、第三方开发者网站或购买渠道获取视频插件。
安装插件：按照插件的说明文档，将插件文件上传到服务器，并在 Dedecms 后台进行安装和启用。
配置插件：进入插件的管理界面，进行一些基础设置，比如上传目录、播放器样式等。
使用插件：插件通常会在“内容发布”或“模块管理”中提供一个新的发布入口，你通过这个入口上传视频，系统会自动生成播放页面或代码,你只需将代码插入到文章中即可。

使用 HTML5 视频播放器插件（增强方案一）

如果你不想用第三方服务，又希望方案一的播放器功能更强大，可以集成一个开源的 HTML5 视频播放器。

优点：

功能强大：提供皮肤、广告、弹幕、播放列表等高级功能。
数据在本地：视频和播放数据都在自己的服务器上。
开源免费：很多优秀的播放器都是免费的。

常用播放器：

DPlayer：一款简洁而强大的 HTML5 视频播放器，支持弹幕、字幕等。
Video.js：非常流行和稳定的视频播放器库,功能全面。

操作步骤（以 DPlayer 为例）：

下载并上传播放器文件：
- 去 DPlayer 的 GitHub 下载最新版本（包含 dplayer.min.js 和 dplayer.min.css）。
- 在你的网站目录下创建一个文件夹，/static/dplayer/,并将这两个文件上传进去。
在文章模板中引入播放器：
- 你需要修改文章内容页的模板文件，通常是 /templets/default/article_article.htm。
- 在 <head> 标签内引入 CSS 文件：
```
<link rel="stylesheet" href="{dede:global.cfg_cmspath/}/static/dplayer/DPlayer.min.css">
```
- 页的底部（</body> 标签前）引入 JS 文件：
```
<script src="{dede:global.cfg_cmspath/}/static/dplayer/DPlayer.min.js"></script>
```
中创建播放器容器：
- 在发布文章时，使用 [HTML 编辑] 模式，插入一个 <div> 作为播放器的容器，并给它一个 id。
```
<div id="dplayer1" style="width: 800px; height: 450px;"></div>
```

初始化播放器：

同样在文章模板的 </body> 标签前，添加初始化脚本：

<script>
const dp = new DPlayer({
container: document.getElementById('dplayer1'),
video: {
    url: '/video/my-tutorial.mp4', // 视频文件路径
    type: 'auto' // 自动检测格式
}
});
</script>

这样，当文章被加载时，就会自动在这个 div 中创建一个功能丰富的 DPlayer 播放器。

总结与建议

方案	优点	缺点	适用场景
直接上传	简单、免费	耗资源、体验差、速度慢	个人博客、内部培训、视频非常小且访问量极低
第三方托管	专业、速度快、功能多	依赖第三方、可能收费	绝大多数网站，特别是商业网站和公开教程
Dedecms 插件	管理方便、集成度高	可能付费、依赖开发者	希望在后台统一管理所有视频，且预算充足
HTML5 播放器	功能强大、数据本地化	需要一定技术能力	不想用第三方，又对播放器功能有较高要求的开发者

给新手的建议：

直接选择【方案二：使用第三方视频托管服务】，特别是 Bilibili 或腾讯云/阿里云点播。 这是最省心、效果最好的方式，能让你专注于内容创作，而不是技术细节，对于大多数教程网站来说,这是行业标准做法。

dedecms如何本地视频教程播放？

直接上传视频到服务器，使用 HTML5 <video> 标签（最简单）

使用第三方视频托管服务（推荐）

使用 Dedecms 视频插件/模块

使用 HTML5 视频播放器插件（增强方案一）

总结与建议

直接上传视频到服务器，使用 HTML5 `<video>` 标签（最简单）