liqvidjs / liqvid Goto Github PK
View Code? Open in Web Editor NEWLibrary for interactive videos in React
Home Page: https://liqvidjs.org
License: MIT License
Library for interactive videos in React
Home Page: https://liqvidjs.org
License: MIT License
I expected to get some info like: go to localhost:3000 or something like that, but I didn't.
So, at what port I can see the result?
I have included this, <script src="https://unpkg.com/@liqvid/host/lv-host.js"></script>, in the index.html <head>
tag, but still when I click Fullscreen icon in the player in iOS it is not making the player Fullscreen. It just toggles the icon.
Please help.
package information:
"liqvid": "^2.1.5",
"liqvid-scripts": "0.0.5",
It seems like it's possible to skip ahead by pressing the right arrow key, but the left arrow key doesn't do anything. It would be nice if it skipped the video back a few seconds (ideally less than the amount that's skipped forward; as a data point, Google Podcasts' player skips ahead by 30 seconds and back by 10 seconds).
In the demo video at the project homepage, it's possible to e.g. resize the text box that appears to demonstrate how to edit the video's subtitle; however, the video's canvas does not change when the content gets larger, so the additional content overflows and gets hidden. Like this:
Some possible solutions:
I upgraded the Liqvid package in my React project from 2.0 to 2.1 and now when I try to run the project using npm start
it is throwing the following error in the command line:
SyntaxError: ..\node_modules\liqvid\dist\liqvid.mjs: Support for the experimental syntax 'classProperties' isn't currently enabled (2052:12)
@ysulyma can you please check this?
Now that chrome based browsers (from chrome 109) (as well as firefox) support mathml (core), maybe consider an integration with temml.
I think it will work as a drop in replacement for katex.
I found it renders much faster without "flashing".
I recommend the latin modern woff2 font from gust.
Is there a way to change the frame rate in react?
When adding a Video element which has duration less than the total duration of the playback, then the playback is pausing when the video ends. @ysulyma Can you please check?
You can reproduce the issue by the following steps:
["train/", "0:20"]
to ["train/", "0:30"]
For example, I do not see a demo here.
My browser console has the error:
Uncaught TypeError: Failed to resolve module specifier "@liqvid/katex". Relative references must start with either "/", "./", or "../".
Hi I noticed that the Audio page, in the API docs won't load, I would be very interested in knowing if there is also a schedulable Audio player object...
TIA, and great job on this softwre...
Now available in the rp-cursor package
I installed liqvid via npm and tried importing the components like so:
import { Player, Script } from "liqvid";
After compiling, this is result from the console:
Can't import the named export 'Children' from non EcmaScript module (only default export is available)
[feature request] Add function to import mp4 as background video.
That way this could be used to (background) embed youtube/video.
It would be very helpful to add additional information to or add clickable links to resources etc.
Thank you for your consideration.
Explain why we use opacity: 0; pointer-events: none;
instead of visibility: hidden;
.
when calling new Script(markers)
with the markers having durations as number instead of string, it is throwing error.
I think in the following code the parseTime
function should check if the duration is of type number or string before operating on the duration.
if (marker.length === 2) {
const [, duration] = marker;
marker[1] = time;
marker[2] = time + parseTime(duration);
} else {
const [, begin, end] = marker;
marker[1] = parseTime(begin);
marker[2] = parseTime(end);
}
time = marker[2];
}
The error is following:
Uncaught (in promise) TypeError: str.split is not a function
at parseTime (liqvid.mjs:887:1)
at new Script (liqvid.mjs:3251:1)
@ysulyma please check.
Currently, Liqvid doesn't work in React's Strict Mode. This is mainly due to double-renders (facebook/react#12856, facebook/react#20835) along with how we set up keyboard shortcuts.
since other code could delete the bindings to override keyboard controls.
@ysulyma I have a query regarding one use case in my application. Is it possible to have a child playback inside a playback, so that when the child playback is playing the parent playback will be paused and when the child playback ends then the parent will play again?
If this is not present at the moment, can you please recommend a hack or something to achieve this?
This is modeled after WordPress's notion of hooks, but is confusing with the new React Hooks
If I use create-react-app I use npm build, but in this case, how do I do it?
If I don't need to record audio, do I still need install Express?
The scenario is, there is a Video element which starts at, let's say, 5 second. So, the video plays fine for 5 seconds and suddenly it pauses and never starts again, until manually played again.
This happens in iOS Chrome (and maybe Safari as well).
I think the issue might be the following:
@ysulyma can you please let me know how to fix this?
Is there a way to load all the videos/images before rendering in the browser, because currently the player is running while the video is not loaded. Hence, the video is not in sync with the player time.
I know that liqvid has animation support. However, I think that can be enhanced/simplified supporting GSAP, even the community (free) version)
I am getting the following error when I refresh the player after a change in the script:
Uncaught TypeError: Cannot read properties of null (reading 'buffered')
at getBuffers (liqvid.js:895:1)
at HTMLAudioElement.updateBuffers (liqvid.js:907:1)
What i am doing is, I have a state variable initialized
, and i have used useEffect to check when there is a change in the script. In the useEffect i have set the initialized value to false and then to true with a setTimeout so that the player is removed from dom and re-rendered again so that the script change is reflected.
const [initialized, setInitialized] = useState(false);
useEffect(() => {
setInitialized(false);
setTimeout(() => {
setInitialized(true);
}, 0);
}, [script]);
if (!initialized) {
return null;
}
return <Player ... ></Player>
Can you please tell if I am doing anything wrong, or is there a way to resolve the issue?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.