Control Youtube video player using Javascript from FireFox addon - javascript

I wrote a FireFox addon which has a button on the toolbar.
On click event, I am trying to find the EMBED element and try to call pauseVideo() on it, but it doesn't work.
I am sure the object I get is the EMBED so no doubt about that, because I display the 'src'
var p1 = content.document.getElementById("movie_player");
window.alert(p1.src);
The problem is pauseVideo() doesn't work:
try
{
p1.pauseVideo();
}
catch(e)
{
window.alert(e); // this gives 'pauseVideo() is not a function'
}
Also, the 'allowscriptaccess' attribute is set to 'always'.
Any idea why it doesn't work? I am out of ideas.
Thanks!

Make sure the enablejsapi is set.
https://developers.google.com/youtube/player_parameters#enablejsapi

You need to use postMessage to communicate with Youtube player, something like this:
var doc = content.document;
var scpt = doc.getElementById("uniq_script_id");
if (!scpt) {
scpt = doc.createElement("script");
scpt.type = "text/javascript";
scpt.id = "uniq_script_id";
var code = [
'window.addEventListener("message", function(e) {',
' var cmd = e.data;',
' var player = document.getElementById("movie_player");',
' player[cmd]();',
'}, false);'
].join('\n');
scpt.textContent = code;
doc.body.appendChild(scpt);
}
window.postMessage("pauseVideo", "*");

Related

Closing a popup window after performing print

I have a requirement tp popup a window display a pdf page, perform silent print and close the same.
String s =
"var win = window.open('PrintPopUp.jsf','_blank',\"height=300,width=200,scrollbars=no," +
"status=no, resizable=no, screenx=0, screeny=0\");" +
"win.onclick= function(){ win.close();}"
I used the above code to get the popup , on click of print I write this code to my page and the following to call a servlet to generate the pdf;
FacesContext context = FacesContext.getCurrentInstance();
HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest();
HttpServletResponse response = (HttpServletResponse)context.getExternalContext().getResponse();
RequestDispatcher dispatcher = request.getRequestDispatcher("/hisprintservlet");
My question is this, I have been able to bring up the window, perform silent print but no matter what I do the popup wont close.
I am using IE 11 and the project uses ADF 12c.
Please help..
Checkout the docs on Popups here.
function showPopup(event)
{
event.cancel();
var source = event.getSource();
var popupid="popup";
var popup = AdfPage.PAGE.findComponentByAbsoluteId(popupId);
if (!popup.isPopupVisible())
{
var hints = {};
hints[AdfRichPopup.HINT_LAUNCH_ID] = source.getClientId();
hints[AdfRichPopup.HINT_ALIGN_ID] = source.getClientId();
hints[AdfRichPopup.HINT_ALIGN] = AdfRichPopup.ALIGN_AFTER_START;
popup.show(hints);
}
}
function hidePopup(event)
{
event.cancel();
var source = event.getSource();
var popupId = source.getProperty("popupId");
var isCanceled = source.getProperty("isCanceled");
var popup = AdfPage.PAGE.findComponentByAbsoluteId(popupId);
if (popup.isPopupVisible())
{
if (isCanceled)
popup.cancel();
else
popup.hide();
}
}
...
...
Hello World!
...
...
I found a solution for this.. i added an iframe to my popup window. In the body tag I added the followingg code to close ..
function test(win){if(win==null){alert('null');} else {setTimeout(function(win){this.close();},3000);}}
This works well in IE11

Why does calling a function onclick not work all the time in Chrome and FF, but works in IE?

I have the below code:
<HTML>
<HEAD>
<SCRIPT>
function myFunction(atlasTrackingURL)
{
var atlasURL = atlasTrackingURL;
if (!atlasURL) return;
//Build a cache busting mechanism
var timestamp = new Date();
var queryString = "?random=" + Math.ceil(Math.random() * 999999999999) +
timestamp.getUTCHours() + timestamp.getUTCMinutes() +
timestamp.getUTCSeconds();
//Build the final URL
atlasURL = atlasURL + queryString;
if (!document.getElementsByTagName || !document.createElement
|| !document.appendChild)
{return false;}
else
{ //Activate the JACTION call
var script = document.createElement("script");
script.type = "text/javascript";
script.src = atlasURL;
document.getElementsByTagName("head")[0].appendChild(script);
return true;
}
}
</SCRIPT>
</HEAD>
<BODY>
Test - Click Me
</BODY>
</HTML>
It works in Internet Explorer every time, but rarely works in Chrome and Firefox. Why would this be?
Can these browsers not handle a function onClick very well? Are there any other options I can take?
I am trying to help a client figure out why one of their tracking tags are not firing off all the time on click in these browsers.
Thanks,
You've got some kind of browser-dependent race condition going on, as Musa pointed out.
Try hiding the link initially, waiting for the document to load, and then adding the onclick attribute and revealing the link with javascript.
So, for example, change the link HTML to something like:
<a id="microsoft-link" href="http://www.microsoft.com" style="display: none;">Test - Click Me</a>
And add in your javascript, below the myFunction(), something like:
document.addEventListener('DOMContentLoaded', function(){
var link_elem = document.getElementById("microsoft-link");
link_elem.onclick = function() {
myFunction('http://view.atdmt.com/jaction/adoakb_PiggybackJSTest_1');
};
link_elem.style.display = 'inherit';
});
jsfiddle -- http://jsfiddle.net/m8VTy/3/
edit: I realized I may be misinterpreting what you're trying to do. What exactly is myFunction() supposed to accomplish ?

Can I use javascript timer in a mobile browser

I am using IE in a mobile browser. I add a javascript function to a button that when the User clicks it says 'hello'.
This works.
I then add a timer.
On a desktop browser it works.
it does not work on my mobile browser.
This is my code. (note I Had just tried placing an alert('hi'); in the swapImages() and that did not work either.
var div = document.getElementById('divImage');
var imgCached = document.getElementById('imgCached');
document.execCommand("BackgroundImageCache", false, true);
function OnImgLoaded() {
img1.src = imgCached.src;
}
var interval = 30;
var _timer;
var _index = 0;
function test() {
_timer = setInterval('swapImages()', interval);
}
function swapImages() {
imgCached.onload = OnImgLoaded();
imgCached.src = 'my server url~/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
}
UPDATE!!
I had been runningit on Chrome desktop and not IE. I am mow testing it in IE desktop. I get the same erro so now I can debug.
The error is this line:
img1.src = imgCached.src;
It tells me:
Unable to get property 'src' of undefined or null reference
I have changed the code to:
var imgLive = document.getElementById('imgLive'); (I have renamed the img control)
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
I get the same error.
I look in Source and the control is correctly named..
Thanks
i'm not sure that the following line is valid in your mobile phone:
imgCached.src = 'http://127.0.0.1/Cloud/test/' ...
the timer executes successfully, but the image doesn't get the proper src since the device doesn't run a web server on it (unless you configured one).
and to answer your topic question, yes- you can use javascript timers in mobile browsers just like desktop browsers.
hope that helped.
First of all: Do you ever call the test function, that starts the timer?
Second: Maybe it's really document.execCommand("BackgroundImageCache", false, true), that fails - it may not be enabled in the mobile version of IE that you are using. You can check if it's enabled using the queryCommandEnabled function, see more here: http://msdn.microsoft.com/en-us/library/ie/ms536676(v=vs.85).aspx

Visual Studio, Windows 8 HTML5 Javascript Questions

Was not sure what to title this post, I've been having a go at trying to make a little Windows 8 app, I don't have much knowledge and sorry in advance if this is hard to understand, below is my itemDetail.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
element.querySelector("article .item-title").textContent = item.title;
element.querySelector("article .item-subtitle").textContent = item.subtitle;
element.querySelector("article .item-image").src = item.backgroundImage;
element.querySelector("article .item-image").alt = item.subtitle;
element.querySelector("article .item-content").innerHTML = item.content;
element.querySelector("article .track1").innerHTML = item.track1;
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion("http://www.ikkmusic.com/ikkmusic.com%20mix.mp3"));
},
});
function getStartVideoFuntion(src) {
return function () {
// Set video element's source
var vid = WinJS.Utilities.query("#playback")[0];
vid.src = src;
vid.play();
};
}})();
So I have a file called data.js which has all the sample data in, and I'm getting the info here and displaying it and it works fine, but my problem is with the bottom one (below) where the url is shown, when the button is pressed it plays the url in the html5 player tag, this works, is there a way for me to put the contents of item.track1 where the URL is now, I can't get it to put the contents of the data there.
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion("http://www.ikkmusic.com/ikkmusic.com%20mix.mp3"));
WinJS.Utilities.query("#playMP3").listen("click", getStartVideoFuntion(item.track1));

Javascript link tracking script + Safari

I'm trying to make a link tracking script. It should work like Google Analytics only it should make posts to our own server. I'm using jQuery for this. The code i have written so far is the following:
jQuery(document).ready(function() {
var opts;
jQuery.fn.trackAllLinks = function(settings) {
settings = jQuery.extend({}, jQuery.fn.trackAllLinks.defaults, settings);
opts = settings;
function track() {
href = jQuery(this).attr('href');
var trackImage = new Image(1, 1);
trackImage.src = opts.linkredirector + '?eurl=' + jQuery.URLEncode(href) + '&rnd=' + new Date().getTime() + '&title=trackerimage.gif';
trackImage.onload = function() {
trackImage.onload = null;
doNothing();
}
delay(300);
return true;
};
function delay(mseconds) {
var currentTime = new Date();
var endTime = currentTime.getTime() + mseconds;
while (currentTime.getTime() < endTime) {
currentTime = new Date();
}
}
function doNothing() {
}
if(jQuery(this).is("a")) {
jQuery(this).click(track);
}
jQuery(this).find("a").click(track);
};
jQuery.fn.trackAllLinks.defaults = {
linkredirector : '__url_to_post_on__'
};
});
It works fine in all browsers except Safari. When i'm using a mailto link or an anchor it works but when i'm linking to another page it doesn't work. I have been testing a lot of different implementations and i can't get it to work. Any of you have an idea what i'm missing? I have tried to understand how Google Analytics works and as far as i can see it does the same. When i use WireShark to monitor my network i see that the image of Google is being requested but that my image isn't.
greets,
Daan
This is random, but you might try adding a randomized parameter in the query string (both the name & value), like:
Math.random(0, 1000) + '=' + Math.random(0, 1000)
I've had to do that in the past to get Safari to register a dynamically loaded resource.
(I see you have &rnd= already, but maybe try randomizing the name, too?)

Categories

Resources