External Interface Help [Archive] - ActionScript.org Forums

View Full Version : External Interface Help

scigoat

06-29-2007, 08:23 PM

I got the following code from the macromedia site to load videos into my swf file using javascript and the External Interface class.

Here is the code I am using:

Action Script:
import flash.external.ExternalInterface;

ExternalInterface.addCallback("playVideo", null, playVideo);
ExternalInterface.addCallback("pauseResume", null, pauseResume);

var server_nc:NetConnection = new NetConnection();
server_nc.connect(null);
var video_ns:NetStream = new NetStream(server_nc);
selected_video.attachVideo(video_ns);

video_ns.onStatus = function(obj:Object):Void {
ExternalInterface.call("updateStatus", " " + obj.code);
};

function playVideo(url:String):Void {
video_ns.play(url);
}

function pauseResume():Void {
video_ns.pause();
}

And here is the javascript in my HTML document:

<script language="JavaScript">

var flashVideoPlayer;

function initialize() {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
flashVideoPlayer = (isIE) ? window['videoPlayer'] : document['videoPlayer'];
}

function callFlashPlayVideo() {
var comboBox = document.forms['videoForm'].videos;
var video = comboBox.options[comboBox.selectedIndex].value;
updateStatus("____" + video + "____");
flashVideoPlayer.playVideo(video);
}

function callFlashPlayPauseVideo() {
flashVideoPlayer.pauseResume();
}

function updateStatus(message) {
document.forms['videoForm'].videoStatus.value += message + "\n";
}

function loadVideo(video) {
updateStatus("____" + video + "____");
flashVideoPlayer.playVideo(video);
}

</script>

</head>

<body bgcolor="#ffffff" onLoad="initialize();">

<div id="container">
<div id="content_container">
<div id="content">

<div style="padding: 20px 0 0 0;"> </div>

<center>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="331" height="292" id="videoPlayer" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="video.swf" quality="high" bgcolor="#ffffff" width="331" height="292" name="videoPlayer" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

<form name="videoForm">
Select a video:<br />
<select name="videos">
<option value="cafe_townsend_chef.flv">cafe_townsend_chef.flv</option>
</select>
<input type="button" name="selectVideo" value="play" onClick="callFlashPlayVideo();" />
<br /><br />

Playback <input type="button" name="playPause" value="play/pause" onClick="callFlashPlayPauseVideo();" />

<br /><br />
Video status messages <br />
<textarea name="videoStatus" cols="50" rows="10"></textarea>
</form>

<p>
<a href="javascript:void(0)" onClick="loadVideo('got_shot_VP6_512K.flv');">Got Shot</a><br />
<a href="javascript:void(0)" onClick="loadVideo('fantasy_arab.flv');">Fantasy Arabs</a><br />
<a href="javascript:void(0)" onClick="loadVideo('cafe_townsend_chef.flv');">Chef Video</a><br />
</p>

</center>

</div>
</div>
</div>

</body>
</html>

Everything is working fine. Including the 3 <a href="javascript:void(0)" onClick="loadVideo('');"></a> at the bottom of the html code. However, what I want to do is get rid of the form, and simply use the <a href="javascript:void(0)" onClick="loadVideo('');"></a> to load the videos. I realize I can't just delete that form code, but I am not familiar with javascript, can someone please help?

scigoat

06-30-2007, 12:28 AM

with some trial and error - i got it to work.
heres how I did it in case any one was wondering:

all the fixes happened in the html file:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ExternalInterface</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<script language="JavaScript">

// Use a variable to reference the embedded SWF file.
var flashVideoPlayer;

/* When the HTML page loads (through the onLoad event of the <body> tag), it calls the initialize() function. */
function initialize() {
/* Check whether the browser is IE. If so, flashVideoPlayer is
window.videoPlayer. Otherwise, it's document.videoPlayer. The
videoPlayer is the ID assigned to the <object> and <embed> tags. */
var isIE = navigator.appName.indexOf("Microsoft") != -1;
flashVideoPlayer = (isIE) ? window['videoPlayer'] : document['videoPlayer'];
}

/* When the user clicks the play button in the form, update the videoStatus text area, and call the playVideo() function within the SWF file, passing it the URL of the FLV file. */
function callFlashPlayVideo() {
updateStatus();
flashVideoPlayer.playVideo(video);
}

// Call the pauseResume() function within the SWF file.
function callFlashPlayPauseVideo() {
flashVideoPlayer.pauseResume();
}

/* The updateStatus() function is called from the SWF file from the onStatus() method of the NetStream object. */
function updateStatus() {
}

function loadVideo(video) {
updateStatus();
flashVideoPlayer.playVideo(video);
}

</script>

</head>

<body bgcolor="#ffffff" onLoad="initialize();">

<div id="container">
<div id="content_container">
<div id="content">

<div style="padding: 20px 0 0 0;"> </div>

<center>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="331" height="292" id="videoPlayer" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="video.swf" quality="high" bgcolor="#ffffff" width="331" height="292" name="videoPlayer" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

<p>
<a href="javascript:void(0)" onClick="loadVideo('got_shot_VP6_512K.flv');">Got Shot</a><br />
<a href="javascript:void(0)" onClick="loadVideo('fantasy_arab.flv');">Fantasy Arabs</a><br />
<a href="javascript:void(0)" onClick="loadVideo('cafe_townsend_chef.flv');">Chef Video</a><br />
</p>

</center>

</div>
</div>
</div>

</body>
</html>

Compare this with the last one and you can see the difference. I am not sure why it works, but it does!

scigoat

06-30-2007, 08:13 PM

this only works in safari. i cant get it to work in IE or firefox.
help anyone?

icktoofay

07-01-2007, 05:14 AM

scigoat

07-02-2007, 06:09 PM

Icktoofay,
Thank you. I see the changes you've made, and it makes some sense to me. However, over the weekend I realized that my Explorer app is version 5.2, which is the last version of IE for MAC OsX, I believe. The External Interface class is compatible explorer 7.0, so I can't even see if it works in IE unless I am on a PC or a new mac. However, I did check the changes that Icktoofay made in Firefox (my version of the code did not work), and it works! so thanks.

springboarddesign

07-14-2007, 05:51 PM

Figured it might just be a change of file names, but this doesn't seem to be working swapping the FLV files with SWF files (and making the appropriate changes to the file paths in the code). Any have any input on making this work with loading SWFs instead of FLV files? Thanks.