笨猫博客

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

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

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

最新 热点 随机
最新 热点 随机
Afilmory - 一个现代化照片画廊网站 手把手教你用AdguradHome+SNIProxy自建DNS解锁服务器 WIN10系统彻底永久关闭自动更新 WinRAR 商业版下载安装和白嫖指南 Certbot申请谷歌免费SSL证书 宝塔面板卸载全解析:命令与脚本两种方式详解
WIN10系统彻底永久关闭自动更新WinRAR 商业版下载安装和白嫖指南Certbot申请谷歌免费SSL证书手把手教你用AdguradHome+SNIProxy自建DNS解锁服务器Afilmory - 一个现代化照片画廊网站
百度IM红缨枪直指腾讯QQ还是阿里旺旺? 快速部署线上服务的平台 CNative 我看张殊凡“很黄很暴力”事件 shadowsocks账号使用简单教程 4000块钱购买iPhone 4 最便宜香港购买全攻略 ios登陆外网抖音tiktok配置小火箭,quan
最近评论
HuangWei 发布于 2 周前(06月16日) 自己手动设置确实很烦,我之前使用过这个,感觉还不错,虽然已经不怎么维护了:https://githu...
龙笑天 发布于 1 个月前(05月25日) 一直用的萌咖的路过 :smile:
C 发布于 2 个月前(05月04日) 有个更省心的路子,上传到 catbox.moe,然后用 i0.wp.com 做加速(也支持heif格...
薯条 发布于 3 个月前(03月21日) 这个博客18年了吗,好久了哎
Q 发布于 4 个月前(03月19日) 您好: 我的一个WORDPRESS站点,安装了 wp telegram插件,我在配置了Bot ...
标签
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