支持字幕格式：VTT/ASS/SSA
OneIndex
项目地址：https://github.com/donwa/oneindex
注：OneIndex修改成功,仅限V3.0版本（最后更新时间：2018.09.04），不保证程序之后更新也能成功。
操作步骤
一、在view文件中新建js文件夹，然后下载https://github.com/Dador/JavascriptSubtitlesOctopus/tree/master/js/asmjs 中的四个文件，并放在新建的js文件夹中
二、修改模版文件video5.php（文件在view/material或nexmoe/show，后台选择哪个，就修改哪个。）
这是原代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<?php view::layout(‘layout’)?>
<?php
$item[‘thumb’] = onedrive::thumbnail($item[‘path’]);
?>
<?php view::begin(‘content’);?>
<div class=“mdui-container-fluid”>
<br>
<video class=“mdui-video-fluid mdui-center” preload controls poster=“<?php @e($item[‘thumb’]);?>“>
<source src=“<?php e($item[‘downloadUrl’]);?>“ type=“video/mp4”>
</video>
<br>
<!— 固定标签 —>
<div class=“mdui-textfield”>
<label class=“mdui-textfield-label”>下载地址</label>
<input class=“mdui-textfield-input” type=“text” value=“<?php e($url);?>“/>
</div>
<div class=“mdui-textfield”>
<label class=“mdui-textfield-label”>引用地址</label>
<textarea class=“mdui-textfield-input”><video><source src=“<?php e($url);?>“ type=“video/mp4”></video></textarea>
</div>
</div>
<a href=“<?php e($url);?>“ class=“mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent”><i class=“mdui-icon material-icons”>file_download</i></a>
<?php view::end(‘content’);?>
|
修改后的文件（把video2.php复制一份改改就行）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<?php view::layout(‘layout’)?>
<?php
//仅支持教育版和企业版
if(strpos($item[‘downloadUrl’],“sharepoint.com”) == false){
header(‘Location: ‘.$item[‘downloadUrl’]);exit();
}
$item[‘thumb’] = onedrive::thumbnail($item[‘path’]);
$mpd = str_replace(“thumbnail”,“videomanifest”,$item[‘thumb’]).“&part=index&format=dash&useScf=True&pretranscode=0&transcodeahead=0”;
?>
<?php view::begin(‘content’);?>
<link class=“dplayer-css” rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css”>
<script src=“https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js”></script>
<script src=“https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js”></script>
<script src=“//pan.mals.shop/view/js/subtitles-octopus.js”></script>
<div class=“mdui-container-fluid”>
<div class=“nexmoe-item”>
<div class=“mdui-center” id=“dplayer”></div>
<!— 固定标签 —>
<div class=“mdui-textfield”>
<label class=“mdui-textfield-label”>下载地址</label>
<input class=“mdui-textfield-input” type=“text” value=“<?php e($url);?>“/>
</div>
<div class=“mdui-textfield”>
<label class=“mdui-textfield-label”>引用地址</label>
<textarea class=“mdui-textfield-input”><video><source src=“<?php e($url);?>“ type=“video/mp4”></video></textarea>
</div>
</div>
<script>
const dp = new DPlayer({
container: document.getElementById(‘dplayer’),
lang:‘zh-cn’,
video: {
url: ‘<?php e($item[‘downloadUrl‘]);?>’,
pic: ‘<?php @e($item[‘thumb‘]);?>’,
type: ‘auto’
},
subtitle: {
url: ‘<?php $urlparts = pathinfo($url); e($urlparts[‘dirname‘].’/‘.$urlparts[‘filename‘].’.vtt‘);?>’,
type: ‘webvtt’,
fontSize: ’15px’,
bottom: ‘5%’,
color: ‘#ffffff’
}
});
dp.on(‘canplay’, function () {
var video = document.getElementsByTagName(‘video’)[0];
window.SubtitlesOctopusOnLoad = function () {
var options = {
video: video,
subUrl: ‘<?php $urlparts = pathinfo($url); e($urlparts[‘dirname‘].’/‘.$urlparts[‘filename‘].’.ass‘);?>’,
fonts: [“//gapis.geekzu.org/g-fonts/ea/notosanssc/v1/NotoSansSC-Regular.otf”, “//gapis.geekzu.org/g-fonts/ea/notosanstc/v1/NotoSansTC-Regular.otf”, “//gapis.geekzu.org/g-fonts/ea/notosansjapanese/v6/NotoSansJP-Regular.otf”],
workerUrl: ‘//pan.mals.shop/view/js/subtitles-octopus-worker.js’
};
window.octopusInstance = new SubtitlesOctopus(options);
};
if (SubtitlesOctopus) {
SubtitlesOctopusOnLoad();
}
})
</script>
<a href=“<?php e($url);?>“ class=“mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent”><i class=“mdui-icon material-icons”>file_download</i></a>
<?php view::end(‘content’);?>
|
修改注释：
1、调用第一步下载的文件，域名修改成你自己的（教程里中的地址会随时改变）
|
1
2
|
1、<script src=“//pan.mals.shop/view/js/subtitles-octopus.js”></script>
2、workerUrl: ‘//pan.mals.shop/view/js/subtitles-octopus-worker.js’
|
2、这是DPlayer字幕参数配置
|
1
2
3
4
5
6
7
8
9
10
11
12
|
subtitle: {
url: ‘<?php $urlparts = pathinfo($url); e($urlparts[‘dirname’].‘/’.$urlparts[‘filename’].‘.vtt’);?>‘,
#字幕位置
type: ‘webvtt’,
#字幕格式
fontSize: ’15px’,
#字幕文字大小
bottom: ‘5%’,
#到底视频底部位置
color: ‘#ffffff’
#文字颜色
}
|
3、ASS/SSA配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
dp.on(‘canplay’, function () {
var video = document.getElementsByTagName(‘video’)[0];
window.SubtitlesOctopusOnLoad = function () {
var options = {
video: video,
subUrl: ‘<?php $urlparts = pathinfo($url); e($urlparts[‘dirname’].‘/’.$urlparts[‘filename’].‘.ass’);?>‘,
#字幕位置
fonts: [“//gapis.geekzu.org/g-fonts/ea/notosanssc/v1/NotoSansSC-Regular.otf”, “//gapis.geekzu.org/g-fonts/ea/notosanstc/v1/NotoSansTC-Regular.otf”, “//gapis.geekzu.org/g-fonts/ea/notosansjapanese/v6/NotoSansJP-Regular.otf”],
#引用字体
workerUrl: ‘//pan.mals.shop/view/js/subtitles-octopus-worker.js’
};
window.octopusInstance = new SubtitlesOctopus(options);
};
if (SubtitlesOctopus) {
SubtitlesOctopusOnLoad();
}
})
|
好了，教程到此结束。
重要的事说三遍：
字幕文件名字一定要和视频名字一致。
字幕文件名字一定要和视频名字一致。
字幕文件名字一定要和视频名字一致。
但是，到这里只能在Firfox（火狐）浏览器中才能显示字幕，卧草……卧草……
因为在其它浏览器中字幕文件会提示
|
1
|
XXXXXXXXXX has been blocked by CORS policy XXXXXXXXXX
|
解决方法：Chrome浏览器安装插件 allow-control-allow-origi 或 access-control-allow-origin（推荐），安装之后开启插件就可以正常显示字幕了。
Onedrive developer 给出的解决方法：
