discuz网页播放器代码大全-网页设计-锦华智联科技

重要声明：

代码安全：在您的论坛上插入任何自定义代码（尤其是来自第三方的）都存在潜在的安全风险，请务必从可信来源获取代码，并在本地测试环境充分测试后再部署到生产服务器。
Discuz! 版本：以下代码示例主要基于 Discuz! X 系列的最新版本，对于较老的版本（如 7.x）,可能需要做相应调整。
模板修改：修改模板文件前，强烈建议先备份原始文件,以防出错后无法恢复。


官方推荐 - 优酷/土豆等视频网站嵌入代码
这是最简单、最直接的方法，适用于各大主流视频网站（优酷、腾讯视频、爱奇艺、Bilibili、YouTube 等），它们通常提供“分享” -> “嵌入”功能。
（图片来源网络，侵删）
通用代码格式：
<iframe 
    src="视频网站提供的嵌入URL" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>
具体示例：


Bilibili (B站)
在视频页面点击“分享” -> “嵌入”,会生成如下代码：
<iframe 
    src="//player.bilibili.com/player.html?bvid=BV1xx411c7mu&page=1" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true">
</iframe>


YouTube
在视频页面点击“分享” -> “嵌入”,会生成如下代码：
（图片来源网络，侵删）
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>


优酷
在视频页面点击“分享” -> “嵌入”,会生成如下代码：
<iframe 
    height="498" 
    width="510" 
    frameborder="0" 
    allowfullscreen="true" 
    src="https://player.youku.com/embed/XNDIwMzI4NjQwMA==">
</iframe>


如何使用：
在发帖或编辑帖子时，切换到“源代码”模式,然后将上述代码粘贴进去即可。

HTML5 视频播放器 (最灵活、推荐)
这种方法允许您直接在自己的服务器上托管视频文件，或者使用任何视频流链接,实现完全的控制。
1 使用原生 <video>

HTML5 自带了 <video> 标签，无需任何 JavaScript 即可创建一个功能齐全的播放器。
（图片来源网络，侵删）
基础代码：
<video width="800" height="450" controls>
    <source src="/path/to/your/video.mp4" type="video/mp4">
    <source src="/path/to/your/video.webm" type="video/webm">
    <source src="/path/to/your/video.ogv" type="video/ogg">
    您的浏览器不支持 HTML5 视频标签。
</video>
代码解析：

width 和 height：设置播放器的宽度和高度。
controls：显示播放器控件（播放/暂停、进度条、音量等）。
<source>：指定视频源，提供多种格式（如 mp4, webm, ogg）是一种很好的兼容性策略,浏览器会使用它支持的第一种格式。
type：告诉浏览器文件的 MIME 类型,有助于浏览器快速选择。
标签内的文本：在不支持 HTML5 视频的浏览器中显示。

进阶属性：
<video 
    width="100%" 
    height="auto" 
    controls 
    autoplay 
    muted 
    loop 
    poster="/path/to/poster.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

autoplay：视频自动播放。（注意：现代浏览器通常要求 muted 配合才能自动播放）
muted：视频静音。
loop：视频播放结束后自动重新开始。
poster：视频加载或播放前显示的封面图片。
width="100%" height="auto"：实现响应式宽度,高度自适应。

2 使用 JavaScript 播放器库 (Video.js, Plyr)
原生 <video> 标签的样式在不同浏览器中可能不一致，使用 JavaScript 库可以创建一个美观、功能统一且高度可定制的播放器。
这里以 Plyr 为例，因为它轻量、现代且易于使用。
步骤 1：引入 Plyr 的 CSS 和 JS 文件
您可以通过 CDN 或下载到本地服务器来引入，这里使用 CDN。
<!-- Plyr CSS -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<!-- Plyr JS -->
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
步骤 2：创建 HTML 结构
<!-- Plyr 的核心是一个带有 data-plyr-provider 属性的 video 标签 -->
<video id="player" controls crossorigin>
    <!-- 字幕轨道 -->
    <track kind="captions" label="English" srclang="en" src="path/to/captions.vtt" default>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持 HTML5 视频。
</video>
步骤 3：初始化 Plyr
在 <video> 标签后，添加以下 JavaScript 代码来初始化播放器。
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const player = new Plyr('#player');
    });
</script>
完整 Plyr 示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Plyr 播放器示例</title>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        video { max-width: 100%; }
    </style>
</head>
<body>
    <h1>Discuz! Plyr 播放器示例</h1>
    <video id="player" controls>
        <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 视频。
    </video>
    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const player = new Plyr('#player');
        });
    </script>
</body>
</html>

第三方 Discuz! 播放器插件
如果您不希望手动修改代码，或者需要更强大的功能（如广告、多皮肤、统计等）,可以使用专门的插件。
如何寻找插件：

Discuz! 官方应用中心：访问 discuz.com 的应用中心，搜索“播放器”、“视频”等关键词。
Discuz! 插件发布区：在 Discuz! 官方论坛的插件版块,有大量开发者发布和讨论插件。
第三方 Discuz! 服务网站：一些专门提供 Discuz! 技术支持的网站也会提供付费或免费的播放器插件。

插件优点：

安装简单：通常通过后台“插件” -> “导入安装”即可。
功能强大：可能包含视频转换、防盗链、多皮肤、数据分析等高级功能。
无需修改模板：大部分插件是“无痕”集成,自动替换帖子中的视频链接。

插件缺点：

可能需要付费。
更新维护依赖作者。
可能存在兼容性问题或安全后门。


代码通用技巧与注意事项
如何在帖子中播放
这是最常见的需求。

进入后台：全局 -> 帖子 -> 发帖相关设置。
允许 HTML：确保 允许使用 Discuz! 代码 和 允许使用 HTML 代码 是开启的。注意：开启 HTML 代码有安全风险，请确保您的论坛管理严格。
发帖：在编辑帖子时，切换到“源代码”模式，然后将您准备好的播放器代码（如方法一或方法二中的代码）粘贴进去。
保存：发布帖子,您就可以看到播放器了。

如何在自定义页面或首页播放
您可以直接修改 Discuz! 的模板文件。

进入后台：全局 -> 界面 -> 风格管理 -> 选择您的风格 -> 编辑模板。
选择模板文件：
首页：编辑 index.htm。
自定义页面：编辑 portal/portalcp.htm（用于创建页面），然后在创建页面时选择“允许 HTML 代码”。


插入代码：在您希望播放器出现的位置（index.htm 的某个 div 内）,粘贴您的播放器代码。
保存并更新缓存：保存模板文件后，到 全局 -> 更新缓存 刷新一下。

响应式设计
为了让您的播放器在不同设备（PC、平板、手机）上都有良好的体验,建议使用响应式设计。

固定宽度：width="800" - 不推荐,在小屏幕上会溢出。
响应式宽度：width="100%" height="auto" - 推荐！这会让播放器宽度填满其容器,高度按比例自动调整。

在 Discuz! 帖子中实现响应式播放器：
通常被包裹在一个固定宽度的 div 中，直接设置 width="100%" 即可，但如果要确保在论坛的任何地方都完美适配，可以加上一些 CSS。
示例代码（结合 Plyr 和响应式 CSS）：
<style>
    .responsive-video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 宽高比 */
        height: 0;
        overflow: hidden;
        max-width: 100%;
    }
    .responsive-video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div class="responsive-video-container">
    <video id="player" controls>
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const player = new Plyr('#player');
    });
</script>
这段 CSS 通过 padding-bottom 的技巧来强制一个 16:9 的宽高比，确保视频不会被拉伸，width: 100% 保证其响应式。
discuz网页播放器代码大全

重要声明：

目录

官方推荐 - 优酷/土豆等视频网站嵌入代码

HTML5 视频播放器 (最灵活、推荐)

1 使用原生 `<video>`

2 使用 JavaScript 播放器库 (Video.js, Plyr)

第三方 Discuz! 播放器插件

代码通用技巧与注意事项

如何在帖子中播放

如何在自定义页面或首页播放

响应式设计
