Comments (10)
There may be also solution if manually resize window, but this is a trick.
from javascriptsubtitlesoctopus.
Can you send an example?
from javascriptsubtitlesoctopus.
Clicling on that button trigger JS function what add class to the player, this class change 2 rules for video wrapper: from grid-column: 1; grid-row: 1; to grid-column: 1 / 3; grid-row: 1;.
You can call octopusInstance.resize()
(without arguments) after you changed video size. It'll trigger canvas resize and will fix that issue. You can also call it with setTimeout
if you have resize animation.
Recently Resize Observer was introduced and it'll allow to resolve this problem without manually calling resize()
, but currently it's supported only by Chrome. It's also possible to use polyfill (typically based on checking size of element every X ms which shouldn't be a big problem in case of one element as in our case).
from javascriptsubtitlesoctopus.
Example:
HTML:
<div class="wrap">
<div class="video">
<div class="controls">
<div class="...">...</div>
...
</div>
</div>
<div class="playlist"></div>
</div>
video tag insert at te first play later when first file in playlist are selected,
CSS:
/* ... other styles, parent styles... */
.wrap { grid-area: player; grid-template-columns: 1fr 400px; grid-template-rows: 1fr; align-content: stretch; justify-content: stretch; }
.video { grid-column: 1; grid-row: 1; background: #000000; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 16pt; font-weight: 300; white-space: nowrap; grid-template-columns: 1fr; grid-auto-columns: auto; position: relative; display: block; overflow: hidden; }
.video video { width: 100%; height: 100%; object-fit: contain; }
.video .controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; grid-template-columns: auto auto 1fr auto auto auto auto; grid-template-rows: auto; grid-gap: 10px; padding: 10px; }
/* control buttons styles... */
.playlist { grid-column: 2; grid-row: 1; position: relative; align-content: start; justify-content: center; align-items: start; padding: 20px; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; overflow: hidden; }
/* playlist inner styles... */
.video.expand { grid-column: 1 / 3; grid-row: 1; z-index: 2; }
.video.hidesubs .libassjs-canvas-parent { visibility: hidden; }
JS code of event when triggering expand mode (video will overlap playlist)
// global...
var videowrap = document.querySelector(".video");
// ...
// event on click expand button:
videowrap.classList.toggle("expand");
from javascriptsubtitlesoctopus.
@Dador If you have code for that, then it not work, because I tested it in Chrome because only Chrome support .mkv
video files which is most useful container.
I also tested it in Firefox and Edge and Mobile browsers and it have same behaviour in Firefox.
from javascriptsubtitlesoctopus.
I use versions to develop:
Firefox:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0 ID:20181018123730
Chrome:
70.0.3538.67
from javascriptsubtitlesoctopus.
Well, calling .resize()
may be a manual solution, it work with that.
But the stupid thing: when element of the page resized and that affect to the video, subtitles not resized, but when window are resized or you go in fullscreen mode it will resize automatically.
Also will be good if all commands will be briefly explained in README.md, may be there something else useful I don't know.
from javascriptsubtitlesoctopus.
But the stupid thing: when element of the page resized and that affect to the video, subtitles not resized, but when window are resized or you go in fullscreen mode it will resize automatically.
Recently Resize Observer was introduced and it'll allow to resolve this problem without manually calling resize(), but currently it's supported only by Chrome. It's also possible to use polyfill (typically based on checking size of element every X ms which shouldn't be a big problem in case of one element as in our case).
There is currently no way to be notified that an element has changed size. Resize Observer will allow this to happen, but it is currently only supported by Chrome. It is possible to detect the window being resized, so the subtitles do react to that.
from javascriptsubtitlesoctopus.
Ok, so this bug will be open for some time until this ResizeObserver will be supported in all browsers and then used in JSO?
from javascriptsubtitlesoctopus.
Since ResizeObserver is now in all major browsers, i will close this
from javascriptsubtitlesoctopus.
Related Issues (20)
- Brotli: "Uncaught Corrupted reserve bit" HOT 6
- I wish you will make a online demo HOT 1
- Feature request: Support effect in subtitles ass file HOT 1
- Drop custom brotli decompression HOT 7
- JSO never performs VSFilter colour mangling HOT 14
- JSO doesnโt nor enables users to set storage size HOT 1
- Failure to build HarfBuzz 5.3.1 with emscripten >=3.1.25 (libharfbuzz_la-hb-ft.lo) HOT 1
- HTML5 Native player Multi Track
- Resize makes subtitle disappear HOT 1
- SubtitlesOctopus Nextjs Runtime Error HOT 4
- how to use directly with CDN? HOT 6
- Failed to construct 'Worker': Script at 'https://libass.github.io/JavascriptSubtitlesOctopus/assets/js/subtitles-octopus-worker.js' cannot be accessed from origin ''. HOT 11
- How to get the bounding box of the subtitle? HOT 2
- Unable to Set Caching Policy for Remote Fonts
- There is a problem with subtitles jumping when using Arabic HOT 2
- need custom wasm url config
- The onReady function was triggered before the font had finished loading.
- If the subtitle is empty or all spaces, the rendering fails
- Inconsistency in Font Size Between Chinese and English Characters in Mixed Subtitles
- Custom Fonts are not working. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from javascriptsubtitlesoctopus.