Code Monkey home page Code Monkey logo

ccaptioner's Introduction

CCaptioner

A very simple extension which purpose is to assign a text track to a HTML5 video element in a web page.

ccaptioner's popup panel

Many HTML5 video players do not offer the ability to import text track for captions/subtitles purpose. The purpose of this extension is to remediate this problem.

When you want to assign a text track to a video element in a web page:

  • Open the popup menu and click "Assign text track to..."
  • Move the mouse over the target video element
    • Click the video element if needed
  • A file picker will appear
  • Pick the .srt or .vtt file to use as text track

The video should now render the captions/subtitles of the file you selected.

The content scripts of CCaptioner are injected if and only if you click on its toolbar icon while on a specific web site, and only for that web site. Once the text track is embedded, the content script terminates and should be garbage-collected by your browser's JavaScript engine.

Once a text track has been assigned to a video element on a given page, you can time-shift the text track through CCaptioner's popup panel -- this is useful when the text track is not well synchronized with the video content.


Install

Firefox 68 and above

Firefox's AMO: https://addons.mozilla.org/firefox/addon/ccaptioner/.

Chromium

Chrome Web Store: https://chrome.google.com/webstore/detail/ccaptioner/lckmkmkmghpklkkbfhhfgalajdnjcnbn.

Sideloading

You can sideload the extension by downloading the appropriate package from the Releases section.


Permissions

activeTab

This permission means that the extension will be able to interact with a web page only when you click its icon in the toolbar; so CCaptioner's content script is injected only when you demand it by clicking CCaptioner's toolbar icon.

<all_urls>

This permission is necessary to ensure CCaptioner's content script can also be injected in embedded iframe elements in a page -- it is not uncommon for video players to be inside an iframe which origin is different from the origin of the root document.

Credits

The CCaptioner's icon is from https://en.wikipedia.org/wiki/File:Closed_captioning_symbol.svg.

ccaptioner's People

Contributors

gorhill avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ccaptioner's Issues

Wrong character encoding

Hi,

"Strange" characters in hungarian sub these charcters are not shown correctly (only some kind of weird placeholder):

é: U+00E9
á: U+00E1
ő: U+0151
ö: U+00F6
ó: U+00F3
ű: U+0171

Extracting and using (forced) Closed Captions from movies itself if there is one?

Hi again!

Is there any chance to use it?

I tried to "burn" (forced) subtitles (mov_text,webvtt,srt) into videos (mp4,mkv,webm) and thought this way i might no need to search for subs or store them separately in the future until i realized life is not so easy and how much PITA it is to use CC in browsers. AFAIK only the <track> element is capable to use them if it is in the site's code.

feature request - moving the location of the captions

It would be nice to be able to move the location of the captions (for me, specifically further up). The player I'm using them on blocks some of the captions when I pause. I'm using the captions to learn another language, so I need to pause pretty often.

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.