I'm trying to figure out what would be the best way to record a blackboard type of application in the webbrowser. Where a tutor can record a video of the blackboard with audio.
I think the obvious answer here is to make a html5 canvas and capture it at intervals as images and combine these to a video. Like so
However this has several disadvantages. It is not easy to edit the video later on. Also videos would require a lot of storage space.
What are your ideas? How can I construct this recording and playback of a blackboard?
/Jake
I am currently working on a project that records HTML5 canvas drawings and allows you to play them back later. There are no images, everything is stored in the Javascript/JSON. There is no audio, so I plan on adding a transcript feature along with it. If you want to follow along with my project, it is at http://github.com/eipark. The code is still very much raw and buggy, but I am actively developing it for a school project and hope to have at least the "video" recording portion done in the next week.
Related
I have an HTML list of music tracks in a website. Some of them can be previewed with an audio sample.
I want to implement a triangle (play button) in front of each of those tracks, so that the visitor can click on each of those and hear a short audio sample. If the visitor clicks on another track before the previous is done, the latter should stop and the new one should play.
Is this simple plan implementable without much effort? I am good at HTML and CSS, but i can't write JavaScript. I've researched the audio-controls attribute, but it gives me a complete player with a bunch of controls that i don't want displayed.
Are there any tutorials you guys could point me to, if this is only possible with java-script?
Wow, no answer for weeks...
But i found a solution myself. Everything that i described works with a small jQuery player i found here: https://github.com/kuantal/Multiple-circular-player . I can have multiple instances and the script is "intelligent" enough to let only one single instance play at the same time.
Props to the author of the script - well done!
I'm building a web app using ReactJS that will allow employees to view various video training sessions and then answer quiz questions about them. I would like to use HTML5 video elements to maximize compatibility across devices, but users can always just scrub through the video to get to the end and trigger the next operation in the app. It is necessary for them to watch the entire video before moving on.
I need a way to tell if the whole video has been played before allowing the user to move on. I was looking at the Video JS Advanced Examples page, and I found exactly what I was looking for. They have a 'played' data field that updates with what time ranges the user has played through. The problem is that I have no idea of how to implement that feature in my app. I can include and get VideoJS up and running just fine, but I don't know how to access the 'played' property of the video player.
If anyone could give me a direction to go in, I would really appreciate it. If this is a stupid question, I'm really sorry. I'm still fairly new to all of this. Thank you so much.
Cheers,
Jaydon
played comes form the html5 media spec. It returns a TimeRanges object.
Video.js provides most of the functionality of the native video element via methods. So, the played property on the video element (as vidEl.played) becomes a method call on the Video.js's player object (as player.played()).
The API to time ranges is a bit weird. But essentially, it has a three properties: length, start, and end.
This is what they do:
* length: how many ranges are there? In the case of played, how many different sections of the video have been played?
* start(): a method that tells you the start time of a given range
* end(): a method that tells you the end time of a given range
It's likely that you will only have one range, but it's possible you'll have more. So, you'll want to loop over the length of the ranges. To know exactly how much the user as played, you'll basically want to loop over each range and calculate it's duration (end(i) - start(i) and then compare it to the duration of the video (player.duration()). If they are close, that means that the user has watched the entire video.
I've put together a movie in Final Cut Pro 10.2.3 with a lot of edits cut to the beat of the audio track. It is synced perfectly when previewed within FCPX but is off by quite a bit after sharing regardless of what settings I choose. I've transcoded all my media and created optimized versions
If you are experiencing a sync problems with FCP, 95% of the time it is because of mixing audio sample rates. Final Cut Pro is having a difficulties in resolving them to match.
Firstly, verify that every audio clip within your Browser has exactly the same sample rate. A bad sign, is if you see a sample rate that is very close to 48,000 Hz, but it's not (for instance 47.998 Hz). Your best friends for preparing audio for sample-precision editing are Apple Logic or discontinued Soundtrack Pro 3.
Secondly, if you have multiple audio formats, transcode them to *.wav.
And only then edit.
Is there any significant performance/load time impact if single web page will load, say, 10 identical flash objects? 20? 30?.. any evidential data on sustainability of such kind of setup?
This would be the same flash app, each instance serving its own stream.
There's definitely going to be some overhead in size as there is a certain amount of code that is contained in every swf regardless of it's developer created content.
I'm almost certain there would be speed issues as well, which would see frame rates drop right down the more swfs you add to the page.
To be honest the concept smells a little fishy and i would think there must be a better solution to your problem.
EDIT
Also there is a restriction on having two steams coming over http per domain. Sure you could get around this but it will definitely be an issue.
I found this post which might help. The trick is to use SWFObject to embed your swf files.
I ran into a strange problem today. On the music charts page on Muziboo, I was displaying a list of songs and a playlist on the right. Each song has a small button player done in OpenLaszlo. In firefox everything was fine and in IE (not unusually), the page would freeze for sometime. This would happen once and repeat only if I delete cache and try again. I googled a bit and learnt that it's a good idea to embed give each swf a unique id otherwise the browser misbehaves. I then went ahead and used swfobject to embed the swf files and everything started working great!
Yes, it'll likely nuke the browser if you go too far down that road.
If you want to deal in multiple streams, perhaps combining all your would-be applets into one giant one might work better. It'll certainly offset the serious overhead you'd have with 10-40 of the little blighters.
If this is a music player, you want to have a serious look at doing some JavaScript remoting. It's fairly trivial to control a flash app via JS so you could have standard HTML/CSS controls without having to load up a billion flash instances.
Design-wise this just sounds like a bad idea. You'd be running multiple instances of the Flash player inside a browser, each of which has an individual cost, and the host (in this case the browser) will run all of them on the same thread (with the exception of certain elective asynchronous processes), so you're almost surely going to run into problems of various kinds -- jittery playback, UI blocking, processor burden, memory bloat, consequent instability of the host, etc.
Unless the SWFs are very tiny, and doing very little work, it seems like a design that's just asking for trouble. Indeed you could test such a thing fairly easily; have you run any tests yet? Just curious.
Also curious as to the requirements; we might be able to offer more constructive alternatives if we knew a little more about what you were aiming for. Have you considered simply loading all the SWFs into a single container SWF requiring only a single browser-hosted instance of the Flash player?
I'm looking for a simple way to put up musical "tunes" on a website.
So here's an analogy to explain my question:
Let's say I want to put up a couple of big triangles as a picture on my web page. I can either draw a bitmap and save as GIF/JPG/PNG, put it up somewhere on the internet, and link to it with an element. That works but the larger the picture the more space my image file takes up.
Alternatively, I can use SVG (even though Internet Explorer support is lacking, grr) and use vector graphics which uses very little bandwidth regardless of image size.
In the music world, I can use WAV or MP3 files. Works great -- but if I just want to publish a 1-minute song of simple notes, by knowing the durations & pitches, & don't care that it sounds 100% exactly like a piano or accordion, is there a way to (a) create a file with the song, and (b) put it online in a format that is space-efficient? 1 minute of MP3 usually takes up hundreds of kilobytes.
You could use a MIDI file, this stores durations/pitches etc. as you suggest. You should be able to easily find software to create this type of file. However you will probably find the results sound terrible, as it is very dependent on the synthesiser hardware/software that is available on the end-user's machine.
For what you need this might be reasonable though.
Look into playing music files on websites using Flash.
You can control the Flash through JavaScript calls.
This is currently the "recommended" way to play small audio clips in a website.
For larger media files, look into streaming FLV files using a Flash player.
Hope this helps :)
Check out the MIDI format for instruments.
http://en.wikipedia.org/wiki/MIDI