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

因为在某个“大姐姐”网站看到有字幕并且可以下载字幕文件,自此走上了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,后台选择哪个,就修改哪个。)

修改注释:

1、调用第一步下载的文件,域名修改成你自己的(教程里中的地址会随时改变)

  1. "//pan.mals.shop/view/js/subtitles-octopus.js">
  2. 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 支持)

演示图及福利

添加新评论