Jump to content

Load file with list of video positions, fast forward video to time position, pause, fast forward to next position, pause, repeat


SerenityNetworks

Recommended Posts

 

Here's my setup and need:

  • I can load a video file onto my page.
  • I have an Excel file containing a list of timestamps that correspond to positions on the video.
  • I can convert the timestamps to video positions.  For example:
    • TimeStamp | currentTime
    • 15:00:05 | 5
    • 15:00:30 | 30
    • 15:00:35 | 35
    • 15:03:00 | 180
    • 15:12:10 | 730
    • 15:14:55 | 895
  • I will save the Excel file as a delimited .txt file.
  • I need to load the .txt file onto my page
    • I'm open to whatever method is best.  I just need it to display next to the video.
    • A scrolling area of some type is probably best.  The file may contain hundreds of rows.  I only need to display the timestamp corresponding to the current video position with a few timestamps before and a few timestamps after the current position.
  • When I play the video, I need it to fast forward at 'n' speed (e.g. 5x) to the first video position in the loaded .txt file and stop while I type in a textarea.
  • When I resume play of the video, I need it to fast forward to the next video position and stop, so I can type in the textarea.
    • Note:  I need the video to play in fast forward, not simply skip to, the next video position.
  • The process in the previous bullet repeats until the end of the video is reached.
  • While I'm at it, when the video pauses at a video position, I'd need to highlight the corresponding row in the area with the timestamp and video position.
    • I can tackle this later, but wanted to mention it now in case it influences that type of area where the timestamp is displayed.

I'm not a coder by trade, but I can muddle along when given some instruction.  I'd greatly appreciate some help on the best method to load and display the text file and then some example code (or reference) on how to step through the text file as I described.  I'm really not sure where to begin.

Thanks in advance,
Andrew

 

Edited by SerenityNetworks
Link to comment
Share on other sites

Take it one step at a time.  Assuming you're just using Javascript for all of this, as long as the text file is on the same domain as the rest of the site you can load it by sending an ajax request for the file, then processing the response from the server.  For each of the other things you want to do, look into the video element to see which events you can use and some of the properties and methods.  For example, to change the playback speed:

https://www.w3schools.com/tags/av_prop_playbackrate.asp

Check here for the other properties, methods, and events that you can use:

https://www.w3schools.com/tags/ref_av_dom.asp

Just break things down into individual pieces that you can figure out how to do, and then put them together into your larger project.

Link to comment
Share on other sites

Thank you for getting me started on this.  Sorry that I wasn't clear on what I can do and where I need help.

  • Yes, I'm using JavaScript for all this.
  • I do know how to manipulate the video.  That is, I can speed it up, slow it down, know where I'm at in the video, pause it, etc.
  • Ugh, I hadn't thought through getting the .txt file contents loaded.  No, it won't be on the same path or even the same domain as the rest of the site.  The user will load the page from a hosted server.  The .txt file will be on their local machine.
    • I've been thinking that I'd have the user browse to the file and have it load into a textarea, but I didn't want to presume that is the best solution.  It's simply the only method that I know how to do, other than have the user cut from the text file and paste into a textarea.
    • So as you say, getting the text file onto the web page is the first step.  Is browsing to the text file and loading it into a textarea the best way to go, or is there something else you would suggest that I look into?  If browsing and loading into a textarea is the way to go then the next step is stepping through the rows in the loaded text file.
  • Stepping through the timestamps I've loaded.
    • I have only some clue as how to accomplish this task.
    • I'll need to identify the first time stamp.  I do know how to search the text string and find it.
    • Then I need to fast forward to that time stamp.  (I can likely figure this out, but I won't turn down help.)
    • Once at the first time stamp and paused, the user will enter some information into a separate textarea.  This I know how to do.
    • Then I'll need to identify the next time stamp and fast forward to it, repeating the process.  I'm thinking that I will just search for the next time stamp that's greater than the current video position, but I don't know if that's the best method or not.  Thoughts?

Hopefully this additional information will allow you to better assist.

Thanks again,
Andrew

 

Link to comment
Share on other sites

You can use the FileReader API to read a file on the local machine that someone picks with a file input:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

I'm thinking that I will just search for the next time stamp that's greater than the current video position, but I don't know if that's the best method or not.

That sounds like the way to go.  When you parse the text file you can build an ordered structure that you can search through to look for the next or previous timestamp.

Link to comment
Share on other sites

Thank you.  I'll take a look at the FileReader API.

Please note that this is a side project of mine.  I only work on it in spare moments.  Depending on how hard it is for me to digest the FileReader API methods, it may be a few days before I can get back to this post with any results.  I just don't want anyone to think I'm ignoring or abandoning the thread.

Thanks again,
Andrew

Link to comment
Share on other sites

Thanks for the direction.  The FileReader API works great.  I can load the content I need right onto the page.  I'll need to tweak the CSS for the display, but that can be done later.  Now I need to work on parsing out the video position and seeing how to fast forward to that position.  I don't think I'll have any trouble parsing out the video position, but I'm not sure yet how to fast forward to that position.  Any tips on this task?

Link to comment
Share on other sites

Set the playback rate and play the video, and use the timeupdate event to continually get the current time, then stop when it's where you want.  Keep in mind that the timeupdate event probably doesn't fire for every millisecond or whatever, so instead of looking for a specific time you'll probably need to check if it's passed the next position.

Link to comment
Share on other sites

Thank you.  I was a bit concerned that something like the timeupdate event would be too CPU expensive and was wondering if there was something else that wasn't a near-continual check.  I'll give it a whirl.  And thanks for the suggestion to check if it's gone past the desired position.  I wouldn't have thought of that.

Link to comment
Share on other sites

As far as I know, those events will fire regardless of whether or not you're listening for them.  The browser will still fire all of those events whenever they happen.  It might take a little extra time to run your function, but if your function takes a really long time to run I bet the only thing that will happen is that the browser will end up firing that event less often.  The majority of the time when that function runs it should be fairly quick though, it will just get the next position it's looking for, get the current time, see that they don't match, and end.  That shouldn't take very long.  It will take a little longer if the time matches, but if that happens you'll stop the video anyway.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...