Jump to content


  • Content count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About SerenityNetworks

  • Rank
  • Birthday January 9

Profile Information

  • Gender
  • Location
    Allen, TX
  • Interests
    Service, wife, kids (anyone's), techie stuff, and things that get me outdoors; such as, obstacle course racing, fishing, hunting, and marksmanship.

Previous Fields

  • Languages
  1. Excellent. That makes sense. Thanks for the explanation.
  2. 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.
  3. 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?
  4. 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
  5. 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
  6. Turn video controls on/off

    UPDATE: Oh, gee! Never mind. I'm just blind. I needed doh == true, not doh=true. My page loads a video file. I desire a button that turns the video controls on and off. For the life of me, I can't figure out what I'm doing wrong in the code below. The var "doh" correctly identifies whether the video controls are on (true) or off (false). However, the IF statement always evaluates as if "doh" is TRUE. What in the heck is wrong with my IF statement? Thanks, Andrew document.getElementById("showControls").addEventListener("click", function (evt) { var doh = video.controls; alert(doh); if (doh = true) { alert("in if doh=true clause"); video.controls = false; evt.target.innerHTML = "<img alt='Show' />" } else { alert("in if doh=false clause"); video.controls = true; evt.target.innerHTML = "<img alt='Hide' />" } }, false);
  7. 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
  8. Determine equipment and method to serve up and work with video files

    Thanks for providing some direction. I'll compare this code with a page I have that opens a file directly from a URL, learn the difference, and what code I can skip when loading from a URL. Any suggestions on what would be the best method and type of device to use for serving up the video?
  9. Determine equipment and method to serve up and work with video files

    Perhaps. I'm looking to see if/how I can modify the code (below) to source a URL instead of a local path and if I do then will I have the same controls available. I'm not a coder by trade, but I muddle along; learning as I go. Still, I'm left with the questions of whether it is better to use code that would stream the video or use a progressive download method, and how best to serve up the video files. UPDATE: Here is a link to a page I put together with the basic functionality required. I stripped out the few hundred lines of code that actually do something and did my best to leave just the code relevant to the playing and manipulation of the video. So far I haven't seen an easy way to allow this code to play a URL versus loading a local file. But as I mentioned, I'm not a coder, so any assistance will be appreciated. Thanks, Andrew
  10. I currently have a tool that is an HTML page employing JavaScript to review video. It has the required features shown in the bullets below. It operates as designed, but only works with files on a local drive. I'd like to expand it's functionality to allow remote users to work with video files served up from a home based NAS or personal cloud type device. I don't know whether it's best to stream the video or have the page use a progressive download. I don't know what specific type of device would be best to use for serving up the video. (I currently have 50/50 fiber to the premises, but can upgrade to 100/100 or even 1000/1000, if needed.) Right now, I'm just trying to determine what's possible, the best method for accomplishing my goals, and the preferred type of device for serving up the video. Here are the features possessed by the current tool that will be required with the enhanced functionality. Display video within a browser window Support, at minimum, MOV and MP4 formats Controls: Play/Pause Mute/Unmute Playback speed Playback position (both know the current playback position of the video and be able to enter a value in a field, press a button, and be taken directly to that point in the video) Video display size Any help on getting me started in the right direction will be greatly appreciated. Thanks, Andrew
  11. Video playback tool on page doesn't work with MOV files on single PC

    Well this is very odd. I added your code to force the type for MOV files to both my test page and my production page (that has other features and functions). We now get: On the web server, the production page works fine in Firefox, but not in Chrome (on this one laptop - it works fine on all other machines). On localhost with XAMPP, the production page fails in both Firefox and Chome (on this one laptop - it works fine on all other machines). On the web server, the test page now fails in both Firefox and Chrome (on this one laptop - it works fine on all other machines). On localhost with XAMPP, the test page works fine in Firefox, but not in Chrome (on this one laptop - it works fine on all other machines). With your added code, both pages still work perfectly on all other machines I have for using to test. This is better, and workable, but it's still very odd that the configuration of this laptop causes problems. I wish we could figure out what's different about the laptop. Thanks again, Andrew
  12. Video playback tool on page doesn't work with MOV files on single PC

    I've seen the table before. It looks to be several versions behind. All I can say is that the MOV files play in the tool just fine in every browser on every PC I've tried, except this one laptop. You can try one of your files from this page, if you like. Thanks, Andrew UPDATE: I also tried loading an MOV file using the file path in the address bar. It runs in Firefox just fine on the laptop. It just won't run within the tool - on this one laptop.
  13. I'm using the code below to load and play MOV video files in a browser window. It's working with MP4 files, but not with MOV files - but only on this one laptop. The tool runs MOV files just fine on my desktop and a little netbook I have, but not on my laptop. Recently my hard drive failed on this laptop. I had to install a new hard drive then reinstall Windows 10 and other software. Now MOV files that used to play fine with the tool will not play. However, MP4 files will play just fine. The issue is not browser specific. The MOV files fail to play in Firefox, Chrome, IE, and Edge. They will not play whether I am loading the page from our web server or localhost (when running XAMPP). When I try to play the MOV files then the page returns the message: Cannot play video (type) "" I have no idea what general PC setting could be causing this issue. Any help will be greatly appreciated. Thanks in advance, Andrew // ---------- VIDEO LOADER ---------- var vvid = document.getElementById("video"); (function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL, displayMessage = (function displayMessageInit() { var node = document.querySelector('#message'); return function displayMessage(message, isError) { node.innerHTML = message; node.className = isError ? 'error' : 'info'; }; }()), playSelectedFile = function playSelectedFileInit(event) { var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('video'); muteUnmute(); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); if (canPlay === "no") { var message = 'Cannot play video (type) "' + type + '"'; } else { var message = ""; } var isError = canPlay === 'no'; displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; }, inputNode = document.querySelector('input'); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } inputNode.addEventListener('change', playSelectedFile, false); }(window)); sizer(70); //sets initial display of video to 70%
  14. Toggle Image

    Perfect! Thank you. Yes, vvid is an attribute and I had already set it in the code. It took me a little bit to digest and test, but I see what you are doing. I'll be able to apply this to several other buttons on the page. Ha! No doubt about that point. I'm quite sure there are many optimizations on the page that could be made. But the page works and it would be a bit much to ask someone to go through it all and optimize the content. Thank you very much for the help and instruction. Andrew
  15. Toggle Image

    I have an image I use to toggle between playing a video and pausing the video. The image also employs hover controls to highlight the image when the mouse is over it. <a onclick="playPause();" > <img id='hoverPlayPause' class="hover2" src="images/play_transparent.png" alt="Play/Pause" onmouseover="onHoverPlayPause();" onmouseout="offHoverPlayPause();" /> </a> The image link calls the following functions and styles. function playPause() { //vCurrentTime = vid.currentTime; if (vvid.paused) {vvid.play(); speed2(1.00); setInterv(); findWord(jQuery('#findWord').val()); } else { vvid.pause(); clearInterv(); } } function onHoverPlayPause() { $("#hoverPlayPause").attr('src', 'images/play_transparent.png'); } function offHoverPlayPause() { $("#hoverPlayPause").attr('src', 'images/play_transparent.png'); } <style> .hover2 { /* Slower, Back, Play/Pause, Forward, Faster buttons */ width: 30px; height: 25px; margin-bottom:10px; border:medium; border-color:black; border-style:solid; padding:2px; } .hover2:hover { /* Slower, Back, Play/Pause, Forward, Faster buttons */ background-color: #4CAF50; /* green */ width: 30px; height: 25px; margin-bottom:10px; border:medium; border-color:black; border-style:solid; padding:2px; } </style> I'd like to toggle the image between the (current) "play_transparent.png" image and a "pause_transparent.png" image, so the "pause_transparent.png" image displays while the video is playing and the "play_transparent.png" image displays while the video is paused. I've been unsuccessful in getting it to happen. I'm a hobbyist and can muddle my way through code somewhat, but I'm not a developer. I would appreciate assistance with the code to make the play/pause image toggle work. Thanks in advance, Andrew