Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So I'm trying to create a progress slider for an HTML5 video. So I have the video on the page and when you hit play (whether via a button or the video itself) the video starts and updates a progress bar. I also wanted to place an image inside the progress bar and make the progress bar clickable to skip through the video. Any ideas how to do this with Javascript. I can't seem to find any help online.
There is a demo here :
http://people.mozilla.org/~cpearce/buffered-demo.html
I have made this player, although the code is not made to be easy for others to understand but it seems to be what you are looking for with canvas clickable progress bar where you can draw your image :
http://netkoder.dk/netkoder/video_chernobyl.php
Standalone version : http://netkoder.dk/netkoder/eksempler/eksempel0109.html
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
i currently want to implement a draw image tool to my projects(something like the brush tool but instead of a color i am actually drawing with the picture). I want to be able to "draw" a picture by hovering my mouse over it. I m currently thinking about two possibilities, one is with a mask over the picture and actually erasing the mask with the mouse or the other posibility to try to draw with the canvas, making the zones touched by the mouse visible.
Do you have some general ideas about how should i start my work?
Thanks
I would prefer the canvas approach.
Here is another great tutorial:
https://code.tutsplus.com/tutorials/how-to-create-a-web-based-drawing-application-using-canvas--net-14288
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Is there a way, using HTML, JavaScript and/or CSS, to change each GIF animation frame on download?
For example, if download = 10kb, gif animation frame = 1
JavaScript cannot control GIF animation at all. There are some libraries which do something similar, but in fact they parse the GIF file and render its subimages on a <canvas>. You would be better off using sprites to display a changeable image on your page.
Not sure what you mean by "on download", though. JavaScript cannot interface with downloads - it is between the browser and the server at that point, with no relation to the page that started the download. But you could do a fancy sockety thing that would communicate with the server and ask it how the download is going, then updating the page.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I came accoss this webpage: http://www.concerthotels.com/100-years-of-rock and it is very cool. I would like to build some content with similar looking.
Is it possible that someone could give me a direction how this page is built? Thanks a lot for that.
this is made with javascript , css , html5
there are many jquery plugin like scroll magic who can give you the same effect as scrolling content automatically or made you own timeline : (http://janpaepke.github.io/ScrollMagic/)
also drawing and animating lines can made with SVG (Scalable Vector Graphics ), visit for more information (http://www.w3schools.com/svg/) .
hope this can give you a small view of how you can do the same effect :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I need to plot a streaming audio which comes as buffers of 2 seconds. Besides that, I need to plot the audio and have features like play, pause, zoom and span.
Wavesurfer.js has most of these features except that it only plots for single/ static audio file. I need it to work for streaming audio too.
What tweak should I do?
Has anyone done anything like this before? Any other better alternatives?
Specification:
Plot a streaming wave file in colour. The user should be able to pause, play, zoom and span into the audio.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I need to edit a video using HTML5 and Javascript only. No flash or ffmpeg. I need to add title boards, background audio, (transitions, bumpers), borders etc.
I have tried popcorn.js but it uses CSS only and does not actually edit the video. I have even experimented with ffmpeg. FFmpeg gets the job done but takes a lot of time.
When using http://www.videojs.com/ as the video player.Some of the functionality already exists in plugins for video.js but not all yet. Here are a few plugins that could add some of the functionality you would need:
https://github.com/nicetip/videojs-speed
https://github.com/danielcebrian/rangeslider-videojs
https://github.com/xbgmsharp/videojs-rotatezoom
Both the video player and plugins are open source. But like I said you might have to do some development on your part for the full range of functionality that you require.