笨猫博客

  • 🍟首页
  • 🍘目录
    • 🥝VPS教程
    • 🍾猫玩技术
    • 🍹干货分享
    • 🍏软件分享
    • 🍩一只猫
  • 🍋工具
    • 🌽IP路由追踪
    • 🍐域名Whois查询
    • 🥘域名被墙查询
    • 🍧IP正常检测
    • 🔥IP端口检测
    • 🍆短网址
    • 🐟VIP音乐播放
    • 🍯KMS激活
  • 🍓链接
  • 🍪联系
  • 🍱登录
    • 🥦登录
    • 🍒注册
关注互联网,生活,音乐,乐此不疲的一只笨猫
  1. 首页
  2. 猫玩技术
  3. 正文

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

2020-04-07 3264点热度 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,后台选择哪个,就修改哪个。)

这是原代码

  1. <?php view::layout('layout')?>
  2. <?php
  3. $item['thumb'] = onedrive::thumbnail($item['path']);
  4. ?>
  5. <?php view::begin('content');?>
  6. <div class="mdui-container-fluid">
  7.     <br>
  8.     <video class="mdui-video-fluid mdui-center" preload controls poster="<?php @e($item['thumb']);?>">
  9.       <source src="<?php e($item['downloadUrl']);?>" type="video/mp4">
  10.     </video>
  11.     <br>
  12.     <!-- 固定标签 -->
  13.     <div class="mdui-textfield">
  14.       <label class="mdui-textfield-label">下载地址</label>
  15.       <input class="mdui-textfield-input" type="text" value="<?php e($url);?>"/>
  16.     </div>
  17.     <div class="mdui-textfield">
  18.       <label class="mdui-textfield-label">引用地址</label>
  19.       <textarea class="mdui-textfield-input"><video><source src="<?php e($url);?>" type="video/mp4"></video></textarea>
  20.     </div>
  21. </div>
  22. <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>
  23. <?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、调用第一步下载的文件,域名修改成你自己的(教程里中的地址会随时改变)

  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: '',
        #字幕位置
        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 支持)

演示图及福利

标签: OneIndex 显示字幕
最后更新:2020-04-05

笨猫

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
ssh无需密码登陆(使用密钥对) 利用rsync进行远程同步实现异地备份 中国科幻巨制《流浪地球2》 Chrome修复被2345劫持篡改的主页 GTA6预告片内容泄露:女主在监狱里锻炼身体 《星期三》第二季将有更多亚当斯一家的内容
ssh无需密码登陆(使用密钥对)利用rsync进行远程同步实现异地备份中国科幻巨制《流浪地球2》SuperForum:轻量的论坛程序《星期三》第二季将有更多亚当斯一家的内容GTA6预告片内容泄露:女主在监狱里锻炼身体
OneList(OneDrive的简单目录索引) iPhone 1.1.2 OTB 已经被破解 AList :一款阿里云盘目录列表程序 对Whmcs+Kloxo自动开通SSH的补充 道道:旅游垂直媒体TripAdvisor发布中文站 迭代更新:$$+$$R多版本一键脚本
标签聚合
有趣 wordpress OneDrive 域名 音乐 日记 google VPS
最近评论
人格 发布于 1 天前(02月06日) 怎么删除不要的订阅号和节点
人格 发布于 1 天前(02月06日) 怎么删除不要的订阅号和节点
神秘的星空smf 发布于 1 天前(02月05日) 文章很好!赞!
笨猫 发布于 1 周前(01月28日) q:94-0360231
T 发布于 2 周前(01月24日) 应该是直接从原服务器下载的,这只是个接口
好友
  • glzjin's blog glzjin's blog
  • ZAERA博客
  • 冰沫记
  • 博客导航
  • 奇它博客
  • 彩虹Smiling的Blog
  • 热闹网
  • 猫腻‘s Blog
  • 猫饭
  • 肥宅之家
  • 萌博
  • 野路子程序员

COPYRIGHT © 2022 笨猫博客. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang