Can't access YouTube API from Adobe Air (using JavaScript) - javascript

I'm really new to Adobe Air, and I'm trying to get a list of YouTube videos by a specific user using the YouTube API through JavaScript.
I've tried several examples that all seem to work great when I simply click on it (inside Aptana Studio) and Run as a JavaScript Web Application.
As soon as I try to run the same thing as an Adobe Air Application, I don't get any data. Why is that? I don't know if there's something very obvious that I'm overlooking or what.
This is what I was looking at most recently:
http://code.google.com/apis/youtube/2.0/developers_guide_json.html
Can someone point me in the right direction or tell me why this isn't working in Adobe Air?

Update: OK, here's how I got it working, for anybody visiting from 2019 (tip of the hat to http://xkcd.com/979/):
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
backgroundColor="#000000" verticalAlign="middle" horizontalAlign="center"
creationComplete="init()" borderStyle="solid">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public var html : HTMLLoader = null;
protected var url : String = null;
protected function init()
{
/* Your embedded html with all the youtube REST calls is in the "local"
subdirectory of the application directory. Note the relation between
the local url, the sandbox root and the remote url. */
var localUrl : String = "app:/local/yt.html";
var sandboxRoot : String = "http://youtube.com/";
var remoteUrl : String = "http://youtube.com/local/yt.html";
html = new HTMLLoader();
html.addEventListener(Event.COMPLETE, htmlLoaded);
/* Embed your youtube html in an iframe that is loaded dynamically. You
could also just have this html code in a separate html file and load
it through html.load() instead of html.loadString(). */
var htmlString : String = "<html>"
+ "<body><center>"
+"<iframe width='100%' height='100%' src='" +remoteUrl
+"' sandboxRoot='"+sandboxRoot+"' documentRoot='app:/' "
+" allowCrossDomainXHR='true'" /* May not be necessary */
+" id='yt' name='yt'></iframe>"
+ "</center></body></html>";
/* The next line is needed to allow the REST API in the embedded html
to call home when loading through loadString. */
html.placeLoadStringContentInApplicationSandbox = true;
html.loadString(htmlString);
}
protected function htmlLoaded(e:Event):void
{
html.removeEventListener(Event.COMPLETE, htmlLoaded);
frame.addChild(html);
trace("html load complete.");
}
]]>
</mx:Script>
<mx:UIComponent id="frame" width="100%" height="100%" visible="true"/>
</mx:HBox>
Note that this is a cleaned up version of my code and I haven't tried running it, so it may not work out of the box, but that's essentially it.

I believe the reason is that AIR does not allow external JavaScript files to be loaded:
http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f0e.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7ef7
I guess one option is to muck about with their cross-scripting and sandboxing stuff...

Related

Print PDF client side using javascript/jquery/java

I am trying to print the pdf using following code:
$('#print').click(function() {
var data = $(this).data('loc-subject');
alert(data);
var myWindow=window.open(data,'','width=500,height=500');
var doc = myWindow.document;
myWindow.document.writeln('<embed type="application/pdf" src="'+data+'" id="pdfDocument" width="100%" height="100%" />');
myWindow.document.writeln('<script type="text/javascript">');
myWindow.document.writeln('function load()');
myWindow.document.writeln('{');
myWindow.document.writeln('window.focus();');
doc.writeln('setTimeout(function() {window.print();}, 3000);');
myWindow.document.writeln('}');
myWindow.document.writeln('</scr'+'ipt>');
myWindow.document.writeln("<body onload=load()>");
myWindow.document.writeln("</body>");
myWindow.document.close();
});
But It has several flaws:
Not properly working in IE.
In Firefox its working fine but only printing the first page of pdf.
Using Iframe also giving the same result.
The PDF file is present server side on crx and I just want to print the pdf to the client machine on a link click.
If anybody has working code or guidance on this it would really help me here.
Thanks.

Get Image From Google Drive for Script-Based Web Page

I am trying to get a png image in google drive to appear on a google apps script html page. I can get the image to appear on the script html page if it is just at a URL somewhere on the web (see commented out line below), but not from google drive. Here is part of the code where I am trying to get as a blob and then use it in an image tag:
function getImage() {
//The next 2 lines don't produce the image on the page
var image = DriveApp.getFileById('File Id Goes Here').getBlob().getAs('image/png');
var image = '<img src = "' + image + '" width = "90%">'
//Note, the next line uncommented produces an image on the page
//var image = '<img src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width = "90%">'
return image
}
function doGet() {
var htmlToAppend = getImage();
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('Google Image').append(htmlToAppend).setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
The result is a missing image on the html page produced by the script, with the URL for the missing image ending in script.googleusercontent.com/Blob
Info on Blob is here: https://developers.google.com/apps-script/reference/base/blob (open in a separate page/tab)
Any help is appreciated.
If you can see the Using base64-encoded images with HtmlService in Apps Script or Displaying files (e.g. images) stored in Google Drive on a website, there are some workaround to get the image from drive.
One workaround is using the IFRAME sandbox mode, but this doesn't support old browsers.
All that's required is to call setSandboxMode() on your template, and your data URIs should work as expected:
var output = HtmlService.createHtmlOutput(
'<img src="data:' + contentType + ';base64,' + encoded + '"/>'
);
output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
The second is using the permalink of the file:
https://drive.google.com/uc?export=view&id={fileId}
But be noted that Serving images in an Apps Script through HtmlService is deprecated .
<img src="https://googledrive.com/host/0B12wKjuEcjeiySkhPUTBsbW5j387M/my_image.png" height="95%" width="95%">
Also, refrain from using same variable names to avoid error from occuring
Hope this helps.

ASP.NET MVC 5; using Office 365 online doc viewer to display word docs showing up in tiny thin window

We have been trying to display a Word document (.docx) in an iframe on our website using the Office 365 service. Our document is stored in One-Drive for business online and shared appropriately. We signed in and got a link to our document using various means available on Office 365 online. We then stored the link in our SQL database. Our website references the table with the stored URL and puts that information in the 'src' of the iframe and the document shows up in tiny sliver, despite setting the height of the iframe to 1100 and the width to 800. Code is below:
pseudo url
https://microsoft-my.sharepoint.com/personal/accountName/_layouts/15/WopiFrame.aspx?sourcedoc=blahblahblah&action=embedview
Partial View code:
#using Website.DataAccess.Models
#model List<Report>
#if (Model != null && Model.Count > 0)
{
foreach (var report in Model)
{
<div align="center">
#switch (report.DocType)
{
case ".docx":
<iframe src="#report.URL" frameborder="0" style="width:100%; height:1050px;" scrolling="yes" sandbox="allow-forms allow-same-origin allow-scripts"></iframe>
break;
case ".mp4":
<video width="800" height="600" controls>
<source src="#report.URL" type="video/mp4"/>
Video not supported.
</video>
break;
default:
<p>Document type not supported.</p>
break;
}
</div>
<div align="center">
#report.Name
</div>
}
}
else
{
<p>No files found.</p>
}
// don't honestly think this script is doing anything useful; just trying anyuthing
<script type="text/javascript">
window.addEventListener('load', function () {
if (typeof (EmbedManager) === undefined) {
EmbedManager.loadResult();
}
}, false);
</script>
We have tried for many hours to find a solution, including experimenting with the parameters of the url and the iframe and have come up with nothing. We haven't found anyone out there with this problem. Again, the viewport in the iframe is sometimes a centimeter tall, sometimes 5 centimeters tall, sometimes it shows the whole document. We have tried setting the size both in style and outside of style and nothing.
The document displays fine when you paste it into the address bar of the browser, but not inside an iframe on our setup. When running our site, nothing shows up in FireFox and Edge except an error saying we can't use an iframe for this content. Shows up in IE and Chrome though, just more often than not it's inside a thin viewport.
Any help would be appreciated, thank you.
Okay sorry everyone. Looks like UI from the main view was somehow interfering with the viewer's ability to display correctly. We are not sure what caused it, but have since moved partial view to a new page to solve the problem.
Thanks for taking the time to read my question and think about.
-L_Laxton

Java script to block video streaming on the webpage

I want to write a javascript which will be just put at the end of HTML pages and it should block the video streaming if its being done on those webpages.
Considering "embed" tag is used at many places, I tried writing below script which will link it to some webpage which has a jpeg image saying "Blocked Content" or something like that.
var embeds = document.getElementsByTagName("embed");
for(var i = 0; i < embeds.length; i++){
if(embeds[i].type == "application/x-shockwave-flash"){
embeds[i].type = "image/jpeg"
embeds[i].src = "Some link to a jpeg image on the web"
embeds[i].flashvars = {}
}
}
One of the websites I tried putting this script has used "swfobject.embedSWF" to stream videos, which also has flashvars variable set. So I am also trying to reset the flashvars here. But its not working. Can anyone please suggest how can I do this ?

Serving Alternative Flash Content

I'm adapting a Flash page to show alternative content when Flash is not available, however, the method it uses is not really ideal for a full-on alternative page with lots of content. Currently, the alternative content is served like this:
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js. In Flash, run \"Apply Active Content Update\" in the Commands menu to copy AC_RunActiveContent.js to the HTML output folder.");
} else {
// embed the flash movie
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0',
'width', '1000',
'height', '688',
'src', 'wot',
//etc, etc...
); //end AC code
}
} else { // flash is too old or we can't detect the plugin
var alternateContent =
'<p> </p>'
+ '<p>This website requires a newer version of the Adobe Flash Player.</p>'
+ '<p> </p>'
+ '<p> </p>'
+ '<p>Get the Latest Flash Player here.</p>'
+ '<p><img src="images/get_flash_player.gif" alt="Download Flash Player" width="88" height="31" border="0" /></p>'
+ '<p> </p>'
+ '<p> </p>';
document.write(alternateContent); // insert non-flash content
}
The new content I want to serve is much, much bigger than the "get Flash" message, however.
Is there a better way to serve up a lot of HTML (and javascript)? Via an include of some sort? I'm not sure I want to do any sort of redirect - or do I?
The best way is to use SWFObject,
have a div with your alternate system inside in then use SWFObject to load the flash player inside that div if flash player is installed
Look at : How to embed Flash Player content using SWFObject dynamic publishing on this page: http://code.google.com/p/swfobject/wiki/documentation
Under : How can you use HTML to configure your Flash content?
flashvars devicefont (more info)
allowscriptaccess (more info here and here)
seamlesstabbing (more info)
allowfullscreen (more info)
allownetworking (more info)
You need to feed them into your parameters,
var params = {allowscriptaccess:'always', allownetworking:'allways'}
Then feed that prams into your loader line
In addition to the HotHeadMartin's answer: there is a nice code generator here: http://www.bobbyvandersluis.com/swfobject/generator/index.html
Just choose 'dynamic publishing' and fill some text fields.

Categories