I have the following code for a video on my website. I have the AutoPlay turned off in order to prevent playback as soon as I open the website. The problem is that the video still loads automatically and this hurts the bandwidth of some visitors. What can I do to prevent the video from loading until the user decides to play it?
<object width="530" height="405" scale="to fit" hspace="10" border="5">
<param name="VideoTitle" value="/urlpath/movie.m4v" />
<param name="AutoStart" value="False" />
<param name="ShowControls" value="True" />
<param name="ShowStatusBar" value="True" />
<param name="ShowDiplay" value="True" />
<param name="AutoRewind" value="True" />
<embed width="530" height="405" scale="tofit" hspace="0" filename= "/urlpath/movie.m4v"
autostart="False" showcontrols="True" showstatusbar="True" showdiplay="True"
autorewind="True" border="1" src="/urlpath/movie.m4v"></embed>
</object>
Thanks in advance.
Don't include the code in your page. Inject it into the page once the user clicks a fake PLAY button.
As Diodeus said, have it load "on-demand" by creating a javascript function.
Alternatively, I think you could use HTML5's video tag and leave preload off.
-- The Javascript solution is more friendly for older browsers, as not all support HTML5.
Related
I am attempting to embed an rtsp stream from an IP camera, using the quicktime plugin. Currently I can connect to the RTSP stream both locally and externally using QuickTime player, however when I attempt to embed the code into my web page, after quicktime prompts me for my permission to run, quicktime's logo comes up, and no video is loaded. Ive tried loading the web page on computers both inside and outside the network, and tried a generic texteditor HTML version of the code with the same results. Im confident that the problem lies somewhere around the code, not the network or stream, so if anyone has any suggestions, the help would be greatly appreciated.
Example:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="320" width="240">
<param name="src" value=
"rtsp://xxx.xxx.xxx.xxx:8554/CH001.sdp" />
<param name="autoplay" value="true" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="type" value="video/quicktime" />
<embed src="rtsp://xxx.xxx.xxx.xxx:8554/CH001.sdp" autoplay="true" controller="true" loop="false" height="320" width="240" pluginspage="http://www.apple.com/quicktime/download/" /></object>
Following is working for me in Internet Explorer. Hope this helps.
<html><body>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="1280" height="720">
<param name="src" value="test1.qtl" />
<param name="autoplay" value="true" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<object data="sample-movie.qtl" width="1280" height="720" type="video/quicktime">
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
</object>
</object>
</body>
</html>
And here is the corresponding .qtl file
<?xml version="1.0"?>
<?quicktime type="application/x-quicktime-media-link"?>
<embed autoplay="true" fullscreen="full" href="http://www.apple.com/quicktime/" src="rtsp://10.99.19.224:8554/test"
/>
For anyone needing this in the future, below code worked for me. just put the code inside HTML page and replace my RTSP url with your camera's specific url:
<script type="text/javascript">
document.writeln('<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width='
+ 720 + ' height=' + 480 + '
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">');
document.writeln('<param name="autoplay" value="true">');
document.writeln('<param name="controller" value="true">');
document.writeln('<param name="qtsrc" value="' +
'rtsp://192.168.1.90:554/user=admin&password=&channel=01&stream=0.sdp' + '">');
</script>
I noticed that my website's behavior has changed lately in Chrome. It comes from the piece of code shown here. With that code the page works fine and all seems to be ok (the flash banner is ok too). BUT as soon as I scroll the page, I notice that the background is white (all that was not shown when the page originally loaded). It's like if the background is not loaded out of the original shown page sight. If I remove the piece of code emphasized, the banner doesn't load the animation, but the background loads properly.
What prevents me page's backgroung from loading properly? Note that this is the only flash code/object on my whole website.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="994" height="250"
id="art-flash-object">
<param name="movie" value="images/container.swf" />
<param name="quality" value="high" />
<param name="scale" value="default" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=0xFFFFFF&alpha1=.50&framerate1=24&loop=true&wmode=transparent&clip=../../Content/images/flash.swf&radius=5&clipx=-3&clipy=0&initalclipw=1000&initalcliph=250&clipw=1000&cliph=250&width=994&height=250&textblock_width=0&textblock_align=no&hasTopCorners=true&hasBottomCorners=true" />
<param name="swfliveconnect" value="true" />
Shockwave code here causes the bug
<object type="application/x-shockwave-flash" data="../../Content/Images/container.swf"
width="994" height="250">
<param name="quality" value="high" />
<param name="scale" value="default" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=0xFFFFFF&alpha1=.50&framerate1=24&loop=true&wmode=transparent&clip=../../Content/images/flash.swf&radius=5&clipx=-3&clipy=0&initalclipw=1000&initalcliph=250&clipw=1000&cliph=250&width=994&height=250&textblock_width=0&textblock_align=no&hasTopCorners=true&hasBottomCorners=true" />
<param name="swfliveconnect" value="true" />
<div class="art-flash-alt">
<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>
</object>
End of buggy code
</object>
I don't know if it's the cause of the problem, but in the first piece of code there's no </object> closing tag present.
Also, I have experienced some flash loading issues with relative paths (like you did with value="images/container.swf" /> and data="../../Content/Images/container.swf"). Never knew what exactly was the issue there, but try loading the flash file from the same folder as where your .html file is located.
I myself sometimes use the html code generated by Flash (under Publish..) because sometimes that seems to be the only working code in order to show the Flash correctly.
P.s. I don't understand exactly what's the deal with the two <object> tags and their contents, did you use both at the same time, separately, or...?
I am using Flash CS4 and when testing my application my frame rate changes as it is programmed to do so. When I try to run the application in a browser (tried Firefox 4, Opera 10.5 and IE 8) the frame rate does not change.
Why does the frame-rate not change? How do I fix it?
The newest Flash Players are capped at a maximum of 60fps, no matter what number you use to set the framerate. That could be one issue... But if objects on the screen are slowing down there's nothing to be gained by changing the framerate. It means that your swf isn't well optimized, and the player is struggling to render the assets.
Set your HTML so that the Flash Object's wmode is "opaque" (or transparent if you really need to). If you don't specify it, it will interpret it as some other default parameter which gives you that drop in frame-rate performance.
Sample:
<object type="application/x-shockwave-flash" data=
"YourFlashMovie.swf" width="640" height="480"
id="flash_id_1" style="visibility: visible;">
<param name="allowScriptAccess" value="always" />
<param name="allowScale" value="never" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" /> <!-- THIS IS WHAT YOU MUST SET -->
<param name="quality" value="high" />
<param name="scale" value="" />
<param name="scaleMode" value="" />
<param name="menu" value="false" />
</object>
Hope that helps.
Video plays fine, but the controls (play, stop, rewind etc.) don't appear, despite setting the "controller" parameter to "true".
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260">
<param name="src" value="myvid.mov" />
<param name="controller" value="true" />
<object type="video/quicktime" data="myvid.mov" width="320" height="260" class="mov">
<param name="controller" value="true" />
</object>
</object>
Works fine when I refer to this video:
http://realdev1.realise.com/rossa/rendertest/quicktime.html
Do the controls need to be enabled when encoding the video perhaps?
The height of the movie + 16px should do the trick.
I use the below code within for my JQuery lightbox without include js file AC_RunActiveContent.js or swfobject-1.5.js in the html file. It works fine for IE and Firefox. Just wanna know if there is any problem for not include AC_RunActiveContent.js or swfobject-1.5.js. Is it a must to have AC_RunActiveContent.js or swfobject-1.5.js for display a flash properly in different browsers version?
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="789" height="617" id="Loader" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="en_MAIN.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="en_MAIN.swf" quality="high" bgcolor="#ffffff" width="789" height="617" name="Loader" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
No, that's the Adobe-style standard markup. It works across all current browsers.
It's ugly, doesn't validate and has to state each parameter twice, which is what the Flash embedding scripts you mention are attempting to address (plus sometimes also there's an IE ‘object activation’ workaround that is no longer necessary). If you don't care about that, you're fine as you are. If you do, this question has some discussion on alternatives.
I don't think your code is connected to Lightbox: AC_RunActiveContent.js and swfobject-1.5.js are javascript workarounds for getting Flash to work in IE. Since Lightbox uses JQuery, not Flash, you shouldn't need them.
Look closely at the lightbox instructions for more information.