Discuz!如何实现视频连续播放功能？

admin · 发表于昨天 14:15

在Discuz!论坛中实现视频连续播放功能，可以通过以下几种方法来实现：

1. 使用JavaScript和HTML

你可以通过编写JavaScript代码来控制视频播放的顺序。例如，当第一个视频播放完毕时，自动加载并播放下一个视频。

示例代码：


<video id="video1" src="video1.mp4" onended="nextVideo()">video>
<video id="video2" src="video2.mp4" style="display:none;">video>
 
<script>
function nextVideo() {
    document.getElementById('video1').style.display = 'none';
    document.getElementById('video2').style.display = 'block';
    document.getElementById('video2').play();
}
script>

2. 使用视频播放列表插件

一些视频播放插件（如Video.js、plyr等）支持播放列表功能，你可以利用这些插件来实现视频连续播放。

示例（使用Video.js）：

首先，引入Video.js库：


<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.js">script>

然后，使用Video.js创建播放器并设置播放列表：


<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
    <source src="video1.mp4" type="video/mp4">
    <source src="video2.mp4" type="video/mp4">
video>
 
<script>
var player = videojs('my-video');
player.playlist([
    { sources: [{ src: 'video1.mp4', type: 'video/mp4' }] },
    { sources: [{ src: 'video2.mp4', type: 'video/mp4' }] }
]);
player.play();
script>

3. 使用服务器端脚本控制视频列表

如果你有服务器端脚本的权限，可以在服务器端设置一个视频列表，并通过AJAX或直接在页面加载时请求这个列表，然后使

用JavaScript动态加载和播

放视频。

示例（使用PHP和JavaScript）：

服务器端（PHP）：


$videos = ['video1.mp4', 'video2.mp4']; // 视频列表数组
echo json_encode($videos); // 输出JSON格式的视频列表
?>

客户端（JavaScript）：


<script>
fetch('path_to_your_php_script.php') // 获取视频列表的API路径
    .then(response => response.json())
    .then(videos => {
        let currentVideoIndex = 0; // 当前视频索引
        const videoElement = document.createElement('video'); // 创建video元素
        videoElement.controls = true; // 显示控制条
        document.body.appendChild(videoElement); // 将video元素添加到body中
        function playNextVideo() {
            if (currentVideoIndex < videos.length) {
                videoElement.src = videos[currentVideoIndex]; // 设置视频源
                videoElement.onended = playNextVideo; // 视频结束时播放下一个视频
                videoElement.play(); // 播放当前视频
                currentVideoIndex++; // 增加视频索引
            } else {
                videoElement.pause(); // 所有视频播放完毕，暂停视频播放
            }
        }
        playNextVideo(); // 开始播放第一个视频
    });
script>

以上方法可以根据你的具体需求和论坛环境选择使用。如果使用的是Discuz!的自定义模板或插件开发环境，建议优先考虑使

用插件或库来简化开发过

程。

admin · 发表于昨天 14:39

要在Discuz!论坛中实现视频连续播放功能，可以通过以下步骤进行操作

1

：

打开Discuz论坛后台，在界面模块找到编辑器设置。我们可以模仿QQ标签的参数设置，来设置一下video的。然后点击保存即可。查看第一张图，记得勾选“可见”和“可用”两个多选框，还有编辑时权限的选择，否则看不到的。
点击附件，将视频文件上传到论坛服务器。
选择视频文件后，点击上传。
附件上传成功后，将会在文件名后有一个链接地址按钮，并点击。会在编辑器中插入一条attach://xx.mp4的字样。
选中attach://xx.mp4的字样，点击工具栏中视频实时展示按钮，填入视频展示大小。
点击保存即可，看到视频播放效果。如果在第三步骤时找不到视频链接地址，请到管理后台进行设置开启，上传设置-论坛附件-开启附件url地址。

以上就是在Discuz!论坛中实现视频连续播放功能的方法。请注意，视频只支持MP4文件格式，如果无法播放可点击视频插件中的下载按钮进行下载，利用本地高性能播放器播放。视频过大可能会导致视频播放加载缓慢，请耐心等待。