Is it possible to apply filters/transforms on a videojs video, frame-by-frame?
Basically, I want to get the frame (as a 2d array of pixels), do some transformations, and then pass it back to videojs for playing.
Basically, it would be similar to running ffmpeg video filters in javascript, in videojs.
Some examples:
flip, rotate the frame
modify the colors, change color to grayscale etc.
You can use CSS on the video element, e.g.
.vjs-tech {
transform: scaleX(-1);
filter: invert(1);
}
Related
Every time a video changes, the player resizes(according to video dimensions) I dont want that.
I want the player to be able to resize when browser size changes but not when the video changes. How can I achieve this?
I am also using videojs-playlist-ui so I want that the height of the player to be the same size as the playlist.
In other words, for the same window size, I should have the same player size independent of the video. (Video ratio should be preserved)
Add a style tag to the parent div.
<div id="videodiv" style="width:500px">
I have some code that used CreateJS /EaselJS to create a MovieClip that contains a Tween that contains an mp4 video. In MovieClip there is a method called 'gotoAndPlay' that you can use to change the timeline position of the playhead to a certain frame number. When using this method to change the play position of the video the tweens work but not the Tween that contains the mp4 movie...this object does not load is result in a blank video tag on the page except for the first play through of the clip. Once the mp4 video has been played it didn't play again if the position was set to it through gotoAndPlay...any ideas on how to fix this or if something wrong might be happening?
In ActionScript animations, FLV movies can be locked to the timeline. But in HTML Canvas animations, MP4 movies are not really fully-fledged "Animate" objects. They look the same for the most part but the integration is not as tight as in Flash.
Since the videos exist outside of the Canvas, you'll need to use jQuery or JavaScript to address them. This can be done by using the Code Snippets in the HTML5 Canvas - Components - Video folder.
As an advance warning, "seeking" to different locations in an MP4 video the way you described is not as reliable as it was in Flash. Browsers like Internet Explorer don't handle seeking well and will likely crash. If frame -by-frame accuracy is important, you may find the best visual results by avoiding the video component and converting your movie to an actual MovieClip in Animate CC, which will increase your file size significantly.
I'm opening a gif in photoshop and it opens as a frame animation.
I hit Convert to video timeline and instead of converting to a single video layer it gives me X layers (x = # of animation frames)
I don't know what I did. Before this my ps would open the gifs as a video timeline
Dont hit video timeline,,,,just in Create frame animation...
screenshoot :
see this
there is two list ....
I have seen a sample that use video tag to send image data from webcam into webgl texture. It then need to create video tag and each frame need to check and update texture
Which sound not so efficient. I'm curious how can we just use stream from getUserMedia to set as texture src. Or any other way to let shader access webcam as texture directly, without creating video tag
Or it not possible?
Yes, there're plenty of examples: https://www.chromeexperiments.com/webcam-input,webgl?page=0.
I'm trying to move an image, and to keep his transparency. To do that, I have a transparent image, and I convert it into a video with Imagesource. I overlay it to a video made by a completely transparent image. Finally, I want the resultant video to be transparent, and for that I need to merge the alpha chanel of the both videos. Now I don't see how to do that (I encounter the MergeRGB but it doensn't work, I also encounter the Mask method, but I don't want mask of any of my video, I don't want mask of the image I want to move, I want the mask of the moved image). The best I done wast to keep mask of the video.
Please, one of you know how to merge alpha channel so the result will be the alpha channel of the moved image? This is the code I use:
clip1 = ImageSource("PNG_transparency_demonstration_1.png", end=239, fps=24, pixel_type="RGB32").ConvertToRGB32()
clip1trans = ImageSource("fond_transparent_720.png", end=10, fps=24, pixel_type="RGB32").ConvertToRGB32()
clip1 = Overlay(clip1trans, clip1, x=100, y=100, mask=clip1.ShowAlpha())
clip1
The solution I used was wrong. Overlay is a method which need a mask if you want to use one, but it doesn't conserve it. The one which is good here is the Layer function.
So I use Layer function and the result is a moved transparent image.