SerenityNetworks

Members
  • Content count

    72
  • Joined

  • Last visited

Community Reputation

0 Neutral

About SerenityNetworks

  • Rank
    Newbie
  • Birthday January 9

Previous Fields

  • Languages
    EN

Profile Information

  • Gender
    Male
  • 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.
  1. 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?
  2. 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
  3. 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
  4. 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
  5. 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.
  6. 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%
  7. 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
  8. 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
  9. 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.
  10. 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
  11. 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); }
  12. 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
  13. 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.)
  14. 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>
  15. 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