Generating graphical timeline in javascript/jquery - javascript

Let's say I can fetch a total time of an certain video in seconds. I can also get the starting times of sub-events in that video.
Is there a way to output some kind of timeline with sub-events arranged by their starting times respectively to the end time of the video?
The sub-events should also be linked to the video in such way that when I click on them, video would jump on beginning of that sub-event.
Basically, I would like to hide the timeline of html5 video, and stick a new dynamically generated one under the video with few selected events to navigate through, with no slider, just click (for example a tennis match with set and game timeline instead of min:sec timeline).
I'm using video in html5 and javascript.

Well you can user this jquery plungin for timeline. Would look cool.
And for jumping you can read here.

Related

Display (and play) just a section of a video?

I am using Video.js with a WebVTT file for chapters and subtitles; that is working fine. For another feature in the app I am developing, in place of using chapters, I am wondering if there is a way I can display and play just a section of a video? For example, "Cue F" in the test file screenshot shown below is 16 seconds long – is there a way I can show the video as just having 16 seconds duration instead of having to show it in the context of the entire video duration? (This would mean the Control Bar reflected the 16 second length, etc)
Said another way, I want to be able to show "clips" of a video to the user without them being able to jump around by clicking the 'seek' bar, etc.
I've been through the Video.js docs and all the listed plugins but haven't seen a way to do this. I am comfortable writing the code – but I'm not sure where to start – Video.js doesn't seem to support Media Fragments (or at least threw errors when I tried it)

Peak detection with the web audio API?

TL;DR - I want to use Javascript to detect every click in a drummer's click track (an mp3 with only beats in it) and then replace these with .wav samples of a different click sound. The drummer click track is not in constant time, so I can't simply detect the BPM and replace samples from that.
I have a task I'd like to achieve with Javascript and the web audio API, but I'm not sure if it's actually possible using either of these....
Basically I regularly use recorded backing tracks for songs and I replace the default click track (the metronome track that a drummer plays along to) with custom click samples (one .wav sample for the first beat of a bar and another sample for the remaining beats in any given bar). Annoyingly many of these drummer click tracks are not in constant time - so do not have a constant BPM from start to finish.
I want to detect every click in a click track (every peak soundwave) and then replace these with the .wav samples, and download the final file as a MP3. Is this possible?
There's no built-in way to do this in WebAudio. You will have to implement your peak detector using a ScriptProcessorNode or AudioWorkletNode. Once you have the location of each peak, you can then schedule your replacement clicks to start playing at the click times. With an OfflineAudioContext, you can get the resulting PCM result. To get a compressed version (probably not mp3), I think you need to use a MediaRecorder.

How to add a powerpoint presentation in web

I have this task to make an iframe of a presentation appear on an click. then you can control that presentation, like the page you want or go forward and backward.
The problem is I can't use the cloud solutions, because the data should be on premises.
I've thought about converting it to a video, it would be easier to control it and also to keep the animations.
I've also thought about converting it to a pdf file and then show the slides, like slideshare does in this Example.
Is there anyway I can use the ppt directly or even convert it to another format that would be optimal and user friendly, if so, how? is there any APIs or Javascript libraries? what would you recommend?
So i've found a solution of this, i want to share it with you.
If you need to present a ppt-like presentation on web without using the cloud solutions.
The first one is used to keep animation of the presentation:
I converted the ppt to a video , and then used Video.js library that enables you full control over the video.
I've desactivated the control of the video and made my own controls with Html and css. GoForward , Backwards or pause or play or restart the presentation.
i was able to pick and to know the slide i'm on and how much time in every slide by dividing the full time of the video by the number of slides i have in it. (if we suppose they have equal time).
The Second one is used for better quality but no animation: by converting the PPT to PDF.

Convert YouTube/Vimeo video into silent, animated images (think "moving pictures" from Harry Potter)?

How could you programmatically convert a YouTube/Vimeo video into a series of animated images that each reflect 5 seconds of the video? Essentially, the goal is to deconstruct the video into silent, 5-second animated pictures -- think "moving pictures" from Harry Potter.
One option is to slice the video into 5-second video chunks, but the output should feel like animated GIFs ... that is, play instantly, be lighter than combining 150 pictures into one JavaScript slideshow (assuming 30 FPS), but have the image quality of a JPG or PNG. If this is possible with video, then it's an option we're open to exploring.
Another option is to take screen shots of the video, but that is not programmatic.
Ideas?
The output needs to get rendered in HTML5 on Mobile Safari.
You've a bit of a problem here — quality is directly related to file size. So if you create a video of 30fps (higher than regular broadcast TV, really?), you're going to run into issues with it being light & fast loading.
I don't know if I'd go down the route of making actual GIFs if you're looking for a high-ish framerate, but if it's for a web project, HTML5 video tag should be able to have autoplaying video that integrates into the page fairly seemlessly.
What you would want to do here is take a programme like Handbrake, put the video at the highest possible compression settings (lowest quality/framerate) & slowly bring it up until you have something that you think is the minimum you can get away with.
From there, you can look into scripting the process using these settings & something like FFmpeg. You'll probably also want to remove video metadata to save as much filespace as possible.

Javascript to select snippet from audio track

I'm working on a project in PHP, where from a library of tracks, a user can select a track, choose a snippet from that track of a few seconds in length, and use that snippet as a search parameter on the next page.
The client would like a waveform of the track to be displayed (these have already been generated as PNG files), with a 'playhead' showing the current playback position (should be pretty easy to do). The user should be able to select a start and endpoint for their selection by dragging vertical bars, audition the selected snippet (by pressing the space bar, or similar), and then click 'Search' to submit an HTML form. The only parameters I actually need from the form are the start and end positions of the selected audio snippet.
So, this is what the client wants, and I'm at the brainstorming phase. So far, I have a bunch of mp3 files and corresponding waveform graphics. In terms of browser support, it's going to be OK to specify that the browser must be 'the latest version of...', but I would like to offer support for all the big names: Safari, Firefox, Opera, IE, Chrome.
Do you have any suggestions of JavaScript libraries or solutions I should consider to help with implementation: embedding the audio file, the playback control interface, and the snippet selection interface. Although it might be possible to generate corresponding OGG files for all the mp3s (to help with an HTML5 implementation), I'd prefer not to if possible, as it complicates things. So ideally I'd like an mp3-only solution which offers cross-browser support. Perhaps something like jPlayer would be a possibility?
I'm certainly familiar with jQuery, so using that would be a bonus.
Are there any existing libraries I could use which might help me with the 'snippet selection' interface? In a totally ideal world, it would be a solution with a 'scrub bar' - i.e. as you drag the start and endpoint handles, the sound at the 'playhead' is previewed instantly.
Many thanks for any ideas and suggestions!
EDIT (more information):
I'm hoping to be able to create something similar to this demo:
http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm except with
the added feature that a user can select a 'snippet' from the track,
using start- and end-point scrub bars, and can audition the snippet by
pressing play.
So, my desired interface is like this:
on page load, the track would start buffering, and the play button
would play from the beginning as normal if pressed
if the user drags a scrub bar from the far left edge of the track,
the sound at the playhead would be previewed (as with the demo I
linked to), and on releasing the scrub bar, playback would continue
from there to the end of the track
if the user drags another scrub bar from the far right of the track,
the sound at the playhead would again be previewed. However, as the
bar is released, the playback should jump back to the LEFT scrub bar,
and continue from there. (If this is too difficult to achieve, I'd be
happy with the right-hand scrub bar to not preview the sound as it was
dragged, but just to act as a 'marker' for the end of the selection).
the two scrub bars cannot pass each other, so the left one is always
the 'start' and the right is 'end' of the selection.
once the bars have been moved and a selection has been made, the
playback should loop the selected snippet indefinitely, until 'stop'
is pressed.
in an ideal world, I'd like the scrub bars to 'snap' to a grid of
whole seconds, so that the snippet start, end and length values are
always a whole number of seconds. Failing that, I'll just round the
numbers to the nearest integer later in JavaScript.
For the selection:
http://docs.jquery.com/UI/Slider
As for JavaScript doing a playback scrubbing, good luck with that... Sounds more like a flash or html5 thing

Categories