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.
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 want my youtube playlist or playlists to play randomly songs. Optimally, i want a buttom that can refresh the page, so a new song will come on.
I have tried alot and could only find something that playing 1 certain video.
Is it possible to shuffle a playlist from the start?
In theory, each video in the playlist is assigned an index value. There is a difference between shuffling and refreshing the page. You can make a shuffle button that acts as a boolean, if it's on then the NEXT song (index number) will be randomly generated from the playlist, excluding the current songs index value.
Your question is very detailed and not language specific so I can't really help you further but that is my take on the logic behind what you need to do. Happy to help but best I can do is take a reasonable guess.
Edit*: Sorry, didn't see your Javascript tag, unfortunately I don't know Javascript.
This may well be a long-shot (I suspect some of the feature requests in the project I'm working on might be 'bordering on' pedantic) but is there a simple way - that doesn't involve designing a javascript video player - to lower the amount of time the html5 video player progress bar takes to disappear, once the mouse stops moving?
Yes, you read me right.
I guess what I'm hoping for is, say, an html attribute in the video tag that can be set to a certain amount of milliseconds, or something... I haven't been able to find anything, so I'm guessing the answer is 'no'.
Actually I'm hoping the answer is a straight 'no', but unfortunately I have to ask.
Any help, either way, much appreciated.
Thanks.
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.
I am working on a Flash Video player and am implementing the ability to start a video at x time within the span of an FLV (served from FMS). I am able to start it x seconds into a stream without any issue using
netStream.play(source, startTime);
but as far as I can tell, it only supports seconds. I am looking to be able to give a start time (or even a seek time if that is supported) in milliseconds, or really anything more precise than whole seconds.
Anyone know of any way to achieve this even by monkey patching the fl classes?
Thanks,
Doug
Well the seek will allow you to seek by a number of frames, but the spec says that it only seeks to the closes I-Frame in the FLV. That will become a problem with any method you use, because the I-Frames are the only ones that actually contain the whole picture frame (here's the gist of that).