笨猫博客

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

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

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

最新 热点 随机
最新 热点 随机
情侣飞行棋:比吵架有趣,比看剧更亲密 Windows11美化方案教程 简洁、纯HTML导航项目:XG-NAV(开源) outlook邮箱安全修改方案,让你的邮箱安全无忧 Docker容器一键全自动迁移脚本 永久免费 qzz.io 域名 可托管至CloudFlare
Docker容器一键全自动迁移脚本outlook邮箱安全修改方案,让你的邮箱安全无忧简洁、纯HTML导航项目:XG-NAV(开源)Windows11美化方案教程情侣飞行棋:比吵架有趣,比看剧更亲密
Muzicons:发布自己的情感单曲音乐Widget 吐槽北京青年电视剧 省电狗:电脑节能专家 林宥嘉!感念依然听你 搜狗浏览器升级到webkit核心!(非IE核心) QQ拼音输入法
最近评论
vip券网 发布于 4 周前(08月01日) 写的很详细,赞 :razz: :evil:
萧瑟 发布于 1 个月前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
梵蒂冈 发布于 2 个月前(07月08日) 士大夫
HuangWei 发布于 2 个月前(06月16日) 自己手动设置确实很烦,我之前使用过这个,感觉还不错,虽然已经不怎么维护了:https://githu...
龙笑天 发布于 3 个月前(05月25日) 一直用的萌咖的路过 :smile:
标签
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