在服务器部署Wordpress
用Docker部署Pantheon
Wordpress数据库
PHP/HTML/JS联动
需求：
1.播放列表自动更新UP上传的视频，不需要手动添加链接。
2.实现视频切换。
1 播放器
需求：添加播放器
bilibili 提供的iframe代码
1
2
<!-- html -->
<iframe src="//player.bilibili.com/player.html?aid=56315372&bvid=BV1h441137Uc&cid=99753609&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
- 在src后加上 &high_quality=1 可以切换视频清晰度，但目前好像被限制在720P。
- 添加 宽度和高度 参数 width=”100%” height=”500px”， 调整合适的单位。
- aid/bvid/cid 满足一个即可
2 获取视频信息
需求：获取指定UID用户 个人主页 - 投稿 - TA的视频 页面下的视频。
通过Javascript或PHP，使用以下API，返回JSON。JSON中有视频aid，封面图，简介，标题等信息。
1
https://api.bilibili.com/x/space/arc/search?mid=UID
例如使用PHP curl：
1
2
3
4
5
6
7
8
9
// php
$a = "https://api.bilibili.com/x/space/arc/search?mid=8047632";
$ch = curl_init($a);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)');
$f = curl_exec($ch);
$obj = json_decode($f);
$vlist = $obj->{'data'}->{'list'}->{'vlist'};
PHP获取信息后可以存入SQL，或者通过Wordpress的shortcut 插件 (XYZ PHP Code)直接echo字符串类string给Javascript或者Html。
3 更新播放窗口
需求：在播放器中播放指定视频/最新视频
- <iframe>外的<div> 添加id，以便Javascript获取
- 返回JSON后，通过Javascript, 替换html中整个iframe。*(如果是给iframe添加id，并替换src，有可能不能更新视频内容)
1
2
3
4
5
6
7
8
9
10
11
12
13
// javascript
// get json
// ...
// get new information
var current_aid = aids[i];
var current_title = titles[i]
// set link
var prefix = "https://player.bilibili.com/player.html?aid=";
var suffix = "&page=1&high_quality=1";
var loc = prefix.concat(current_aid).concat(suffix);
// update
document.getElementById('videoTitle').innerHTML = current_title;
document.getElementById('videoFrame').innerHTML = '<iframe src="'+loc+'" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="auto" align="middle"></iframe>';
可以在刷新页面时，或者onclick的时候调用。
4 设置播放列表
需求：
- 通过JSON得到所有的视频封面图，用于制作播放列表。
- 点击列表中的视频，激活onclick事件，执行3中的过程。
- 图片需要在html中添加 才能正常显示
1
2
<!-- html -->
<meta name="referrer" content="never">
- 设置一个有id的<div>
- 在Javascript中，用for循环在<div>中添加图片并设置标题和链接。
1
2
3
4
5
6
// javascript
var videos = '';
for (var i = 0; i < all_aids.length-1; i++) {
videos +='<div ><a href="javascript:changeVideo('+i+');"><img src=" '+ pics[i]+'"/><h3> '+titles[i]+'</h3></a></div><hr>';
}
document.getElementById("videoWrapper").innerHTML = videos;