立即注册

Amituforum 无量觉社区



会员专区切换至【手机版】

切换本帖至【手机版】


[复制链接]
Discuz!如何实现视频连续播放功能?
https://www.amitufo.net/bbs/thread-581396-1-1.html

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!论坛中实现视频连续播放功能,可以通过以下步骤进行操作

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

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


回复

使用道具 举报

游客
回复
您需要登录后才可以回帖 登录 | 立即注册

欢迎登陆论坛,还有福利等您哦!
X

Archiver|手机版|小黑屋| Amituforum 无量觉社区

JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!

GMT+8, 2025-6-15 19:54 , Processed in 0.047012 second(s), 26 queries .

南无阿弥陀佛

© 无量寿 无量觉 Amituforum

快速回复 返回顶部 返回列表