苹果cms播放类表想换个横的(苹果cmsv10源码下载)

介绍

苹果cms是一款优秀的视频网站建站系统，自带的播放器功能非常强大，但是默认是竖向的播放列表，对于一些需要展示更多视频的网站来说，横向的播放列表更加适合。本文将介绍如何将苹果cms的播放列表改为横向的。

更改播放列表样式

我们需要找到苹果cms的播放器样式文件，一般是在“/template/default/player/player.css”中。在该文件中，我们可以找到以下代码：

.player-playlist {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;z-index: 9999;}

可以看到，播放列表是绝对定位的，并且宽度为100%，高度为100%。我们需要将其改为横向排列，可以使用以下代码：

.player-playlist {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;z-index: 9999;display: flex;flex-direction: row;}

加入了“display: flex;”和“flex-direction: row;”两个属性，使得播放列表变成了横向排列。

调整播放列表宽度

由于横向排列的播放列表会占据更多的宽度，因此我们需要将其宽度适当调整。可以在“/template/default/player/player.css”文件中找到以下代码：

.player-playlist .playlist-list {width: 200px;float: left;margin-right: 20px;}

可以看到，播放列表的宽度是固定的，为200px。我们可以将其改为一个百分比，使得播放列表的宽度可以根据屏幕大小自适应。例如：

.player-playlist .playlist-list {width: 30%;float: left;margin-right: 20px;}

这里将宽度改为了30%。

调整播放器宽度

由于播放列表变成了横向排列，播放器的宽度也需要相应调整。可以在“/template/default/player/player.css”文件中找到以下代码：

.player-player {position: relative;width: 100%;height: 100%;}

可以看到，播放器的宽度也是100%。我们可以将其改为一个百分比，并且减去播放列表的宽度，例如：

.player-player {position: relative;width: 70%;height: 100%;}

这里将宽度改为了70%，减去了播放列表的宽度。

调整播放器高度

由于播放列表变成了横向排列，播放器的高度也需要相应调整。可以在“/template/default/player/player.css”文件中找到以下代码：

.player-player video {max-width: 100%;max-height: 100%;margin: auto;display: block;}

可以看到，播放器的高度是自适应的，因此我们只需要调整播放器所在的容器高度即可。可以在“/template/default/player/player.html”文件中找到以下代码：

可以看到，播放器所在的容器是“div”标签，我们可以将其高度设置为一个固定的值，例如：

这里将容器高度设置为了500px。

调整播放列表样式

由于播放列表变成了横向排列，播放列表的样式也需要相应调整。可以在“/template/default/player/player.css”文件中找到以下代码：

.player-playlist .playlist-list li {padding: 10px;border-bottom: 1px solid #eee;}

可以看到，播放列表每个视频的样式是固定的，我们可以将其改为一个更加适合横向排列的样式，例如：

.player-playlist .playlist-list li {padding: 10px;border-right: 1px solid #eee;display: inline-block;}

这里将边框改为了右边框，并且将每个视频的样式改为了“display: inline-block;”。

调整播放列表滚动条样式

由于播放列表变成了横向排列，播放列表的滚动条样式也需要相应调整。可以在“/template/default/player/player.css”文件中找到以下代码：

.player-playlist::-webkit-scrollbar {height: 5px;background-color: #f5f5f5;}.player-playlist::-webkit-scrollbar-thumb {background-color: #000;}

可以看到，滚动条的样式是固定的，我们可以将其改为一个更加适合横向排列的样式，例如：

.player-playlist::-webkit-scrollbar {height: 5px;background-color: #f5f5f5;}.player-playlist::-webkit-scrollbar-thumb {background-color: #000;}.player-playlist::-webkit-scrollbar-track {background-color: #f5f5f5;}

这里将滚动条的宽度去掉了，并且增加了滚动条的轨道样式。

调整播放列表点击事件

由于播放列表变成了横向排列，播放列表的点击事件也需要相应调整。可以在“/template/default/player/player.js”文件中找到以下代码：

$playlistList.on('click', 'li', function () {var index = $(this).index();playVideo(index);});

可以看到，播放列表的点击事件是根据“li”标签的索引来播放视频的，但是在横向排列的播放列表中，我们需要根据“li”标签的位置来播放视频。我们可以将代码改为：

$playlistList.on('click', 'li', function () {var index = $(this).prevAll().length;playVideo(index);});

这里使用了“prevAll()”方法来获取当前“li”标签之前的所有兄弟元素的数量，从而得到当前“li”标签的位置。

调整播放列表自动滚动

由于播放列表变成了横向排列，播放列表的自动滚动也需要相应调整。可以在“/template/default/player/player.js”文件中找到以下代码：

if (playlistWidth > $playlistList.width()) {var scrollInterval = setInterval(function () {$playlistList.scrollLeft($playlistList.scrollLeft() + 1);if ($playlistList.scrollLeft() >= playlistWidth - $playlistList.width()) {$playlistList.scrollLeft(0);}}, 30);}

可以看到，自动滚动的代码是根据播放列表的宽度和“scrollLeft()”方法来实现的。但是在横向排列的播放列表中，我们需要根据播放列表的高度和“scrollTop()”方法来实现自动滚动。我们可以将代码改为：

if (playlistHeight > $playlistList.height()) {var scrollInterval = setInterval(function () {$playlistList.scrollTop($playlistList.scrollTop() + 1);if ($playlistList.scrollTop() >= playlistHeight - $playlistList.height()) {$playlistList.scrollTop(0);}}, 30);}

这里使用了“scrollTop()”方法来实现自动滚动，并且将判断条件改为了播放列表的高度。