Loading swf on IE html - html

<div>
<object id="myMovieName" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="/media/camera.swf" name="movie">
<param value="high" name="quality">
<param value="#FFFFFF" name="bgcolor">
<embed align=""
type="application/x-shockwave-flash"
name="myMovieName"
bgcolor="#FFFFFF"
quality="high"
src="/media/camera.swf"
href="/media/camera.swf">
</object>
</div>
the swf file doesnt load in IE what am i doing wrong here

I really think you should use swfobject. Download it from here:
http://code.google.com/p/swfobject/downloads/detail?name=swfobject_2_2.zip&can=2&q=
Then get the expressinstall.swf and the swfobject.js file.
Here is an example code for your stuff:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>SWFObject example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var fo = new Object();
function initFlash()
{
fo.flashvars = {};
fo.params = {
allowScriptAccess: "sameDomain"
};
fo.attributes = {};
swfobject.embedSWF("smedia/camera.swf", "flashcontent", "100%", "100%", "10,1,103", "media/expressInstall.swf", fo.flashvars, fo.params, fo.attributes);
}
</script>
</head>
<body>
<div id="flashcontent">Flash will be placed here by swfobject.</div>
</div>
<script type="text/javascript">initFlash();</script>
</body>
</html>
You can read more about how it works in the documentation.
Rob

Related

HTML Embedded SWF file unable to load within controller

Whenever I launch the HTML directly into the browser it loads the SWF fine, however whenever I go to the respective mapping(ie. when spring runs )(localhost:8080/testSWF)) it says unable to load SWF.
Here is my html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div th:replace="fragments/header-loggedin :: header-loggedin"/>
<h1>Test Biology Quiz</h1>
<br /><br />
<div class="row">
<div class="clearfix bottom-space"></div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1000" height="600">
<param name="movie" value="testQuiz.swf"/>
<param name="quality" value="high" />
<embed src="testQuiz.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="600"></embed>
</object>
</div>
<div class="clearfix bottom-space"></div>
<div th:replace="fragments/footer :: footer"/>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
My Controller just contains the mapping for /testSWF
#RequestMapping((value = "/testSWF", method = RequestMethod.GET)
public String testSWFFile(Model model){ return "/testSWF"; }
If you need more information please let me know, thanks in advance.

dynamic video source change issue in azure media player

Here is my full code.
When I click "Show" button, it shows the video dynamically. But when I click it again, it doesn't show. How can I avoid this type of error?
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta http-equiv="Pragma" content="no-cache" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<!-- for Azure Media Player -->
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>
<title>
eConnect eLearning
</title></head>
<body>
Show
<div id="content_html" style="height: 100%; "></div>
<script>
function sv1() {
$('#content_html').html('<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>');
var myOptions = {
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
}
</script>
</body>
</html>
I got the answer from MS forum. I have to dispose the old player before reuse it.
if (!!myPlayer) {
myPlayer.dispose();
}
I think it is problem with the dynamically added element with id. I have done some modifications to avoid dynamic elements with same id and is working. Is this OK for you?
<div id="content_html" style="height: 100%; ">
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp- big-play-centered" tabindex="0"> </video>
</div>
<script>
$('#content_html').hide();
function sv1() {
$('#content_html').show();
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta http-equiv="Pragma" content="no-cache" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- for Azure Media Player -->
<link href="http://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src="http://amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>
<title>
eConnect eLearning
</title></head>
<body>
Show
<div id="content_html" style="height: 100%; ">
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
</div>
<script>
$('#content_html').hide();
function sv1() {
$('#content_html').show();
var myOptions = {
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
}
</script>
</body>
</html>
myPlayer.src({src: "http://www.example.com/path/to/video.mp4" });

Adjusting width of flash content without changing aspect ratio

I want to maintain width of 600 px and height be adjusted accordingly in order to maintain aspect ratio. How can that be achieved?
I m using following code:
<!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" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" id="myFlashContent">
<param name="movie" value="swffile.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swffile.swf" width="600">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

SWF is not displayed as specified in HTML

I have a FlashBuilder project for which I want to set the displayed size (in browser) only via the html file. I don't want to hardcode the size of the swf in the flash code.
Also I need to provide several parameters with flash vars.
My html is a modified version of the standard html code generated by FlashBuilder. I try to set the size of the swf in JavaScript and using a container div. So I have the following html code to display the swf:
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
background-color: #ffffff;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens
with two hyphens -->
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!-- END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var swfVersionStr = "11.1.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
var attributes = {};
flashvars.json = "some json file.json";
flashvars.width = "900";
flashvars.height = "480";
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode = "direct";
attributes.id = "Main";
attributes.name = "Main";
attributes.align = "left";
swfobject.embedSWF("Main.swf", "flashContent", "100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left");
</script>
</head>
<body>
<div style="display:block;text-align:left;width:900px; height:480px; position:absolute; top:50px; left:100px">
<div id="flashContent">
<p>To view this page ensure that Adobe Flash Player version 11.1.0 or greater
is installed.</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>");
</script>
</div>
</div>
</body>
</html>
And the following in my flash main method:
public function Main(){
swfWidth = LoaderInfo(root.loaderInfo).parameters.width;
swfHeight = LoaderInfo(root.loaderInfo).parameters.height;
swfFrameRate = LoaderInfo(root.loaderInfo).parameters.framerate;
json = LoaderInfo(root.loaderInfo).parameters.json;
loadJsonFile(json);
stage.frameRate = swfFrameRate;
stage.scaleMode = StageScaleMode.NO_SCALE;
view = new View3D();
view.width = swfWidth;
view.height = swfHeight;
camera = view.camera;
cameraController = new HoverController(camera, null, 150, 10, 10);
this.addChild(view);
}
However, when I open this in browser the displayed size does not match the size given in the hmtl (with the above code it results in about 700x430 px).
What am I doing wrong?
Finally, I managed to fix it.
The problem was the Main.html and index.template.html created by Flashbuilder (and wich is not easy to revise, as it is very complex and more detailed than actually needed.
I created a new .html file with the help of this generator:
http://www.bobbyvandersluis.com/swfobject/generator/index.html
.. and now the stage is set as provided by the flashVars.
This is how my Main looks like now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("Main", "11.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="850" height="480" id="Main">
<param name="movie" value="Main.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
<param name="wmode" value="direct" />
<param name="bgcolor" value="#cccccc" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="flashvars" value="json=../somejsonFile.json&width=850&height=480&framerate=60" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Main.swf" width="850" height="480">
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
<param name="wmode" value="direct" />
<param name="bgcolor" value="#cccccc" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="flashvars" value="json=../somejsonFilejson&width=850&height=480&framerate=60" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

swf(flash) plays automatically in chrome

I embed the swf file by swfobject. I do not want the swf file(it's an advertisement) play automatically, so I set the attribute of play with "false". as following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="970" height="250" id="myFlashContent">
<param name="movie" value="day_110702/ad.swf" />
<param name="play" value="false" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="day_110702/ad.swf" width="970" height="250">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
It works perfectly on IE but it doesn't work on Chrome/Firefox. In Chrome/Firefox the swf file plays automatically.
In addition, another behavior of swf file differ from Chrome/Firefox and IE is:
when you embedded the swf file with invisible iframe tag. as
<iframe id="iframe" src="swf.html" style="width:100%;height:100%; display:none; visibility:hidden;"></iframe>
When you browse the page that contains this iframe in IE/Firefox, the swf will NOT play until you make iframe visible. But if yo browse the page in Chrome, the swf will play automatically even if iframe is invisible.
Anyone can tell me why the swf(flash) behavior is differ in different browsers?
Cross-browsers problem always make crazy :).
Have you tried embedding the SWF using dynamic publishing instead of static publishing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.play = "true";
var attributes = {};
swfobject.embedSWF("day_110702/ad.swf", "myAlternativeContent", "970", "250", "9.0.0", false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
</html>