优化 PIX 主题片刻中的上传视频与B站视频播放窗口
本文是《技术相关(共37篇)》目录的第 31 篇。阅读本文前,建议先阅读本文前3篇文章:
PIX主题发布片刻时,既可以上传视频到自己的服务器然后加以引用,也可以直接填入B站的BV加以引用。发布成功后,发现两个问题:
1、无论是上传的视频还是引用的B站视频,播放窗口高度太小,与宽度不协调;
2、B站视频会自动播放,如果这一页有多个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站视频播放窗口如下:
您已阅读完《技术相关(共37篇)》目录的第 31 篇。请继续阅读本文后3篇文章:
空空如也!