Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by SerenityNetworks

  1. 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.
  2. 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?
  3. 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
  4. 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
  5. 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);
  6. 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
  7. 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?
  8. 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
  9. 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
  10. 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
  11. 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.
  12. 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%
  13. 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
  14. 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
  15. Thanks. Yes, I'd much rather use a separate file. But this is for a (very) simple mobile application. The mobile application creation tool I will likely end up using doesn't support the uploading and referencing of a separate file. I can provide an external reference, but then the application would only work when the user is online. So I'm stuck with the choices of having an application that can't be used offline, imbedding the js in the application's code, or finding another mobile application creation tool that allows for a separate js file. The ones I've found, so far, that allow for a separate file are either expensive or harder to set up and use than I care to get into for my simple little project. That's the reason I'm embedding the CSS and JS within the application page.
  16. Yes, I understand that it won't cache. That's not an issue in this case, as this is a single page application. Do I just put the library within its own set of script tags at the bottom of the page? When I copy the library and put in within "script" tags in the page will it automatically work or will I need to reference the page itself somehow? So maybe instead of... <script type="text/javascript" src="js/jquery.js"></script> //my code</script> ...I would need to put something like... <script type="text/javascript" src="#"></script> //my code</script> I've never done this before, so I'm unsure of they syntax that should be used. Thanks, Andrew
  17. I'm stumped on triggering the sound. I set a global variable ("interval") to remember the previous time value. With the next iteration of the instance function I subtract the current time from the previously calculated time and if it equals 1 then I play the beep. But it's not working as I need. If I set the calculation to be performed on whole numbers ("interval = elapsed.toFixed(0)") then it works, but due to rounding the beeps are noticeably irregular. But if I set the calculation to be performed at toFixed(1) or toFixed(2) then I never get a beep. I'd think with the instance function being recalculated every 50 milliseconds that I should be able to play a beep accurate to 1/100 second without any problems. What am I missing &/or is there a better way to call the beep? Thanks again, Andrew // Call this on each interval function instance() { elapsed = ((new Date()).getTime() - startTime) / 1000; if (elapsed.toFixed(1) - interval == 1) { beep(); } display.value = elapsed.toFixed(1); // Remember that "display" was defined at the beginning of the script interval = elapsed.toFixed(1); //Global variable timeout = window.setTimeout(instance, 50); }
  18. Is it possible to copy the contents of my "jquery.min.js" file into the actual html page code and reference it as the script resource? If so, how would I reference the src? Right now I use something like what's in the code block below. But I may need or find it simpler to actually have a single page footprint instead of having the library in a separate file. <script type="text/javascript" src="js/jquery.js"></script>or <script type="text/javascript" src="https://drive.google.com/file/d/yaddayadda/view?usp=sharing"></script> Thanks in advance, Andrew
  19. Thanks for the tip (on the var snd = new Audio() line). I'll do so. (Not sure that I'm going to get to look at all the code provided now until maybe tomorrow night. It might not be until late this week. My granddaughter is in town and time is precious. I don't want anyone to think I'm blowing off the advice if I don't get back for a while.)
  20. For the metronome project, I'm just wanting to play a short (< 1 second) sound. For temporary (experimentation) use I've just been using what I've put in the 1st code block below. It works on a Windows machine, but I'm sure I'll have to change it up to reference a regular sound file for use on my phone. Perhaps something like I have in the second code block. function beep() { var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="); snd.play();} <audio id="sound1" src="images/this.wav"></audio><audio id="sound2" src="images/that.wav"></audio><button onclick="playSound1()">Sound 1</button><br /><button onclick="playSound2()">Sound 2</button><br /><script type="text/javascript">var audio1 = document.getElementById('sound1');var audio2 = document.getElementById('sound2');function playSound1(){ audio1.play(); }function playSound2(){ audio2.play(); }</script>
  21. I haven't yet had a chance to look at the scripts you have provided. I've got two projects I'm working on that use timers. What I'm trying to do with this script is avoid the slow drift from real time that we get if the JavaScript timer is used exclusively. So I'm trying to keep the time 'real' by referencing the host's system clock. For this particular project I'm making a metronome that I can use to keep a steady pace when running. I'll have a field where I can enter the pace I want to run and then the script will play a sound at that pace (ex: 180 beats/sounds per minute). I'll have a couple other features, such as displaying the elapsed time, but simply playing a sound at 'n' beats per minute is the main function. (Yes, the accuracy of the JavaScript timer would be fine for this metronome purpose, but I'm trying to learn how to keep sync with real time for use in my other project where I need a timer that syncs with video playback.) Does knowing any of this help with how that solution would be coded? Thanks again, Andrew
  22. Thank you very much. I will not have the opportunity to examine the scripting until late tomorrow, but for sure I will study it. I just didn't want to wait until tomorrow to reply. Thank you again. I learn a lot by studying the differences between code that's simply (or partially) working and code that's been optimized. Andrew
  23. Okay, sorry, I've made several attempts to understand and apply, but I'm not getting how to use what you've shown. (I'm just a noob hobbyist.) Would you please provide me with a bit more guidance? Thanks, Andrew
  24. I'm stuck on terminating my script, which right now just counts seconds. I can click the 'start' button, the script runs, and the seconds elapsed are displayed in the form. But I need to be able to stop the script using the 'stop' button and I can't figure out how to do so. (Note: When the script stops, I wish for the last elapsed value to remain displayed in the form.) What is the code I need to have the script stop as desired? Thanks in advance, Andrew <form id="myTimer" action="#"> <fieldset> <label> <span>Seconds:</span> <input type="text" name="secCounter" /> </label> </fieldset> <fieldset> <button type="submit">Start</button> <button type="reset">Stop</button> </fieldset> </form> <script type="text/javascript"> // timer function timer(form, stop) { if(stop) {exit();} else { var start = new Date().getTime(), time = 0, elapsed = '0.0'; function instance() { time += 100; elapsed = Math.floor(time / 100) / 10; if(Math.round(elapsed) == elapsed) { elapsed += '.0'; } form.secCounter.value = elapsed; var diff = (new Date().getTime() - start) - time; window.setTimeout(instance, (100 - diff)); } window.setTimeout(instance, 100); } function exit() { alert("This is not working. The script still runs."); return;} }; // start timer document.getElementById('myTimer').onsubmit = function() { timer(this); return false; }; // stop timer document.getElementById('myTimer').onreset = function() { timer(this, stop); return false; }; </script>
  • Create New...