苹果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”文件中找到以下代码：
1. 本站所有资源来源于用户上传或网络，仅作为参考研究使用，如有侵权请邮件联系站长！
2. 本站积分货币获取途径以及用途的解读，想在本站混的好，请务必认真阅读！
3. 本站强烈打击盗版/破解等有损他人权益和违法作为，请各位会员支持正版！
4. 建站教程 > 苹果CMS播放类表想换个横的，苹果CMSv10源码下载
