Setting currentTime to anything sets time back to 0 in videojs - video.js

I'm doing something fairly simple with videojs. I simply want to set the time to an arbitrary point on the timeline by clicking on an externally build UI (not the default seek stuff, but a set of divs that are acting like a progress bar.)
All the documentation and every post seems to indicate that setting currentTime as in object.currentTime(time) works. But in my case it doesn't. Not in the console, not anywhere.
Here's my code:
function clearSetTimeBug(videoObj,timeToSetTo){
console.log('timeToSetTo:'+timeToSetTo);
console.log("-1."+videoObj.id()+" readyState(): "+videoObj.readyState());//returns 4 (loaded)
console.log("0."+videoObj.id()+" bufferedEnd(): "+videoObj.bufferedEnd());//returns about 2 seconds ahead of where the playhead is)
if(videoObj.bufferedEnd()>timeToSetTo){
console.log("1."+videoObj.id()+" currentTime(): "+videoObj.currentTime()); // returns a valid videojs object id and then shows the currentTime to be where the video's current timecode as a float.
videoObj.currentTime(timeToSetTo);//this should totally work!
console.log("2."+videoObj.id()+" currentTime(): "+videoObj.currentTime());// shows that the current time is 0!
}else{
//I added this to just go to as far as it's buffered, but this doesn't work either
console.log("3."+videoObj.id()+" currentTime(): "+videoObj.currentTime());
console.log("4. newTime: "+videoObj.bufferedEnd());
videoObj.currentTime(videoObj.bufferedEnd());
pageTime=videoObj.bufferedEnd();
console.log("5."+videoObj.id()+": "+videoObj.currentTime());// still shows that the current time is 0!
console.log("6. pageTime:"+pageTime);
}
}
The player is spun up like this:
function setUpPlayers(playerId,playlist,local_file,index){
let myAspectRatio=heightRatio+":1"
let videoTag="";
videoTag +="<video id='playerInstance"+index+"' class='video-js vjs-fluid' width='100%' height='100%'>\n";
videoTag +="\t<source src='"+playlist+"' type='video/mp4'>\n";
videoTag +="</video>\n"
$('#player'+index).html(videoTag);
window["vjPlayer"+index]=videojs("playerInstance"+index, {"autoplay": false, "preload": "auto" });
}
Play() and pause() and even currentTime() to get the current time works. But trying to set it just forces the player to go back to 0.
I'm working in a Mac in Chrome Version 86.0.4240.80 and Firefox Developer's Edition 71.0b1 (64-bit). These are all local files and I'm running it from http://localhost:8000/index.php.

In the video.js github channel, I figured out the answer to this question. I hadn't checked it on my server, so running the page locally screwed up the ability to click around and set currentTime. Quite strange, actually. I'm still not sure why it happens. You can see the comment here: https://github.com/videojs/video.js/issues/6900
Not the smartest move on my part, but hopefully this might help someone else in the future.

Related

How to add modernizr build so that I can properly check Modernizr.capture? (currently always undefined)

I need to check if the user's device can input from a camera on my site. To do this I am attempting to use modernizr. I have followed the steps/example code provided on their site but when I test the capture attribute, I always get undefined, regardless of if I am on a device that supports capture.
Steps I followed:
I browsed for the input[capture] attribute and added it to the build
I copied the demo code to check this feature and added it to my project
I downloaded the build, added the js file to my project, and included the appropriate reference in my page
However after all of this, when inspecting Modernizr.capture in the chrome inspector, it always shows up as undefined.
My basic check function is as follows:
$scope.hasCamera = function() {
if (Modernizr.capture) {
// supported
return true;
} else {
// not-supported
return false;
}
}
This is my first time using Modernizr. Am I missing a step or doing something incorrectly? I also installed modernizr using npm install and tried adding the reference to a json config file from the command line.
Alternatively, how might I check if my device has a camera?
Thank you very much for your time. Please let me know if I am being unclear or if you need any additional information from me.
A few things
while photos are helpful, actual code hosted in a public website (either your own project, or on something like jsbin.com) is 10x as useful. As a result, I am not sure why it is coming back as undefined.
The actual capture detect is quite simple. It all comes down to this
var capture = 'capture' in document.createElement('input')`
Your code is a lot more complicated than it needs to be. Lets break it down. You trying to set $scope.hasCamera to equal the result of Modernizr.capture, and you are using a function to check the value of Modernizr.capture, and if it is true, return true. If it is false, return false. There is a fair bit of duplicated logic, so we can break it down from the inside out.
Firstly, your testing for a true/false value, and then returning the same value. That means you could simplify the code by just returning the value of Modernizr.capture
$scope.hasCamera = function() {
return Modernizr.capture
}
While Modernizr will always be giving you a boolean value (when it is functioning - without seeing your actual code I can't say why it is coming back as undefined), if you are unsure of the value you can add !! before it to coerce it into a boolean. In your case, it would make undefined into false
$scope.hasCamera = function() {
return !!Modernizr.capture
}
At this point, you can see that we are setting up a function just to return a static value. That means we can just set assign that static value directly to the variable rather than setting up a function to do that
$scope.hasCamera = !!Modernizr.capture
Now, the final thing you may be able to do something better is if you are only using Modernizr for this one feature. Since it is such a simple feature detection, it is overkill to be using all of Modernizr.
$scope.hasCamera = 'capture' in document.createElement('input')`

cue.enter event for video tag doesn't work?

I tried the following code (using the javascript commands for the html5 video tag) and it failed. I'm wondering if there is something very visible that I'm doing wrong. I'm trying to make the video pause whenever a cue is entered...
here is the code:
var cue0 = new TextTrackCue(20.200,20.200, ' woman in defensive karate pose');
cue0.id = 'cue0';
cue0.onenter="function() {myPlayer.pause();}";
Could be a lot of problems from your code. I see, that startTime is equal to endTime, which means, that your cue is never entered.
I made a simple working example
cue = new TextTrackCue(5, 15, "woman in defensive karate pose");

facebook asynchronous validation doesn't show errors

The javascript console keeps showing "Not a custom field name: username" when its supposed to show an error for the username field. There clearly is a field named "username". I tried changing it to some other name everywhere, but it still didn't work.
Any idea what is going on?
<fb:registration redirect-uri="<?=$pageurl?>"
fields="[{'name':'name'},{'name':'email'},{'name':'location'},{'name':'username','description':'Username','type':'text'},{'name':'password','view':'not_prefilled'},{'name':'captcha','view':'not_prefilled'}]"
onvalidate="validate" width="400"></fb:registration>
and my validate function...
function validate(form,cb)
{
console.dir(form);
$.get('/api/?f=user_email_present&username='+form.username+"&email="+form.email,function(data){
console.log(data);
if(data.username==false)
{
cb();
}
else
{
if(data.username=='username')
cb({username: 'That username is already taken. Please try another username.'});
else if(data.username=='usernamelength')
cb({username: 'The username cannot exceed 20 characters in length.'});
}
});
}
I can't be too sure, but I think I remember all this working a while back. Took me by complete shock when we are 2 days from launch.
Update: I scrapped out asynchronous validation and used the other validation. It still throws the same error!
After spending the better part of two days, I managed to figure out what is going on. It is a silly but potent bug on facebook's end. If the width of the widget is too less, it gives this error. Increasing the width to 800px fixed it promptly. Probably they don't render the proper error fields when the width is too small.
I have filed a bug report: https://github.com/facebook/connect-js/issues/275
If you guys can give it a shot and comment on my bug report so that they can take action immediately, it would be awesome.

How to remember variables with Greasemonkey script when a page reloads

Ive got an problem currently on an mobile site that i'm running directly in my pc's firefox browser. Everytime a button is clicked, the page reloads, thus resetting my variables. I've got this script:
// ==UserScript==
// #name trada.net autoclick 55_1min_mobile
// #namespace airtimeauction auto click
// #include http://www.trada.net/Mobile/
// #version 0.1
// #description Automatically click // ==/UserScript==
var interval = 57000;
var bidClickTimer = setInterval (function() {BidClick (); }, interval);
var numBidClicks = 0;
function BidClick ()
{var bidBtn1=document.getElementById("ctl00_mainContentPlaceholder_AirtimeAuctionItem7_btn_bidNow");
numBidClicks++;
if (numBidClicks > 500)
{
clearInterval (bidClickTimer);
bidClickTimer = "";
}
else
{
bidBtn1.click (1);
}
};
BidClick();
It should click the button every 57 seconds, but the moment it clicks the button, the page reloads, thus resetting the variables. How can i get greasemonkey to "remember" or carry over the variables to the next page/script when it reloads? Will it have something to do with GM_setValue? It will only be this few variables, but the second problem or question wil be, will it subtract the few seconds it takes the page to reload from the "57" seconds? How do i compensate for that?
In addition to GM_setValue...
you also can use the new Javascript "localStorage" object, or a SQL Javascript API.
The advantage of the SQL approach is it is very meager in its resource consumption in a script (think about it; rather than concatenating a humongous string of results, you can tuck away each result and recall it if needed with a precise query. The downside is you have to set up a SQL server, but using something like SQLite that's not a big deal these days. Even postgres or mysql can be quickly spun on a laptop...
Yes, I think you have to use GM_setValue/GM_getValue.
And if you have to do something exactly every 57 seconds, then calculate the time when the next action should take place after the reload, and store it using GM_setValue.
When your script starts, read first if the next action is stored, if it is, use that time to schedule the next action, and calculate the time for the action after that, and so on...
GM.setValue will set a value indefinitely and is scoped to the script, but will work if your script runs across multiple domains.
window.localStorage will set a value indefinitely and is scoped to the domain of the page, so will not work across domains, but will work if you need several GreaseMonkey scripts to access the same value.
window.sessionStorage will set a value only while the window or tab is open and is scoped to only that window or tab for that domain.
document.cookie can set a value indefinitely or only while the browser is open, and can be scoped across subdomains, or a single domain, or a path, or a single page.
Those are the main client-side mechanisms for storing values across page loads that are intended for this purpose. However, there is another method which is sometimes possible (if the page itself is not using it), and can also be quite useful; window.name.
window.name is scoped to the window or tab, but will work across domains too. If you need to store several values, then they can be put into an object and you can store the object's JSON string. E.g. window.name = JSON.stringify(obj)

Possible dijit.Tree Cookie issue (SaveStateCookie)

So our app is set up like the standard left frame with the tree, right frame has the main content (loaded from clicking the tree).
Our web app inconsistently displays a blank page in the main frame in Firefox. By inconsistent I mean everyday for a few, rarely for others, never for most. Once we get this, going to any other page through our tree results in a blank page. We found that deleting the "aTreeSaveStateCookie" restores normal operation. "aTree" is the name of our Div. I found "SaveStateCookie" strings in dijit/Tree.js.
This also happens in IE, except I would get a browser error page which I can't recall right now. I would then delete the only cookie I could find for our app (not sure how to do the Firefox steps in IE)
Any ideas on why this would happen?
Thanks
Dojo 1.3 through http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js
Firefox 3.1x
IE 8
Windows XP
In my case, I don't recall ever changing browser settings around Private Data.
Please check to see if the response code is 413 (413 = request entity too large), usually this happens when the cookie(s) used to store the tree(s) expansion state (aTreeSaveStateCookie) exceed(s) the maximum request size for your server
You could try increasing the maximum request size (follow instructions for your specific web app server) or at least display a meaningful error message like "please clear your browser cache" when the 413 error code is encountered
If the persist property is set to a truthy value, dijit.Tree is persisting its state to remember which nodes were expanded, and expand them after a page reload. If you need to persist the tree state in presence of a very large data structure, I recommend overriding Tree to use localStorage instead of dojo.cookie.
This is Dojo v. 1.9, but similar changes can be done to the non-AMD version 1.3
_saveExpandedNodes: function(){
if(this.persist && this.cookieName){
var ary = [];
for(var id in this._openedNodes){
ary.push(id);
}
// Was:
// cookie(this.cookieName, ary.join(","), {expires: 365});
localStorage.setItem(this.cookieName, ary.join(","));
}
},
And:
_initState: function(){
// summary:
// Load in which nodes should be opened automatically
this._openedNodes = {};
if(this.persist && this.cookieName){
// Was:
// var oreo = cookie(this.cookieName);
var oreo = localStorage.getItem(this.cookieName);
if(oreo){
array.forEach(oreo.split(','), function(item){
this._openedNodes[item] = true;
}, this);
}
}
},