On this page I enter the data for the "home loan simulation". and a "video" is generated in response to the data that I entered, it is something like a dynamic "video".
This "video" shows related data that I entered.
I inspect the code and I don't see anything that shows a video tag or something. This looks like video, from the control bar, to the full screen option, and the cc. It also has audio, although the voice of the "video" does not mention any dynamic data.
I inspect the code and I don't see anything that shows a video tag or something.
This looks like video, from the control bar, to the full screen option, and the cc. It also has audio, although the voice of the "video" does not mention any dynamic data.
Does anyone know how this was done or has an example of how to do it? is there any way to do the same using javascript, css, and html?
thank you
this is the link
https://www.grupobancolombia.com/personas/creditos/vivienda/simulador-credito-vivienda##sim-results
The video from your question is actually a very big SVG as #Kaiido mentioned.
The animation script is very hard to understand. Here is just a part of it:
You can see it has more that 320.000 lines of code. And we have no clue what all this numbers mean. Of course, some of them are time codes, some are coordinates, but we need reverse engineering to understand.
Your original question: is there any way to do the same using javascript, css, and html? of course has the answer: yes. Almost any animation is possible.
But we need examples. Ok, there are two possible ways to solve the animation: use existing library or create your own. If you are interested in your own, just ask in comments.
Use library
Google suggest: animate.js library.
Here is an example of using controls (play/pause/resume/reset/set time) as it is in real video player: click.
Here are 3 examples of using SVG: move along the path, morph to other shape, change line properties.
More examples using animate.js are here.
Write your own library
I use some kind of self-written library in one of my projects. The idea is:
have an array of keyframes - this is where animation changes. Each keyframe has: time start, duration (similar to having "time end"), the list of changes (objects or their properties).
I update the animation in requestAnimationFrame() loop (because my animation goes only to the future, I do not have controls)
when current time becomes greater than new keyframe start time, I drop (remove) previous keyframe from array and apply new objects/values
if current time is greater than keyframe start, but less than keyframe end, I use lerp (linear interpolation) to calculate in-between values of objects
But this description is just for the idea, so that you can create something that suits your needs.
Audio
I think, audio is just a normal audio tag in HTML:
<audio id="a">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
It can be controlled with methods and properties: look here. Example:
const a = document.getElementById('a');
a.currentTime = 0.8; // playing at 0.8 seconds from the start
a.play();
From what i can understand, they are using an API provided by a company. What they are doing its basically taking your inputs, process them and send a bunch of info to the API as a POST request, then the API responds with a custom URL that they show to you with an iframe.
If you wanna learn more you should check the company that provides the API. IndiVideo
Also, i don't think that this is the right place to ask for something like this.
It appears to be an SVG video that takes in your data and renders it out in real time. It's definitely something anyone can build, but it would take a little less effort if you used an API.
Related
Trying to implement some basic music player.
I have an array of Words objects, each one represent a word and build with the next structure:
{
text: "Hello"
time: 2.24
duration: 0.32
}
Trying to figure what is the right way to display the current word on the screen while the music plays. That means, when the audio file will speak the "hello" text after playing for 2.24 seconds, I want to display it on the screen. same for the word after, etc.
Setting a setInterval of 10ms will apply some checks on the array is a super heavy task for the JS thread. not sounds like a good idea.
e.g thought about creating some Map object, when the time is the key, to try to catch the Map[time] with the setInterval..
Maybe iterate over the array of words and create a VTT file inside the browser to send it to the tag? will it even possible to display the subtitles properly that way?
Any ideas? Suggestions?? maybe some general direction?? a bit stuck with it.
Thanks!!
Check rabbit-lyrics, it may help you:
https://github.com/guoyunhe/rabbit-lyrics.
Can I use a (soundfont) sample e.g. "C5.mp3" and extend or shorten its duration for a given time (without distorting the pitch)?
(Would be great if this was as easy as using an oscillator and change the timings of NoteOn and NoteOff, but with a more natural sound rather than sine waves)? (Can that be done easily without having to resort to MIDI.js or similar?)
You would either need to loop the mp3 or record a longer sample. Looping can be tricky to make seamless without clicks or pops though, and depending on the sample you would hear the attack of the note each time it looped.
.mp3s and other formats of recorded audio are all finite, predetermined sets of binary data. The reason it's so easy to manipulate sine waves with an oscillator is because the web audio api is dynamically generating the wave based on the input you're giving it.
Good soundfonts have loop points for endless sounds. See example for WebAudioFont
https://surikov.github.io/webaudiofont/examples/flute.html
I have a HTML5 video which I has elements laid on top.
I want the content to follow some objects in the video.
What is the best way for me to do this, so i can control the CSS top and left attributes ( this is how i see the content moving on top of the video).
I want to make sure that the content positions is always kept in sync with the time of the video. If a user restarts the video or skips to a certain point it would be good if the content knew where they were meant to be.
I have seen some examples of this where they use JSON to control the content position and at what time is should show, hide and move.
I am not sure how this was hooked up with the video player and time of the video.
I have not been able to find anything to help explain the JSON method or other ways of doing it.
Is there a demo of something similar or an example someone could create.
Thanks
I can recommend Popcorn.js combined with Popcorn Base Plugin, which together should do all of that. In particular, take a look at these examples.
Popcorn Base Plugin is a wrapper for creating your own Popcorn plugins, but it comes with a few plugins built already, and all of them have full keyframe animation. I suggest that you start with the "style" plugin, which will take any existing DOM element and animate its CSS properties in time with the video, including "top", "left", etc.
Popcorn doesn't directly take a JSON blob for all the animations, but it should be simple enough to traverse such an object and make the appropriate calls to Popcorn's methods. Both projects are well documented and have good, simple examples.
Full disclosure: I built Popcorn Base Plugin, so I may be a bit biased.
I am trying to create a feature where a user can change (back and forth) between multiple videos while maintaining a single consistent audio. Think of being able to watch a concert from multiple angles but listening to a single audio. The trouble I am having with this feature is that there can not be a lag between the changes in video or the audio will no longer sync with the videos (especially true after multiple changes).
I have tried two methods, both using html5 only (I would prefer not use flash although I will eventually have a fallback) that have not worked seamlessly, although depending on the browser and hardware, it can come very close.
Basic Methods:
Method 1: Preloading all videos and changing the video src path on each click using javascript
Method 2: Again preloading video and using multiple tags and changing between them using javascript on each click.
Is there anyway to get either of these two methods to work seamlessly without a gap? Should I be using a slight of hand trick, like playing both videos concurrently for a second before revealing the second and stoping the first? Can this just not be done with html5 players? Can it be done with flash?
I have seen this type of question a couple of times with both video and audio with no clear solution, but they were a couple of months old and I was hoping there is now a solution. Thanks for the help.
Worth adding that it is possible with the MediaSource API proposed by Google. This API allows you to feed arbitrary binary data to a single video element, thus if you have your video split into chunks you can fetch those chunks via XHR and append them to your video element, they'll be played without gaps.
Currently it's implemented only in Chrome and you need to enable Enable Media Source API on <video> elements in chrome:flags to use it. Also, only WebM container is currently supported.
Here is an article on HTML5Rocks that demonstrates how the API works: "Stream" video using the MediaSource API.
Another useful article that talks about chunked playlist: Segmenting WebM Video and the MediaSource API.
I hope this implementation gets adopted and gets wider media container support.
UPDATE JUN 2014 Browser support is slowly getting better: (thanks #Hugh Guiney for the tip)
Chrome Stable
FF 25+ has a flag media.mediasource.enabled [MDN]
IE 11+ on Windows 8.1 [MSDN]
Did you find a better way to do that?
I implemented a double-buffered playback using two video tags.
One is used for the current playback, and the second for preloading the next video.
When the video ends I "swap" the tags:
function visualSwap() {
video.volume = video2.volume;
video2.volume = 0;
video.style.width = '300px';
video2.style.width = '0px';
}
It has some non-deterministic behavior, so I am not 100% satisfied, but it's worth trying...
Changing the SRC tag is fast, but not gapless. I'm trying to find the best method for a media player I'm creating and preloading the next track and switching the src via "ended" leaves a gap of about 10-20ms, which may sound tiny, but it's enough to be noticable, especially with music.
I've just tested using a second audio element which fires off as soon as the first audio element ends via the event 'ended' and that incurred the same tiny gap.
Looks like (without using elaborate hacks) there isn't an simple(ish) way of achieving gapless playback, at least right now.
it is possible. you can check this out: http://evelyn-interactive.searchingforabby.com/ it's all done in html5. they are preloading all videos at the beginning and start them at the same time. didn t had time yet, to check how they re doing it exactly, but maybe it helps if you check their scripts via firebug
After many attempts, I did end up using something similar to Method 2. I found this site http://switchcam.com and basically copied their approach. I pre-buffered as the video start time approached and then auto-played as the videos starting point hit. I had the current videos playing simultaneously (in a little div - as a UI bonus) and users could toggle between the videos switching the "main screen view". Since all videos were playing at once, you could choose the audio and the gap didn't end up being an issue.
Unfortunately, I never ended up solving my problem exactly and I am not sure my solution has the best performance, but it works okay with a fast connection.
Thanks for everyones help!
For example, I want the page to play an audio file while at the same time have some bullets slide into view at just the right moment that said bullet is talked about in the audio file. A similar effect would also be used for closed captioning. When I say reliable I mean specifically that the timing will be consistent across many common platforms (browser/OS/CPU/etc) as well as consistent in different sessions on the same platform (they hit refresh, it works again just as it did before, etc).
NOTE: It's OK if the answer is 'NO', but please include at least a little quip about why that is.
Check out this animation, which synchronizes a 3D SVG effect to an audio file.
The technique is explained in a blog post at http://mrdoob.com/blog/page/3. Look for the one entitled "svg tag+audio tag = 3D waveform". The key is to create a table of volume values corresponding to the audio file.
You'll obviously have some work to do in studying this example and the Javascript it uses to adapt it to your scenario. And it will probably only work in browsers that support HTML5.
Given the current situation and HTML5 support, I would solve this using Flash.