Faster image changing in JS - javascript

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.

Related

Stop Audio in Wordpress

I am using the background video option in Divi (by elegant themes) in Wordpress to show a 4 minute or so long video in the background. The thing is, I don't want the audio. I understand if you scroll down far enough the entire thing stops, but I just don't need or want the audio. Is there any custom code that I can use (or a plugin) to get the audio to stop playing ON THE VIDEO BACKGROUND, or will I have to convert it to a gif? Thanks.

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.

How can I stop the preload of a video (HTML5 - Javascript)

I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.
What I would like to do is to then stop the preloading of the two other videos.
Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?
I just came up with a solution to a problem I had that resembles your own. I am preloading a list of movies on my page, in series, but I need to be able to jump to one of them and prioritize it ahead of whatever might have already been preloading, in order to play it as quickly as possible.
I have a div#prebuffer element that holds the preloaded videos, as they are buffered. When I need to forget about preloading, I simply do this:
var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();
It's slightly ugly, but I wasn't able to find a nicer way. And it gets the job done.
With jQuery, you can try:
$('#videoPlayerId').removeAttr('preload');
I don't know that it will stop a video that's already preloading.
From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.
I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.
There is dedicated tag nowadays:
<video preload="none" ....>

Categories