I have identified a simple use-case where plugins don't work on firefox.
http://107.20.191.154/video-js/test.html
If you click this link, the "speed" plugin works on chrome and safari, but not for the latest version of firefox.
Any ideas why its not working? Perhaps I'm doing something wrong.
You have this:
$(function(){
var video = videojs("example_video_1", {
controls: true,
//more options
});
});
<video … data-setup='{"nativeControlsForTouch":false}'>…
Both having a data-setup attribute on the video element and the videojs() function would set up video.js. You shouldn't use both. One is "winning" on Firefox, he other on other browsers. You should use one method or the other, including all options you need there.
Related
In chrome there is the ability to break on DOM modification or attribute change.
Is there any such functionality in Safari? Or something similar.
It appears that as of Safari v9.0.3, the ability to break on DOM modifications does not exist in the Safari Developer Tools.
I'm exploring Electron and I've run into a roadblock. I can't figure out how to load the Dojo Toolkit and use it in Electron.
For example, here is the simple "Hello World" for Dojo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
That works fine in a browser, but doesn't work at all in Electron. After a couple hours of googling and trying 50 different experiments I've gotten nowhere.
Can someone please enlighten me?
While you can disable node-integration as Shwany said, I believe that will effectively render the ipc modules useless, which will probably pose undesirable limitations since you won't be able to communicate between the main and renderer processes.
However, it is possible, with a bit of finagling, to get Dojo to play nice with Electron. There are only a couple of things you need to do in your entry page.
Firstly, force the host-node has feature to false. This can be done by setting it in dojoConfig.has, e.g.:
var dojoConfig = {
async: true,
has: {
'host-node': false
}
}
Secondly, as Shwany pointed out, Dojo is going to see the already-existing require, so we need to move that out before loading Dojo:
// Move Electron's require out before loading Dojo
window.electronRequire = require;
delete window.require;
After loading dojo.js, you can move Dojo's require elsewhere and move Electron's back, if you wish. Whether you want to do this may depend on how you intend to code the client side of your application. Ostensibly, Dojo's global require is never needed, since you can request a context-sensitive require in any defined module via the 'require' module ID.
If you want to see a scaffolded Electron application incorporating Dojo, I created a boilerplate a few weeks ago (though be advised it's currently relying on a fork of electron-packager). If you want to see an example of a more full-blown Electron/Dojo application, I wrote a music player called Nukebox a couple of months ago which uses Dojo and dgrid (though its scaffolding is a bit different than the newer boilerplate).
I have your test code working in Electron.
First, I assume you are trying to load dojo.js from the web. //ajax.googleapis... etc will probably attempt to pull the file from the file system. I added http: to the front of it. That allowed me to open a .html file in the browser and work. I am not sure if that was an oversight or not.
Secondly, because the browser-window has node-integration on by default, 'require' is already defined and it does not understand what you are passing to it because it expects a path not an array. If you construct your browser window with node-integration turned off it should work:
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600, "node-integration": false});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Note the "node-integration": false. This may cause additional issues if you want to use node integrations in your app. However, your code should work.
I used the plugin to open up an internal page, which works fine with iframe but the preloader does not show up. I just want to display a preloader image or a "loading..." text. This is what I tried:
$(document).ready(function() {
$('.link').magnificPopup({type:'iframe', preload: true});
});
Is there something else I need to do?
If you look at the Javascript source of jquery.magnific-popup.js, the mfp.updateStatus('loading'); is never called in the iFrame code block. So what I did was simply add mfp.updateStatus('loading'); to the initIframe function and remove mfp.updateStatus('ready'); from the getIframe function. It may be better to add a setTimeout to call the mfp.updateStatus('ready') but it seems to work okay without that.
I have literally just copy & pasted the code from the YouTube developer page YouTube Player API Reference for iframe Embeds (from underneath the heading "Getting Started"). The only difference, is that I added an alert to fire when the state changed, because I thought I was doing something wrong within the onPlayerStateChange function.
You can see the jsFiddle at http://jsfiddle.net/jesMv/.
As stated, it's just an exact copy of the code from the YouTube developer page with the added
alert('State Changed')
as the first thing to fire in the onPlayerStateChange function.
Nothing is happening, however... No matter how I look at this and what I change, I simply can't get the onStateChange to do anything.
How can I fix this problem?
There was a temporary issue with the iFrame Player API (which was fixed in June 2013) that you can read about here: https://code.google.com/p/gdata-issues/issues/detail?id=4706
Jeff Posnick posted a temporary workaround here:
http://jsfiddle.net/jeffposnick/yhWsG/3/
As a temporary fix, you just need to add the event listener within the onReady event:
function onReady() {
player.addEventListener('onStateChange', function(e) {
console.log('State is:', e.data);
});
}
Make sure to remove the onStateChange event from the YT.PLAYER constructor (see the jsfiddle).
Also, as someone mentioned on the Google Code Issue Thread, you set an interval and poll the player for its current state instead of listening for the onStateChange event. Here is an example code snippet for doing that:
setInterval( function() {
var state = player.getPlayerState();
if ( playerState !== state ) {
onPlayerStateChange( {
data: state
});
}
}, 10);
Firefox and IE Issues
Other people have mentioned that Firefox will not instantiate the YouTube Player if it is placed in a container with the css property display: none. Internet Explorer will also not work with visibility: hidden. If you're finding this to be the issue, try positioning the container off the page with something like left: -150%.
Steve Meisner talks about this here: YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?
And another related SO question: YouTube iframe API - onReady and onStateChanged events not firing in IE9
Edit: I've edited this answer to be more thorough because people are still seeing this error after the original bug was fixed in 2013.
onStateChange does not work in any version of Internet Explorer or Edge. I assume it will begin working once Microsoft moves Edge over to being Chromium-based. But whether IE9, 11, or Edge, I cannot get this event to fire, even when it fires cleanly in Chrome, identical code.
I am trying to utilize the Google Bookmarks API for Chrome Extensions (this is not the Google Bookmarks API as in http://www.google.com/bookmarks/, but rather Chrome Bookmarks API).
Anyway, I just tried a simple example which I have the background.html and the manifest.json listed below. However, I am not getting the alert dialog box. I am not getting this problem if I switch to using tab events. What am I doing wrong?
manifest.json
{
"name": "Google Bookmark Integration",
"version": "1.0",
"description": "Integrates Chrome bookmarks with Google Bookmarks.",
"icons": { "128": "images/bookmark.ico" },
"background_page": "background.html",
"permissions": [
"bookmarks",
"http://*.google.com/bookmarks/*"
]
}
background.html
<script>
chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
console.log("Bookmark Created");
});
</script>
JavaScript is dynamically typed and function definitions shouldn't have type names. Instead of (string id, BookmarkTreeNode bookmark), you need to write just (id, bookmark). Your background.html should be:
<script>
chrome.bookmarks.onCreated.addListener(function(id, bookmark) {
alert("Dialog Box");
});
</script>
In addition, apparently Chrome has limited support for alert() inside extensions. (It worked for me in this particular case, but I've now found other cases where it doesn't.) Try console.log() instead. The Chrome Extensions documentation page on "debugging" has instructions for how to open the Developer Tools / JavaScript console for the background.html page, which you'll need to do.
To answer my own question, the problem here was that, not only do the permissions need to be set to "bookmarks" but they also need to be set to "tabs". Once I did this, the plug-in then recognized adding and removing bookmarks.
Very counterintuitive, but this is the solution.
If you want to see the console.log of the background script, then you need to go to chrome://extensions/ and click on Inspect views service worker and look for the message there.