Giter VIP home page Giter VIP logo

youtube_ass_subtitle's Introduction

youtube ass subtitle

유튜브에서 SSA/ASS 확장자의 자막을 보이게 해줍니다.

간단 사용법

사진이 포함된 상세한 사용법은 wiki 탭의 install 페이지를 참조 해주세요.

설치

  1. https://github.com/mbin96/youtube_ass_subtitle/archive/refs/tags/latest.zip 링크를 다운로드합니다
  2. 적당한곳에 압축을 해제 합니다.
  3. 크롬브라우저 주소창에 chrome://extensions/을 입력하여 확장 프로그램 탭을 엽니다.
  4. 우상단 개발자 모드 버튼을 눌러 개발자 모드를 활성화 합니다.
  5. 좌상단 압축해제된 확장 프로그램을 로드합니다. 버튼을 누르고 2번에서 압축 해제된 youtube_ass_subtitle-{version} 폴더를 선택합니다.

사용법

  1. 확장 프로그램 설치후 유튜브에 들어갑니다.
  2. 확장프로그램에서 youtube ass subtitle을 선택합니다.
  3. 팝업창에서 '파일선택' 버튼을 눌러 ass 자막을 선택합니다.
  4. load subtitle 버튼을 누르면 자막이 나옵니다.

이 프로젝트에 사용된 오픈소스 라이센스

license 파일을 참고하세요

기부

이 프로젝트가 마음에 드셨다면 개발자가 치킨을 먹을 수 있게 도와주세요

toss

toss.me/xecachan

youtube_ass_subtitle's People

Contributors

nonbanana avatar yongjun042 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

youtube_ass_subtitle's Issues

executeScript 대신 message를 사용하여 처리

현재 popup.js에서 executeScript를 사용하여 자막파일을 로드하거나 인스턴스를 생성하고 있습니다. 대신 popup.js에서 contents script로 message를 보내고 contents script 내에서 인스턴스를 관리하는것을 고려합니다.

Reload last opened `.ass` file (when pressing load button or specific keyboard shortcut)

Thank you so much for this Chrome extension. It's really useful!

Here's some enhancement proposal found while I was using it.

My usage scenario is to replace aegisub, and preview the .ass file without having to download the video.

Since I am constantly editing the local .ass file, is there a way to reload the last opened .ass file when

  • load button is pressed, (since it loaded automatically and the button is more or less useless)
  • or specific keyboard shortcut is pressed.

Or more over, is there a way to proactively monitor local file changes and reload the subtitle? (Maybe this one is a little unrealistic, since there are all sorts of security restrictions.)

유튜브 영화관 모드인경우 자막이 왼쪽으로 치우침

FI-FAPDakAAfEix
유튜브에서 영화관 모드인경우, 왼쪽으로 치우치는 현상이 발생합니다.

<div class="html5-video-container" data-layer="0"><video tabindex="-1" class="video-stream html5-main-video"
        controlslist="nodownload" style="width: 853px; height: 480px; left: 64px; top: 0px;"
        src="blob:https://www.youtube.com/7b27c30d-56bd-4f7c-9837-0d059164dccd"></video>
    <div class="libassjs-canvas-parent" style="position: relative;"><canvas class="libassjs-canvas" width="1332"
            height="748"
            style="display: block; position: absolute; width: 853px; height: 479px; top: 0.5px; left: 0px; pointer-events: none;"></canvas>
    </div>
</div>

subtitle canvas가 적용된 html 코드를 보면 video의 경우 left 속성이 64px로 지정되어있지만 canvas의 경우 0px로 적용되어있습니다.

manifest v3로 변경

크롬 웹스토어에 등록하기 위해 manifest v3로 변경합니다.
worker_proxy를 사용하기 위해 manifest v2로 작업하였으므로 v3에 맞추거나, 프록시를 직접 만들도록 합니다.

동작하지 않음

subtitles-octopus.js:71 Worker error:  Don't know where to render: you should give video or canvas in options.
SubtitlesOctopus.self.workerError @ subtitles-octopus.js:71
subtitles-octopus.js:77 Uncaught (in promise) Error: Worker error: Don't know where to render: you should give video or canvas in options.
    at SubtitlesOctopus.self.workerError (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:77:19)
    at SubtitlesOctopus.self.createCanvas (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:134:26)
    at SubtitlesOctopus.self.init (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:94:14)
    at new SubtitlesOctopus (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/subtitles_octopus/subtitles-octopus.js:581:10)
    at loadSub (chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/loader.js:44:25)
    at chrome-extension://eddfneakjljnelhpanihljcghnjamfjm/src/loader.js:28:9

아마도 유튜브 video 태그가 달라졌기 때문으로 보입니다.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.