优化 PIX 主题片刻中的上传视频与 B 站视频播放窗口

PIX 主题发布片刻时,既可以上传视频到自己的服务器然后加以引用,也可以直接填入 B 站的 BV 加以引用。发布成功后,发现两个问题:

1 、无论是上传的视频还是引用的 B 站视频,播放窗口高度太小,与宽度不协调;

2 、 B 站视频会自动播放,如果这一页有多个 B 站视频,会同时播放。

优化 PIX 主题片刻中的上传视频与B站视频播放窗口-似水流年

于是想着改造一下:

1 、自己上传服务器的视频:

修改 pix/inc/assets/css/main.css 文件,找到

.pix_local_player {
    max-width: 400px;
    width: 100%;
    margin-top: 10px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

把括号内第 1 行的 400px 修改为 500px 即可。

2 、引用的 B 站视频:

修改同样的 main.css 文件,大概在上面代码的下方第三段,即

.pix_bili_player {
    position: relative;
    height: 0;
    padding-top: 45%;
    max-width: 400px;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

把括号内第 4 行的 400px 修改为 500px 。

修改 pix/inc/pix-type.php,大概 631 行找到

$html = '<div class="pix_bili_player"><iframe src="//player.bilibili.com/player.html?bvid='.$bvid.'&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" > </iframe></div>';

修改为:

$html = '<div class="pix_bili_player"><iframe src="//player.bilibili.com/player.html?bvid='.$bvid.'&page=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width:500px;height:100%;"> </iframe></div>';

这个一是配合 CSS 将宽度固定为 500px,高度自适应,二是加入了 autoplay=0,禁止 B 站视频自动播放。

清除缓存结束。

修改后上传视频和 B 站视频播放窗口如下:

优化 PIX 主题片刻中的上传视频与B站视频播放窗口-似水流年
优化 PIX 主题片刻中的上传视频与B站视频播放窗口-似水流年
消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新 10 条未读和已读信息