OneIndex:显示字幕配置,支持chrome,Firfox

2020-04-07 5405点热度 1人点赞 0条评论

因为在某个“大姐姐”网站看到有字幕并且可以下载字幕文件，自此走上了OneIndex折腾的不归路，中间踩过N多坑，也请教了不少人，最还是靠Google解决了，虽然不算完美

支持字幕格式：VTT/ASS/SSA

OneIndex

项目地址：https://github.com/donwa/oneindex

注：OneIndex修改成功,仅限V3.0版本（最后更新时间：2018.09.04），不保证程序之后更新也能成功。

操作步骤

一、在view文件中新建js文件夹，然后下载

https://github.com/Dador/JavascriptSubtitlesOctopus/tree/master/dist 中的所有JS文件，并放在新建的js文件夹中

二、修改模版文件video5.php（文件在view/material或nexmoe/show，后台选择哪个，就修改哪个。）

这是原代码

<?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复制一份改改就行）

<?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、调用第一步下载的文件，域名修改成你自己的（教程里中的地址会随时改变）

<script src="//pan.mals.shop/view/js/subtitles-octopus.js"></script>
workerUrl: '//pan.mals.shop/view/js/subtitles-octopus-worker.js'

2、这是DPlayer字幕参数配置

subtitle: {
        url: '',
        #字幕位置
        type: 'webvtt',
        #字幕格式
        fontSize: '15px',
        #字幕文字大小
        bottom: '5%',
        #到底视频底部位置
        color: '#ffffff'
        #文字颜色
    }

3、ASS/SSA配置

dp.on('canplay', function () {
    var video = document.getElementsByTagName('video')[0];
    window.SubtitlesOctopusOnLoad = function () {
        var options = {
            video: video,
            subUrl: '',
            #字幕位置
            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（火狐）浏览器中才能显示字幕，卧草……卧草……

因为在其它浏览器中字幕文件会提示

XXXXXXXXXX has been blocked by CORS policy XXXXXXXXXX

解决方法一：

dp.on('canplay',
function() {
fetch('', {
redirect: 'follow'
}).then(function(response) {
return response.text();
}).then(function(text) {
var video = document.getElementsByTagName('video')[0];
window.SubtitlesOctopusOnLoad = function() {
var options = {
video: video,
// subUrl: '',
subContent: text,
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: '/subtitles-octopus-worker.js'
};
window.octopusInstance = new SubtitlesOctopus(options);
};
if (SubtitlesOctopus) {
SubtitlesOctopusOnLoad();
}
});
});

方法二：

Chrome浏览器安装插件 allow-control-allow-origi 或 access-control-allow-origin（推荐），安装之后开启插件就可以正常显示字幕了。

Onedrive developer 给出的解决方法：

在 JavaScript 应用中使用 OneDrive API（CORS 支持）

演示图及福利