（原创）OneIndex显示字幕配置<不完美版>

2018-09-06 11784点热度 9人点赞 25条评论

因为在某个“大姐姐”网站看到有字幕并且可以下载字幕文件，自此走上了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');?>

<?php view::layout('layout')?>

<?php

$item['thumb'] = onedrive::thumbnail($item['path']);

<?php view::begin('content');?>

<br>

<source src="<?php e($item['downloadUrl']);?>" type="video/mp4">

</video>

<br>

</div>

<textarea class="mdui-textfield-input"><video><source src="<?php e($url);?>" type="video/mp4"></video></textarea>

</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');?>

<?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');?>

</div>

<textarea class="mdui-textfield-input"><video><source src="<?php e($url);?>" type="video/mp4"></video></textarea>

</div>

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、<script src="//pan.mals.shop/view/js/subtitles-octopus.js"></script>
2、workerUrl: '//pan.mals.shop/view/js/subtitles-octopus-worker.js'

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字幕参数配置

      subtitle: {
        url: '<?php $urlparts = pathinfo($url); e($urlparts['dirname'].'/'.$urlparts['filename'].'.vtt');?>',
        #字幕位置
        type: 'webvtt',
        #字幕格式
        fontSize: '15px',
        #字幕文字大小
        bottom: '5%',
        #到底视频底部位置
        color: '#ffffff'
        #文字颜色
    }

subtitle: {

url: '<?php $urlparts = pathinfo($url); e($urlparts['dirname'].'/'.$urlparts['filename'].'.vtt');?>',

#字幕位置

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: '<?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();
   }
})

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');?>',

#字幕位置

#引用字体

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

1	XXXXXXXXXX has been blocked by CORS policy XXXXXXXXXX

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

Onedrive developer 给出的解决方法：

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

演示图及福利

本文部分代码来源自：https://github.com/sffxzzp/oneindex

本作品采用知识共享署名 4.0 国际许可协议进行许可

文章评论

abcaaa

同问onemanager能实现吗

2021-03-24

六度

@abcaaa 应该是可以的，主要是修改播放器那一块。

2021-03-25

回复

yuban

OneManager能实现吗？

2020-12-24

六度

@yuban 不清楚，没研究过OneManager

2020-12-25

回复

xxxxx

把部分代码改成这样就可以直接在Chrome浏览器中加载字幕, 而不必安装插件
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();
}
});
});