How to playback audio to an image on hover? - html

So I am creating a Webflow website where I want to add several images that playback different audio clips when hovering.
Also, if possible to add a sliding effect displaying the remaining time left. Change the opacity to a slightly darker shade and return to normal as the slider goes from left to right like the time bar on YouTube but on the whole image.
Any suggestions, pointers, or resources that can guide me in the right direction will be much appreciated.

Add the onMouseOver attribute to trigger a certain audio file when hovering that element by using the element.play() command.
To pause the audio-file when not hovering you can use the onMouseOut attribute and combine it with the element.pause() command:
A timebar would require extensive scripting and be a second question. SO is the wrong plattform for that.
<img src="https://via.placeholder.com/200.jpg"
onMouseOver="document.getElementById('audio-1').play()"
onMouseOut="document.getElementById('audio-1').pause()">
<audio id="audio-1" src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3">

Related

image in clojure

I made a frame give a title to it and I added buttons to the frame using clojure. I am not able to guess how to add background image to my frame.
I have a background image stored in the drive, I tried adding the background image in doto panel but it showed series of errors.
Help!
You need to go a little bit more deep than that. paintComponent of JPanel is your entry point. Inside paintComponent you can load the image in draw it.
After that, you call getContentPane().add(new YourJPanel()) of your JFrame.
One a side note. If you are planning to do Swing development in Clojure, did you consider: Seesaw?

Possible to load an animated gif without playing the animation?

I wonder if there is a way to prevent a browser from actually animating an animated gif, loaded in a <img> tag.
I just want it to display the first frame of the gif and don't play the animation.
I already fear that this isn't possible and I have to extract the first frame and render it to a canvas.
This is kinda an expensive solution, but if you reset image SRC on a very short setInterval it appears as static e.g:
setInterval(function() {
document.getElementById('img1').src = document.getElementById('img1').src
},1)
Demo: http://jsfiddle.net/MEaWP/6/
Maybe this is too simple an answer for you but you could just open the animated GIF in a image editing program of your choice, i.e. Adobe Photoshop or any other free one, and then just save out the GIF without the animation.
Then re-upload the new GIF (without the animation) to wherever you are serving your images from.
If you do use Photoshop you can simply open the file.GIF and go to Window>Animation in the Menu. This will display all the frames in the animated GIF in a new dialog box.
Just delete all the frames and Save As. Just don't overwrite the original with the animation if you will still need that later.

Create smooth animations on video from camera

I am working on a project where i need to place a image file on the detected object as here: https://github.com/mtschirs/js-objectdetect/blob/master/examples/example_sunglasses_jquery.htm .
I can complete my objective with this example.
But how do i make the image file to be stable to stick to the persons head
.
https://github.com/mtschirs/js-objectdetect
If you have a close look of the PICK YOUR GLASS video, it causes a jerk/zoom in-out effect on the glass image file when tracking your head at some cases. How can i prevent this or make this happen in a smooth way.

Why does drawing an animated gif on canvas only update after reselecting the tab?

I would like to display an animated gif on canvas with some transformations applied. To test things, I'm currently just trying to display the animated gif on the canvas, so that it is essentially equal to displaying the gif as a regular <img> tag.
I'm using Chrome and webkitRequestAnimationFrame. On each request frame, I draw the image. When the gif frame changes, this should be reflected on the canvas. This works only partially:
Just watching the canvas does not make it update. Instead, one, still frame is begin drawn.
Reselecting the tab (i.e. selecting another and selecting the canvas tab again) does update it to a new frame, but after that it freezes again.
This is a fiddle I set up: http://jsfiddle.net/eGjak/93/.
How can I draw an animated gif on canvas with it actually animating?
Answer no longer valid
It looks like the behavior described here (writing an img tag referencing an animated gif to a canvas results in different frames of the gif being written if the img is part of the DOM or visible) has changed at least in Chrome. There may or may not be documentation of what is correct behavior for this. :)
Also, webkitRequestAnimationFrame no longer has the behavior of taking one additional argument, an element X such that when X is not visible, the requested function will not run. For performance and battery life reasons, you may want many of the functions that you pass to requestAnimationFrame to check for visibility before they do anything that will require drawing.
Before:
Check out a fixed version:
http://jsfiddle.net/eGjak/96/
If you add a console.log() to the function that paints the image, you'll see that it is being called. The problem seems to be that the image itself does not animate, probably because the browser does not bother to update an animated image that is not part of the DOM.
My solution was to make the animated gif part of the DOM and size 0 and it works just fine.
You can verify that the animation is being shown on the canvas and not in the image tag by loading up http://jsfiddle.net/eGjak/96/show/ and inspecting the elements with ctrl-shift-I on Windows or Linux / alt-cmd-I.
EDIT: Here's a bonus!
webkitRequestAnimationFrame takes one more argument than the Mozilla equivalent to allow your animation to only run when the element that is being animated is visible. Check out
http://jsfiddle.net/kmKZa/8/
and open up the console. You'll see that when you hide the canvas, the animation function stops being called. When you toggle the canvas visible again, the animation function will be called again.

Disabling GIF animation in HTML

Is there any way, in HTML, to include an animated GIF in an <img> tag, but automatically tell the GIF to not animate? I realize that the user can stop animation by pressing ESC or clicking Stop, but I want the GIFs not to animate at all.
I only want to do this on one specific page, and making separate non-animated versions of the (1500+) GIFs is not feasible. I simply want the GIFs to not animate.
You could use Giffer.
Just include the library in your page:
<script type="text/javascript" src="gifffer.min.js"></script>
Instead of setting src attribute on your image use data-gifffer.
<img data-gifffer="image.gif" />
At the end, call Gifffer() whenever you want. For example:
window.onload = function() {
Gifffer();
}
If you don't want the GIF to move at all you can always edit the .js file to remove the play button.
Not with plain HTML but using PHP with imagecreatefromgif might help you
I don't think calling window.stop() will be a good solution. This would need to be called for every image that is loaded to prevent it from running half way through and stopping. The best solution is to use a library such as GD to create images featuring just the first frame of the animated GIF.
Use ImageMagik, and you can readily convert all 1500 images.
You could use window.stop() in javascript, which should be the equivalent of pressing ESC/clicking stop. However, I'm pretty sure it won't work in all browsers (i.e. IE).