笨猫博客

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

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

2020-04-07 3553点热度 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

笨猫

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

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

最新 热点 随机
最新 热点 随机
手机国内如何登录behance(手机怎么登录国外app) Bitwarden-进入无密码安全方式 Windows XP 激活算法破解,keygen 现在可以在 Linux 上运行 Typecho-handsome主题引入阿里矢量图标库自定义左侧导航栏图标 7-Zip 常用压缩/解压缩命令行指令 BT宝塔面板-登录界面背景美化教程
BT宝塔面板-登录界面背景美化教程Gear浏览器-真正能支持油猴脚本的 iOS 浏览器7-Zip 常用压缩/解压缩命令行指令Typecho-handsome主题引入阿里矢量图标库自定义左侧导航栏图标Windows XP 激活算法破解,keygen 现在可以在 Linux 上运行Bitwarden-进入无密码安全方式
miniMIZE:窗口缩略图工具 安卓v2rayNG:(Android) 新手配置订阅教程 NameSilo小年送厚礼,.com只要5美元 2009年国庆节祝福语— 国庆节快乐! MangaDowner:漫画下载利器 相闻(17xw)——国产互动迷你博客
标签聚合
音乐 OneDrive VPS 有趣 google wordpress 日记 域名
最近评论
samll 发布于 1 周前(05月31日) 大佬 这个也是你的网站 up.upooo.cc
王 发布于 1 周前(05月30日) 这个网站现在好像一次最少充值2美元了,0.2充不了
订单 发布于 2 周前(05月29日) :redface:
订单 发布于 2 周前(05月29日) 可以连续评论
某人 发布于 2 周前(05月24日) 没反应
好友
  • glzjin's blog glzjin's blog
  • ZAERA博客
  • 冰沫记
  • 奇它博客
  • 猫腻‘s Blog
  • 猫饭
  • 肥宅之家
  • 萌博
  • 野路子程序员

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

Theme Kratos Made By Seaton Jiang