Embedding VLC plugin on HTML page - javascript

I have a html file (getStream.html) that takes a stream from a certain url and show it. The code is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Vids</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body onload='player("http://mystreamaddress:8080");'>
<div id="player">
<object type="application/x-vlc-plugin"
id="vlcplayer"
width="864px"
height="540px"
classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921">
<param name="Volume" value="100" />
<param name="AutoPlay" value="true" />
<param name="AutoLoop" value="false" />
</object>
</div>
<div id="controls">
<input type="button" onclick="play();" value="Play" />
<input type="button" onclick="pause();" value="Pause" />
<input type="button" onclick="stop();" value="Stop" />
<input type="button" onclick="mute();" value="Mute" />
</div>
<script type="text/javascript" language="javascript">
var vlc = document.getElementById("vlcplayer");
function player(vid) {
try {
var options = new Array(":aspect-ratio=16:10", "--rtsp-tcp", ":no-video-title-show");
var id = vlc.playlist.add(vid,'Video',options);
vlc.playlist.playItem(id);
vlc.video.fullscreen = true;
//vlc.video.toggleFullscreen();
}
catch (ex) {
alert(ex);
}
}
function mute(){
vlc.audio.toggleMute();
}
function play(){
vlc.playlist.play();
}
function stop(){
vlc.playlist.stop();
}
function pause(){
vlc.playlist.togglePause();
}
function fullscreen(){
vlc.video.toggleFullscreen();
}
</script>
</body>
</html>
If I have this page on my pc and I try open it (using IE 7/8/9), all works good, but If put this page on my server, and then I access to it from a url like this: http://myserver/direcortyOfMyhtmlFile/getStream.html
the page is opened and the buttons are loaded, but I obtain the following error:
in IE8 and IE9:
That in english should be something like: "Impossible obtain the value of property 'add': object null or not defined"
In IE7:
These errors seems to refer to object in my html, but this is strange for me, because the same page works without problem locally.

test.html is will be helpful for how to use VLC WebAPI.
test.html is located in the directory where VLC was installed.
e.g. C:\Program Files (x86)\VideoLAN\VLC\sdk\activex\test.html
The following code is a quote from the test.html.
HTML:
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" width="640" height="360" id="vlc" events="True">
<param name="MRL" value="" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="False" />
<param name="Volume" value="50" />
<param name="toolbar" value="true" />
<param name="StartTime" value="0" />
<EMBED pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
version="VideoLAN.VLCPlugin.2"
width="640"
height="360"
toolbar="true"
loop="false"
text="Waiting for video"
name="vlc">
</EMBED>
</object>
JavaScript:
You can get vlc object from getVLC().
It works on IE 10 and Chrome.
function getVLC(name)
{
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(name);
}
}
var vlc = getVLC("vlc");
// do something.
// e.g. vlc.playlist.play();

I found this:
<embed type="application/x-vlc-plugin"
pluginspage="http://www.videolan.org"version="VideoLAN.VLCPlugin.2" width="100%"
height="100%" id="vlc" loop="yes"autoplay="yes" target="http://10.1.2.201:8000/"></embed>
I don't see that in your code anywhere.... I think that's all you need and the target would be the location of your video...
and here is more info on the vlc plugin:
http://wiki.videolan.org/Documentation%3aWebPlugin#Input_object
Another thing to check is that the address for the video file is correct....

Unfortunately, IE and VLC don't really work right now... I found this on the vlc forums:
VLC included activex support up until version 0.8.6, I believe. At that time, you could
access a cab on the videolan and therefore 'automatic' installation into IE and Firefox
family browsers was fine. Thereafter support for activex seemed to stop; no cab, no
activex component.
VLC 1.0.* once again contains activex support, and that's brilliant. A good decision in
my opinion. What's lacking is a cab installer for the latest version.
This basically means that even if you found a way to make it work, anyone trying to view the video on your site in IE would have to download and install the entire VLC player program to have it work in IE, and users probably don't want to do that. I can't get your code to work in firefox or IE8 on my boyfriends computer, although I might not have been putting the video address in properly... I get some message about no video output...
I'll take a guess and say it probably works for you locally because you have VLC installed, but your server doesn't. Unfortunately you'll probably have to use Windows media player or something similar (Microsoft is great at forcing people to use their stuff!)
And if you're wondering, it appears that the reason there is no cab file is because of the cost of having an active-x control signed.
It's rather simple to have your page use VLC for firefox and chrome users, and Windows Media Player for IE users, if that would work for you.

I found this piece of code somewhere in the web.
Maybe it helps you and I give you an update so far I accomodated it for the same purpose... Maybe I don't.... who the futt knows... with all the nogodders and dobedders in here :-/
function runVLC(target, stream)
{
var support=true
var addr='rtsp://' + window.location.hostname + stream
if ($.browser.msie){
$(target).html('<object type = "application/x-vlc-plugin"' + 'version =
"VideoLAN.VLCPlugin.2"' + 'classid = "clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"' +
'events = "true"' + 'id = "vlc"></object>')
}
else if ($.browser.mozilla || $.browser.webkit){
$(target).html('<embed type = "application/x-vlc-plugin"' + 'class="vlc_plugin"' +
'pluginspage="http://www.videolan.org"' + 'version="VideoLAN.VLCPlugin.2" ' +
'width="660" height="372"' +
'id="vlc"' + 'autoplay="true"' + 'allowfullscreen="false"' + 'windowless="true"' +
'mute="false"' + 'loop="true"' + '<toolbar="false"' + 'bgcolor="#111111"' +
'branding="false"' + 'controls="false"' + 'aspectRatio="16:9"' +
'target="whatever.mp4"></embed>')
}
else{
support=false
$(target).empty().html('<div id = "dialog_error">Error: browser not supported!</div>')
}
if (support){
var vlc = document.getElementById('vlc')
if (vlc){
var opt = new Array(':network-caching=300')
try{
var id = vlc.playlist.add(addr, '', opt)
vlc.playlist.playItem(id)
}
catch (e){
$(target).empty().html('<div id = "dialog_error">Error: ' + e + '<br>URL: ' + addr +
'</div>')
}
}
}
}
/* $(target + ' object').css({'width': '100%', 'height': '100%'}) */
Greets
Gee
I reduce the whole crap now to:
function runvlc(){
var target=$('body')
var error=$('#dialog_error')
var support=true
var addr='rtsp://../html/media/video/TESTCARD.MP4'
if (navigator.userAgent.toLowerCase().indexOf("msie")!=-1){
target.append('<object type = "application/x-vlc-plugin"' + 'version = "
VideoLAN.VLCPlugin.2"' + 'classid = "clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"' +
'events = "true"' + 'id = "vlc"></object>')
}
else if (navigator.userAgent.toLowerCase().indexOf("msie")==-1){
target.append('<embed type = "application/x-vlc-plugin"' + 'class="vlc_plugin"' +
'pluginspage="http://www.videolan.org"' + 'version="VideoLAN.VLCPlugin.2" ' +
'width="660" height="372"' +
'id="vlc"' + 'autoplay="true"' + 'allowfullscreen="false"' + 'windowless="true"' +
'mute="false"' + 'loop="true"' + '<toolbar="false"' + 'bgcolor="#111111"' +
'branding="false"' +
'controls="false"' + 'aspectRatio="16:9"' + 'target="whatever.mp4">
</embed>')
}
else{
support=false
error.empty().html('Error: browser not supported!')
error.show()
if (support){
var vlc=document.getElementById('vlc')
if (vlc){
var options=new Array(':network-caching=300') /* set additional vlc--options */
try{ /* error handling */
var id = vlc.playlist.add(addr,'',options)
vlc.playlist.playItem(id)
}
catch (e){
error.empty().html('Error: ' + e + '<br>URL: ' + addr + '')
error.show()
}
}
}
}
};
Didn't get it to work in ie as well...
2b continued...
Greets
Gee

Related

How to open Paypal in inApp Browser using cordova/phonegap

I am integrating PayPal integration using JavaScript in PhoneGap, but I'm facing an issue that it is not opening in the inApp browser. Instead of that it is opening outside of my app. So I want the PayPal URL to be opened in the inApp browser.
I'm new to PhoneGap so if anyone knows please help with it. Below is the code
<form id="openpaypal" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NSH74TD463ZSU">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
//script here
<script>
document.getElementById("openpaypal").addEventListener("click", openBrowser);
function openBrowser() {
alert("called here");
var url = 'https://www.paypal.com/cgi-bin/webscr';
var target = '_blank';
var options = "location=yes"
var ref = cordova.InAppBrowser.open(url, target, options);
ref.addEventListener('loadstart', loadstartCallback);
ref.addEventListener('loadstop', loadstopCallback);
ref.addEventListener('loadloaderror', loaderrorCallback);
ref.addEventListener('exit', exitCallback);
function loadstartCallback(event) {
console.log('Loading started: ' + event.url)
}
function loadstopCallback(event) {
console.log('Loading finished: ' + event.url)
}
function loaderrorCallback(error) {
console.log('Loading error: ' + error.message)
}
function exitCallback() {
console.log('Browser is closed...')
}
}
</script>
For cordova command
Add Plugin First
Here is link
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
This is your script
<script src="assets/js/cordova.js" type="text/javascript"></script>
<script src="assets/js/min/app.js" type="text/javascript"></script>
But while building an app cordova.js automatically add to root path of www folder
So add it like below
<script src="cordova.js" type="text/javascript"></script>
For PhoneGap Build
add this line to config.xml file
<plugin name="org.li8.inappbrowser" spec="0.1" source="pgb" />
Set Script
<script src="phonegap.js" type="text/javascript"></script>
Edited
call your function after device ready may be it is making problem for you
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady()
{
document.getElementById("openpaypal").addEventListener("click", openBrowser);
}
function openBrowser()
{
var url = 'https://www.paypal.com/cgi-bin/webscr';
var target = '_blank';
var options = "location=yes";
var ref = window.open(url, target, options);
}

Modify XML RSS Feed for Windows 8 using JavaScript

Currently making a Windows 8 RSS reader app for a specific site. Everything is working except for video [usually YouTube] since the website uses <object></object> to embed videos rather than <iframe>. the result is just a large blank object block where ever the video should be.
My first instinct was to find and replace the <object></object> tags with <iframe> and add the src attribute with the proper URL. I created a dummy app to test if this method would work, and the solution worked, if all you were changing was static HTML.
Dummy App Code:
<body>
<div style="text-align: center;">
<object width="853" height="480" id="test">
<param name="movie" value="http://www.youtube.com/v/2rDs7W3WRIk?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2rDs7W3WRIk?version=3&hl=en_US" type="application/x-shockwave-flash" width="853" height="480" allowscriptaccess="always" allowfullscreen="true"></embed>
</object></div>
Wrote and called the below function, which does indeed work. Want to do something similar to the XML document:
function setHTML5video() {
var listOfSrcs = document.getElementsByTagName("embed");
for (var i = 0; i < listOfSrcs.length; i += 1) {
var videoSrc = document.getElementsByTagName("embed")[i].getAttribute("src");
var newSrc = videoSrc.replace("/v/", "/embed/");
//var newNode = '<iframe width="853" height="480" src="' + newSrc + '" frameborder="0" allowfullscreen></iframe>';
var iFrame = document.createElement("iframe");
iFrame.setAttribute("src", newSrc);
document.getElementsByTagName("object")[i].replaceNode(iFrame);
//WinJS.Utilities.setOuterHTMLUnsafe(test, newNode);
}
}
End of Dummy App Code.
However, due to lack of knowledge of the Windows 8 API and despite searching all day for the answer online, I cannot find how to do the same to an XML feed that is being downloaded from an external site. I am probably missing something fundamental.
function itemInvoked(z) {
var currentArticle = articlesList.getAt(z.detail.itemIndex);
WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
articlelist.style.display = "none";
articlecontent.style.display = "";
mainTitle.innerHTML = currentArticle.title;
WinJS.UI.Animation.enterPage(articlecontent);
}
When the user clicks on a thumbnail, the XML RSS feed for that corresponding article is pulled up and injected into the with the id = "articlecontent". I want to modify that feed prior to injecting it.
<section id="content">
<div id="articlelist" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: mmoNewsPosts.ItemList.dataSource, itemTemplate: MMOItemTemplate }"></div>
<!-- Article Content -->
<div id="articlecontent"></div>
<!-- Article Content -->
</section>
Edit, because there appears to be confusion, I already have the feed loaded in via WinJS.xhr:
function downloadMMOFeed(FeedUrl) {
WinJS.xhr({ url: FeedUrl, responseType: "xml" }).then(function (rss) {
pageTitle = rss.responseXML.querySelector("title").textContent;
mainTitle.innerHTML = pageTitle;
var items = rss.responseXML.querySelectorAll("item");
//more stuff...
for (var n = 0; n < items.length; n +=1) {
article.content = items[n].querySelector("description").textContent;
//more stuff...
Could you not just load the XML feed in by XHR and then parse the result before binding it to the page? For Example:
WinJS.xhr({
url: "http://www.w3schools.com/xml/note.xml", responseType: "xml"
})
.done(
function (request) {
var text = request.responseText;
//TODO : Parse the XML returned by the server which is in var text
});
In Windows 8 there is no cross domain restriction so something like this is entirely possible.

How to pass values from HTML page to java applet?

I have tried passing values using javascript like below
<script language= "javascript" type= "text/javascript">
var num;
function getVal()
{
num=document.getElementById('in').value;
alert(document.getElementById('parm').value);
}
</script>
<body>
<form >
Number : <input type="text" id="in" ><br/>
<button id="myBtn" onclick="getVal()">Try it</button><br/>
</form>
<APPLET code="Calc.class" width="100" height="100">
<PARAM name="number" id="parm">
</APPLET>
</body>
</html>
The alert box displays the entered value on screen but the applet code is not displaying the same. My applet code is
public class Calc extends Applet
{
private String strDefault = "Hello! Java Applet.";
public void paint(Graphics g) {
String strParameter = this.getParameter("number");
if (strParameter == null)
strParameter = strDefault;
g.drawString(strParameter, 10, 10);
}
}
Can anyone tell me the code to pass and retrieve values to and from param tag to html?
I think you can specify your parameters from javascript objects like so:
<applet code="Calc.class" width="100" height="100">
<param name="number" id="parm" value="&{num};">
</applet>
However, I'm not sure of the compatibility with IE so you may have to document.write out your applet code injecting the respective parameter values like so:
<head>
<script type="text/javascript">
var num;
function getVal() {
num = document.getElementById('in').value;
writeAppletTags();
}
function writeAppletTags() {
var container = document.getElementById("applet-container");
container.innerHTML = "<applet code=\"Calc.class\" width=\"100\" height=\"100\">";
container.innerHTML += "<param name=\"number\" value=\"" + num + "\">";
container.innerHTML += "</applet>";
}
</script>
</head>
<body>
Number : <input type="text" id="in" ><br/>
<button id="myBtn" onclick="getVal()">Try it</button><br/>
<div id="applet-container" />
</body>
Sending POST from Java
As I said in my comment, this is a little more complicated. You'd have to POST (you could also use GET) your values to a hosted file (can be any server side scripting technology). The following demonstrates this, code taken from here.
URL url;
URLConnection urlConnection;
DataOutputStream outStream;
DataInputStream inStream;
// Build request body
String body = "key=value";
// Create connection
url = new URL("http://myhostedurl.com/receiving-page.php");
urlConnection = url.openConnection();
((HttpURLConnection)urlConnection).setRequestMethod("POST");
urlConnection.setDoInput(true);
urlConnection.setDoOutput(true);
urlConnection.setUseCaches(false);
urlConnection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
urlConnection.setRequestProperty("Content-Length", ""+ body.length());
// Create I/O streams
outStream = new DataOutputStream(urlConnection.getOutputStream());
inStream = new DataInputStream(urlConnection.getInputStream());
// Send request
outStream.writeBytes(body);
outStream.flush();
outStream.close();
// Close I/O streams
inStream.close();
outStream.close();
Source from this article
For example:
This is your applet codes:
import java.applet.*;
import java.awt.*;
public class DrawStringApplet extends Applet {
private String defaultMessage = "Hello!";
public void paint(Graphics g) {
String inputFromPage = this.getParameter("Message");
if (inputFromPage == null) inputFromPage = defaultMessage;
g.drawString(inputFromPage, 50, 25);
}
}
Then in HTML:
<HTML>
<HEAD>
<TITLE> Draw String </TITLE>
</HEAD>
<BODY>
This is the applet:<P>
<APPLET code="DrawStringApplet" width="300" height="50">
<PARAM name="Message" value="Howdy, there!">
This page will be very boring if your
browser doesn't understand Java.
</APPLET>
</BODY>
</HTML>
Notice: DrawStringApplet is you applet name; Message is a parameter sent to applet; Applet will then display: Howdy, there! as a result.

why call flash function from javascript work but FileReference don't work in flash?

I need call flash function from javascript. I use flash.external and addCallback to do this. all things work well but when I use FileReference in my flash, function did not open my browser ...
please see below describtion:
I call my function in javascript with this code:
<input type="button" value="Browse" onclick="sendToFlash('Hello World! from HTML');" />
you can see all my HTML as below:
<html>
<head>
<title>Upload test</title>
</head>
<script>
function hello (size) {
alert ("size hast: " + size);
}
function sendToFlash(val){
var flash = getFlashObject();
flash.new_browser(val);
}
var flash_ID = "Movie2";
var flash_Obj = null;
function getFlashObject(){
if (flash_Obj == null){
var flashObj;
if (navigator.appName.indexOf( "Microsoft" ) != -1){
flashObj = window[flash_ID];
}
else{
flashObj = window.document[flash_ID];
}
flash_Obj = flashObj;
}
return flash_Obj;
}
</script>
<body>
<center>
<embed width="560" height="410" type="application/x-shockwave-flash"
flashvars="sampleVars=loading vars from HTML"
salign="" allowscriptaccess="sameDomain" allowfullscreen="false" menu="true" name="Movie2"
bgcolor="#ffffff" devicefont="false" wmode="window" scale="showall" loop="true" play="true"
pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
quality="high" src="Movie2.swf">
</center>
<input type="button" value="Browse" onclick="sendToFlash('Hello World! from HTML');" />
</body>
</html>
when I click Browse in html page, javascript call sendToFlash function and SendToFlash function send my string (Hello World! from HTML) to flash.
in flash I get this string with below code:
resultsTxtField.text = "";
uploadButton.onPress = function () {
return browse_file("Hello World! from Flash");
}
import flash.external.*;
ExternalInterface.addCallback("new_browser", this, browse_file);
function browse_file (my_test_val) {
_root.resultsTxtField.text = "val: " + my_test_val;
import flash.net.FileReference;
var fileTypes:Array = new Array();
var imageTypes:Object = new Object();
imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
fileTypes.push(imageTypes);
var fileListener:Object = new Object();
var btnListener:Object = new Object();
var fileRef:FileReference = new FileReference();
fileRef.addListener(fileListener);
fileRef.browse(fileTypes);
fileListener.onCancel = function(file:FileReference):Void
{
_root.resultsTxtField.text += "File Upload Cancelled\n";
}
fileListener.onSelect = function(file:FileReference):Void
{
_root.resultsTxtField.text += "File Selected: " + file.name + " file size: "+ file.size + " file type: " + file.type;
getURL("javascript:hello("+file.size+");");
}
}
I have only one Scene and this code is on root of this Scene. and I have one movie clip named uploadButton and has only a rectangle that work as button in this sample.
when you click on rectangle browse_file("Hello World! from Flash"); called and a browser open that you can select a photo to upload.
when you click on browse in html same process must do but as you see variable send to function but browser to select a photo did not open any more.
I try several ways. for example I set new function to open only picture browser or set new Scene or use gotoAndPlay and more but there is another problem.
you can download my source from below link:
http://www.4shared.com/zip/YTB8uJKE/flash_uploader.html
note that javascript onclick="sendToFlash('Hello World! from HTML');" don't work in direct opening. you must open it in localhost.
I'll be so so happy for any clue.
thanks so much
Reza Amya
You can't programmatically call browse(), it has to be from a mouse click inside Flash: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html#browse()
In Flash Player 10 and Flash Player 9 Update 5, you can only call
this method successfully in response to a user event (for example, in
an event handler for a mouse click or keypress event). Otherwise,
calling this method results in Flash Player throwing an Error
exception.
after a day reading I know that it is impossible for security reasons.
then you can't open file reference with addCallback javascript code any way. for more information read fileReference browse from js, simulate keypress in flash workaround
Thanks again
Reza Amya

Flash External Interface issue with Firefox

I am having a hard time getting ExternalInterface to work on Firefox. I am trying to call a AS3 function from javascript. The SWF is setup with the right callbacks and it is working in IE.
I am using AC_RunActiveContent.js to embed the swf into my page. However, I have modified it to add an ID to the Object / Embed Tags. Below are object and embed tag that are generated for IE and for Firefox respectively.
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="400" align="middle" id="jpeg_encoder2" name="jpeg_encoder3" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" >
<param name="movie" value="/jpeg_encoder/jpeg_encoder3.swf" />
<param name="quality" value="high" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="scale" value="showall" />
<param name="wmode" value="window" />
<param name="devicefont" value="false" />
<param name="bgcolor" value="#ffffff" />
<param name="menu" value="false" />
<param name="allowFullScreen" value="false" />
<param name="allowScriptAccess" value="always" />
</object>
<embed
width="400"
height="400"
src="/jpeg_encoder/jpeg_encoder3.swf"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="middle"
play="true"
loop="true"
scale="showall"
wmode="window"
devicefont="false"
id="jpeg_encoder2"
bgcolor="#ffffff"
name="jpeg_encoder3"
menu="false"
allowFullScreen="false"
allowScriptAccess="always"
type="application/x-shockwave-flash" >
</embed>
I am calling the function like this...
<script>
try {
document.getElementById('jpeg_encoder2').processImage(z);
} catch (e) { alert(e.message); }
</script>
In Firefox, I get an error saying "document.getElementById("jpeg_encoder2").processImage is not a function"
Any Ideas?
Hmm, did you expose your actionscript function to Javascript with addCallback ?
Adobe documentation on addCallback
Below is an example of how a Flash movie is placed within a html page. This movie is very simple movie with a stop action at the beginning. The movie is shown below under Test Runs subject. This particular html code was auto generated by FlashMX's Publish command. Notice that the Flash movie file is simplemovie.swf; and an id and a name have been assigned automatically by Flash to match the movie filename (minus the .swf extension). In reality, the name and id could be anything (but do not use exoteric names, especially, do not start with a number), as long as it has not been used by any other element in the same page.
`codebase="http://download.macromedia.com/pub/shockwave/cabs/flash`/swflash.cab#version=6,0,0,0"
` WIDTH="150" HEIGHT="75" id="simplemovie" ALIGN="">
` quality=medium
` swliveconnect="true"
` bgcolor=#FFFFFF WIDTH="150" HEIGHT="75"
` name="simplemovie"
` ALIGN=""
`TYPE="application/x-shockwave-flash"
` PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
there is a play function in the flash file the following function will calls that function:
function testEval(stringToEval)
{
var movie=eval(stringToEval);
if (movie)
{
if (movie.PercentLoaded())
{
if (movie.PercentLoaded()==100)
{
movie.Play();
}
else
{
alert("movie is still loading, try again soon");
}
}
else
{
alert("movie object found-but unable to send command");
}
}
else
{
alert("movie object not found");
}
}
See this post.
You want a JS function more like this to retrieve the Flash object (rather than getElemById):
function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
};
And make sure not to call this function until the document is loaded.
Try having the same id in both object and embed tags. I remember one browser is using one tag and another browser the other...don't know which one is which. I had the same issue some time ago.
I'm got around by modifying the Example Code that comes with flash. Making sure it works, then stripping it down and adapting it for my use.
In the example notice that the object tag the id set to "ExternalInterfaceExample", then the embed tag has the name parameter set to "ExternalInterfaceExample" as well. I think that might be your clue.
Good luck!
Are your swf's visible (on the page) before you try calling them? If not, read this: swf-not-initializing-until-visible
Try these two things:
First, try calling the function from Javascript like this:
var swf;
if(navigator.appName.indexOf("Microsoft") != -1) {
swf = window["jpeg_encoder2"];
} else {
swf = document["jpeg_encoder2"];
}
if(typeof(swf) == "undefined") swf = document.getElementById("jpeg_encoder2");
swf.processImage(z);
Second, I've found that ExternalInterface calls in Firefox seem to only work with embed tags, not object tags. See if you can get it to work if you just use an embed tag. (Right now, I'm not clear whether the HTML/Javascript combo you've posted will access the object or the embed element.)
If instead of using AC_RunActiveContent.js to embed your flash movie you use swfobject there is a easy build-in way of doing that.
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
try {
swfobject.getObjectById('jpeg_encoder2').processImage(z);
} catch (e) { alert(e.message); }
</script>
</head>
If you are not using swfObject you could just copy and paste swfobject.getObjectById straight in to your code:
<script type="text/javascript">
function getObjectById(objectIdStr) {
var r = null;
var o = getElementById(objectIdStr);
if (o && o.nodeName == "OBJECT") {
if (typeof o.SetVariable != UNDEF) {
r = o;
}
else {
var n = o.getElementsByTagName(OBJECT)[0];
if (n) {
r = n;
}
}
}
return r;
getObjectById('jpeg_encoder2').processImage(z); //call your method
</script>

Categories

Resources