笨猫博客

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

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

2020-04-07 5187点热度 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
取消回复

最新 热点 随机
最新 热点 随机
过滤iOS烦人的开屏广告18Bit DNS 忘掉“学”英语,开始“接触”英语!一键给你的浏览器装一个“英语环境”生成器 软软一键开关 --提供多个 Windows 系统开关,例如保持常亮、隐藏桌面图标 MoonTV 客户端 v1.0.0 发布! Windows/Office 激活工具HEU KMS Activator v63.0.0 WinRAR7.13中文商业版以及授权文件
忘掉“学”英语,开始“接触”英语!一键给你的浏览器装一个“英语环境”生成器MoonTV 客户端 v1.0.0 发布!软软一键开关 --提供多个 Windows 系统开关,例如保持常亮、隐藏桌面图标过滤iOS烦人的开屏广告18Bit DNS
2022年最新哪吒探针面板搭建教程—服务器状态监控 软路由/openwrt插件ddns-go设置与使用 升级 Chat GPT Plus 最详细教程 港区Apple ID注册流程 QQ邮箱推出在线RSS阅读器,腾讯的下一个赢利点? Sing-box 小白使用订阅教程
最近评论
dk 发布于 4 周前(09月22日) 哈哈哈哈
天天下载Ttzip 发布于 1 个月前(09月15日) 很棒的网站!感谢分享,谢谢站长!!@天天下载Ttzip
诗音 发布于 2 个月前(08月29日) 时间改到2099年在暂停更新也可以
vip券网 发布于 3 个月前(08月01日) 写的很详细,赞 :razz: :evil:
萧瑟 发布于 3 个月前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
标签
elliptictrue100.10.02
BLOG ChatGPT Chrome CloudFlare DirectAdmin github Godaddy google kloxo Linux OneDrive OneIndex PHP QQ shadowsocks SNS ssh Typecho VPS web2.0 whmcs Windows wordpress 一键脚本 下载 免费 博客 图文教程 图标 图片 域名 头像 奥运 宝塔面板 插件 教程 日记 有趣 浏览器 游戏 猫 生活 电影 百度 网站 视频 设计 软件 阿里云盘 音乐
好友
  • glzjin's blog glzjin's blog
  • ZAERA博客
  • 冰沫记
  • 奇它博客
  • 猫腻‘s Blog
  • 猫饭
  • 肥宅之家
  • 萌博
  • 野路子程序员

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

Theme Kratos Made By Seaton Jiang