• Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
SerenityNetworks

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

10 posts in this topic

Posted (edited)

 

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

Share this post


Link to post
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.

Share this post


Link to post
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

 

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Excellent.  That makes sense.  Thanks for the explanation.

Share this post


Link to post
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