-
Notifications
You must be signed in to change notification settings - Fork 354
Frequently Asked Questions
Short answer: No.
Long answer: While YouTube does serve videos in an HTML5 player, they are encapsulated in an iframe. While it is theoretically possible to sneak around and link directly to the webm video, it is almost certainly against YouTube's terms of service. Even if it were allowed, it still wouldn't work. As a security measure, browsers do not allow Javascript pixel access to a video or image from a different domain (except in certain circumstances).
Any videos that you'd like to incorporate into a Seriously.js comoposition are best served from your own web server. If you're going to grab a video from YouTube or another service, it's up to you to ensure that you're following the relevant terms of service and copyright laws.
As of now, all major browsers support both WebGL and mp4/h.264 video, but support for mp4 in Firefox is very new and may not be available on all platforms. So it's a good idea to also serve a WebM version of your videos, using either VP8 or VP9, or both. VP9 is higher quality than VP8 and is supported in recent versions of Firefox and Chrome.
You can convert your video files easily using Miro Video Converter or, if you're more advanced, ffmpeg.
Note that support for video textures in WebGL in Internet Explorer and Safari is broken and requires a workaround that is very slow, so expect compromised performance on those browsers, especially on mobile devices.
There are actually two factors here: the size of the video file and the pixel dimensions of the frame. In both cases, bigger is better in terms of image quality, but each has different trade-offs.
The size of the video file is determined by the data rate.
[File size] = [data rate] x [duration]
The greater the data rate, the longer it takes to download the file. You need to consider how fast a connection your users are likely to have. Do they live in a country without great broadband speeds? Are they mobile (not that Seriously.js works in most mobile browsers anyway)? Also consider whether you need the whole video file to finish downloading before it can start playing. Miro Video Converter provides built-in presets for data rates, and those may be fine for your needs. If not, experiment to see what works for you.
The pixel dimensions of your video are a somewhat different issue. This factor affects how high a frame rate Seriously.js can achieve when rendering your composition. Whatever data rate you use when compressing your video, before it can be displayed, each video frame is decompressed in memory to its full size. The amount of time it takes to move all those bytes around is proportional to the total number of pixels in the frame.
[bytes] = [height] x [width] x 4
You also have to decide how big to make the target canvas, which will affect how fast each effect can render. As a rule of thumb, 960 x 540 seems to work well enough for both. There's little point to having your video source be larger than the output canvas, unless you're applying a scaling or distortion effect. Remember, if you're mixing two videos at the same time, that's twice as many bytes to move around, so if your frame rate is too low, try decreasing the size of one or both videos.
You can also scale the canvas separately using CSS. Most sites using WebGL will render at a lower frame size than the actual window and then use CSS to scale to full screen.
Video encoding remains a dark and mysterious art. You'll have to experiment with both the pixel dimensions and the data rate to balance image quality against download time and frame rate.
Short answer: No.
Long answer: Node.js is a platform for building network applications. Seriously.js is a node-based compositor. The use of the word "node" is a coincidence.
As Node.js typically runs on a server, Seriously.js runs "client-side" and requires a browser, so they don't work together. However, there is a WebGL module for Node.js, so it may be worth looking into adapting Seriously.js to run server-side in the future.
Seriously.