Kinetic Js canvas video with javascript - javascript

Can anyone show me an example of the code used to place video on a canvas with javascript. I just need a video that loops, with a play/stop button. Thanks.

Canvas tag and KineticJs lib aren't make to place a video (you can always set each frame, but this is quite dirty, however you can see example here : javascript video canvas).
Better use the html5 video tag instead. You can see all that you need for this here :
http://www.w3schools.com/html/html5_video.asp

Related

how to convert a frame of video to image in ipad/safari with javascript?

I tried to save a frame of video as a picture in ipad/safari with javascript.
But as far as I know, the method with canvas(drawImage) is unavailable.
Like this:
var video=document.querySelector('video');
const canvas=document.createElement("canvas");
canvas.width=video.videoWidth;
canvas.height=video.videoHeight;
canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
It does not work.
Reason From Apple Drawimage Doc: The image object can be an img element, a canvas element, or a video element. Use of the video element is not supported in Safari on iOS, however.
And from Safari HTML5 Canvas Guide: For a description of how to use video as an image source, see Putting Video on Canvas.
But there is no link about Putting Video on Canvas..
Therefore, how to do it? I'm very confused.

Faster image changing in JS

I have an audio player I built with HTML5 and JavaScript.
Clicking on the play button tells JavaScript to play the audio and change the src on the play button image (play.svg) to the pause.svg icon. The slowness here is noticeable. Takes time to go to the server and fetch that image.
What's a faster way to change the play button to a pause button?
The question is quite broad, but to give you some ideas:
You could use two image tags and show / hide them on the page.
Use a CSS sprite and changing the CSS class
Preload the SVGs using Javascript
Without seeing your code I don't know what the best solution for you is but one of these options should cover what you are looking for.

HTML 5 Canvas Hide?

Is there an event that can be used to hide the canvas after it plays its animation? I have a canvas animation that plays then rests. I then want to use JavaScript to hide the canvas and show a static image with more intricate image swaps and linking than I know how to do in the canvas. Is there any way to do this?
No, there is not, because the HTML5 canvas API has no such concept like an animation. Everything that happens on a HTML5 canvas is the result of your script code changing the canvas content, so you should know best when you are finished changing it and no more changes are going to happen.
In a comment you said that you didn't write your canvas code yourself but used a tool to convert a flash animation to Javascript. So your options are:
You could try to understand the generated code and how to modify it to hide the canvas after it did the last thing it will do.
When the animation isn't interactive, you could use setTimeout to hide the canvas after a fixed time-period
You could consult the documentation of the tool you used. Maybe it has an option for doing this.
When it has no such option, you could bother the developers to add one, or when it is an open source tool, add such an option yourself.

smooth video transition HTML5

looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.

How do I put a clickable image over a QuickTime video on a web page?

I have a website that runs on WordPress. There is a DIV in the header that contains an embedded QuickTime video (controls are turned off and need to stay like that). I have an image that is supposed to go over the video, and when the user clicks on it, the video should be revealed and play.
I think that if I messed around with the CSS and Javascript for long enough, I could make the image go away and revel the embedded video when clicked on, but I don't know how to make the video start on that same "onclick" event. Another note here: I prefer to use jQuery to do this, since that's what I usually work with. But whatever works works.
This is driving me crazy because I can't find any good information on how to do this! Thank you so much in advance for helping me out.
If you already have a DIV that contains the video, you can create another same-sized DIV that contains your image. Finally, set the image DIV with higher z-index and float it over the video DIV.
I think this should work.
There's really no good way to do this when rendering the video using the QuickTime plugin. Plugins are optimized for performance and typically render above the rest of the "native" elements within your page.
I seem to recall there's a wmode="transparent" attribute or "opaque" that was introduced recently to the plugin similar to what's used with the Flash plugin, but the performance will typically suffer because the plugin renderer will often need to switch to rendering in software as it composites the video with the element you have on top of it, and possibly elements beneath it as well.
The easiest thing to do is to simply use a video element to play the media you want on your page. At that point it is an element like any other on the page and interacts seamlessly with the z-index ordering of positioned elements.
An example of the usage is here: http://dev.opera.com/articles/view/introduction-html5-video/
You may need to nest differently encoded videos as video elements in the page so various user agents with support for different codes can play the video. But just adding the video element and pointing it at your current QuickTime video will work as well as a simple object using the QT plugin.

Categories