how to hide a video before playing? - wordpress

I am using the following to put a video on a wordpress site:
<param name="src" value="http://www.mywebsite.com/announcement.mov">
<param name="autoplay" value="true">
<param name="type" value="video/quicktime" height="560" width="950">
<embed src="http://www.mywebsite.com/announcement.mov" height="560" width="950" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">
The part I don't like about this is that you can see the opening frame of the video whenever you are on the page. I would like it if there was a way to make it show just black or show a blank screen until you click the play button.

You would want to use a video placeholder as described in this thread on Stack Overflow: How to add a splash screen/placeholder image for a YouTube video
One point of consideration: If jQuery/JavaScript fails, the video won't load either.
Update
In your HTML:
<img class="video-placeholder" src="placeholder.jpg" data-video="http://www.mywebsite.com/announcement.mov">
In your JS file:
$('.video-placeholder').click(function(){
var video = '<param name="src" value="' + $(this).attr('data-video') + '">
<param name="autoplay" value="true">
<param name="type" value="video/quicktime" height="560" width="950">
<embed src="' + $(this).attr('data-video') + '" height="560" width="950" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">';
$(this).replaceWith(video);
});

Related

display swf files on a page with httpHandler

I want to display swf file on page with http handler. AS want to make handler for swf src.
my code look like:
<object type="application/x-shockwave-flash" width="520" height="440">
<param name="src" value="handler/myhandler.ashx" />
<param name="AutoSize" value="true">
<param name="ShowDisplay" value="false">
<param name="AutoStart" value="true">
<param name="StretchToFit" value="true">
and handler code for server side is:
context.Response.ContentType = "application/x-shockwave-flash";
context.Response.Write("myflash.swf");
Similar question is at Can't display .swf files on a page with httpHandler
His solution is "Now, I just removed all this values, and it works! I still can't understand why, but it works"
I didn't get him..
Is any one help me out
I got it
HttpContext.Current.Response.ClearContent();
HttpContext.Current.Response.ClearHeaders();
HttpContext.Current.Response.AddHeader("Content-Disposition", string.Format("filename={0}", "tmyflash.swf"));
HttpContext.Current.Response.AddHeader("Content-Type", "application/x-shockwave-flash");
HttpContext.Current.Response.WriteFile("myflash.swf");
HttpContext.Current.Response.End();
and client side
<embed src="myhandler.ashx" >

Video playing in ASP.Net page

I want to play video in my asp.net page. I am using the code
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="Player1" width="440" height="379">
<param name="URL" value="~/DBVideo/citibank.mpeg">
<param name="http://">
<param name="AutoStart" value="1">
<param name="ShowControls" value="">
<param name="ShowStatusBar" value="1">
<param name="ShowDisplay" value="1">
<param name="stretchToFit" value="1">
<param name="volume" value="32" />
<embed runat="server" id="Video"
type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
width="440" height="379" src="~/DBVideo/citibank.mpeg"
filename="~/DBVideo/citibank.mpeg" autostart="1" showcontrols="1" showstatusbar="1" showdisplay="1">
</embed>
</object>
Now only the media player symbol is coming but the video is not playing.
Can anybody help me where the problem is??
and if I want to play the video from SQL server 2008 database (varbinary field) then what would I do?
If you're allowed to use HTML5, you can use video tag
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
As for getting video from sql: you can use http handler which extracts file from SQL and probably caches it http://msdn.microsoft.com/en-us/library/46c5ddfy%28v=vs.100%29.aspx

How to allow embed inline tags in TinyMCE

I have TinyMCE control on my page ( asp.net page ). I'm trying to edit html and insert embed tags, but as soon as I switch to WYSIWYG mode, and then back to html edit mode, I can see that embed tags were cleared out, and added as a new PARAM inline tags for the OBJECT tag. Here's example html
<OBJECT id=ETFflash1016 codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=345 align=middle height=230>
<PARAM NAME="ProfileAddress" VALUE="">
<PARAM NAME="ProfilePort" VALUE="0">
<PARAM NAME="AllowNetworking" VALUE="all">
<PARAM NAME="AllowFullScreen" VALUE="false">
<PARAM NAME="AllowFullScreenInteractive" VALUE="false">
<PARAM NAME="IsDependent" VALUE="0">
<embed src="/video/ETFflash1016.swf.cms" quality="high" bgcolor="#ffffff" width="345" height="230" name="ETFflash1016" align="left" allowScriptAccess="sameDomain" allowFullScreen="false" wmode="Transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</OBJECT>
So this has been transformed to this
<object id="ETFflash1016" width="345" height="230" data="../../../video/ETFflash1016.swf.cms" type="application/x-shockwave-flash">
<param name="Profile" value="0" />
<param name="ProfilePort" value="0" />
<param name="AllowNetworking" value="all" />
<param name="AllowFullScreen" value="false" />
<param name="AllowFullScreenInteractive" value="false" />
<param name="IsDependent" value="0" />
<param name="src" value="../../../video/ETFflash1016.swf.cms" />
<param name="name" value="ETFflash1016" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="Transparent" />
<param name="allowfullscreen" value="false" />
<param name="quality" value="high" />
</object>
As you may have noticed, embed tag's attributes became param inline tags for object tag.
I've searched the web, and the main solution was to add media plugin, set media_strict to false, but it didn't help, so I continue to search, and came across another suggestion - use extended_valid_elements but no lack so far. Here's the init function of my TinyMCE control
tinyMCE.init({
mode: "exact",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,spellchecker,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
media_strict: "false",
convert_urls: "false",
theme_advanced_resizing: true,");
onchange_callback : "HandleTinyEditorChange",
valid_elements : "*[*]\",
extended_valid_elements : "object[width|height|classid|codebase],param[name|value],embed[src|type|width|height|flashvars|wmode]"
});
What I'm doing wrong ? How can I make this work ?
I'm using TinyMCE v.3.9.2
So the problem turned to be ridiculous. media_strict and convert_urls accept booleans not strings, so I just had to pass boolean values to those params instead of strings, and it works like a charm.
tinyMCE.init({
mode: "exact",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,spellchecker,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
media_strict: false,
convert_urls: false,
theme_advanced_resizing: true,");
onchange_callback : "HandleTinyEditorChange",
valid_elements : "*[*]\",
extended_valid_elements : "object[width|height|classid|codebase],param[name|value],embed[src|type|width|height|flashvars|wmode]"
});

How can I embed the swf file into asp page?

I am using the following code but it does not work:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="540" height="400" hspace="10">
<param name=movie value="http://servername/foldername/file.swf">
<param name=quality value=high><param name="LOOP" value="false">
<embed src="C:\Users\SAINI\Desktop\online\spn_20Dec\vp\images\abc.swf"
width="540" height="400" hspace="10" loop="false"
quality=high
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash">
</embed>
</object>
How can I do that?
Internet Explorer, Google Chrome, Apple safari, Mozila Firefox and ...
you need a code which work in all of them and there it is:
<object width="900" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="myMovieName" >
<param name="src" value="YOUR MOVIE ADDRESS HERE.swf" />
<param name="quality" value="autohigh" />
<param name="bgcolor" value="black" />
<param name="autostart" value="true" />
<param name="FlashVars" value="init=yes&check=true" />
<param src="flash/movie.swf" autostart="true" flashvars="init=yes&check=true"
quality="autohigh" bgcolor="#000000" name="myMovieName"/>
</object>
All you need to do is:
copy and paste this code into your project,
change the address to your clip address,
change the dimensions of clip (in first line)
Enjoy it!
I've tried your code and it works with me without any alteration except the file and its location. I placed the file inside the root of my website. Sadly it doesn't work when I place another location. I don't know the reason yet
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="540" height="400" hspace="10">
<param name=movie value="http://servername/foldername/file.swf">
<param name=quality value=high><param name="LOOP" value="false">
<embed src="xx.swf" width="540" height="400" hspace="10" loop="false" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash">
</embed> </object>

Addressing properties of a Shockwave Flash object (MultiPowUpload) in JavaScript

Please pardon the dumb newbie question; I've only been programming Javascript for about 24 hours... :)
I have managed (with some outside help) to embed a shockwave flash object into my page - specifically MultiPowUpload 2.1. It's appearing nicely on the page and seems to be functioning correctly; we can take that part as read.
Now I'm trying to do some more advanced stuff in JavaScript - I have a button, and in the onClick() code I have the following:
var swf = document.getElementById("FlashFilesUpload1");
var itemsCount = swf.filesCount;
alert("items: "+itemsCount);
But the alert statement tells me "items: undefined". It does the same if I set itemsCount to swf.nonExistentProperty - everything is "undefined". But from what I read in the documentation, there definitely is a filesCount property. I tried accessing all the other properties and methods of this swf object, and none of them work, except for toString(), which returns "HTMLObjectElement".
I am obviously addressing this object incorrectly - but what am I doing wrong?
Clarification
In response to #brianpeiris: I am doing this quite differently from the page at the link you suggested. I didn't do this with any great knowledge, I'm just really acting like a monkey, trying to copy other people's code that works, then tweak it so it does what I want... so don't assume I know anything, however obvious - remember, I've only been doing JavaScript for about a day now!
So here's the code for the control itself:
<object id="FlashFilesUpload1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" viewastext>
<!-- Replace symbols " with the " at all parameters values and
symbols "&" with the "%26" at URL values or & at other values!
The same parameters values should be set for EMBED object below. -->
<param name="FlashVars" value="uploadButtonVisible=false&uploadUrl=../ReceiveBulkCases.aspx" />
<param name="BGColor" value="#F8F6E6" />
<param name="Movie" value="ClientSideControls/ElementITMultiPowUpload2.1.swf" />
<param name="Src" value="ClientSideControls/ElementITMultiPowUpload2.1.swf" />
<param name="WMode" value="Window" />
<param name="Play" value="-1" />
<param name="Loop" value="-1" />
<param name="Quality" value="High" />
<param name="SAlign" value="" />
<param name="Menu" value="-1" />
<param name="Base" value="" />
<param name="AllowScriptAccess" value="always" />
<param name="Scale" value="ShowAll" />
<param name="DeviceFont" value="0" />
<param name="EmbedMovie" value="0" />
<param name="SWRemote" value="" />
<param name="MovieData" value="" />
<param name="SeamlessTabbing" value="1" />
<param name="Profile" value="0" />
<param name="ProfileAddress" value="" />
<param name="ProfilePort" value="0" />
<!-- Embed for Netscape,Mozilla/FireFox browsers support. Flashvars parameters are the same.-->
<!-- Replace symbols " with the " at all parameters values and symbols "&" with the "%26" at URL values or & at other values! -->
<embed bgcolor="#F8F6E6" id="EmbedFlashFilesUpload" src="ClientSideControls/ElementITMultiPowUpload2.1.swf"
quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="450" height="350" flashvars="uploadButtonVisible=false&uploadUrl=../ReceiveBulkCases.aspx">
</embed>
</object>
As you see it's embedded in the HTML as an object, unlike the reference you gave, where they do some other trick using script to get it onto the page.
BTW, when I tried it their way (not very hard, I grant you), I didn't manage to get the control even to appear on my page!
Thanks for your help... much appreciated
Edit: I think I finally figured it out! You simply have set the useExternalInterfaces to Yes.
So in your code you would change
<param
name="FlashVars"
value="uploadButtonVisible=false&uploadUrl=../ReceiveBulkCases.aspx" />
to
<param
name="FlashVars"
value="uploadButtonVisible=false&uploadUrl=../ReceiveBulkCases.aspx&useExternalInterface=Yes" />
and do the same for the <embed> tag.
If you visit the demo site and run the following code in Firebug it returns 0 before you select files and the correct count after you select files. Also, if you check the source, you'll see that the useExternalInterface option is set to Yes
alert(document.getElementById('MultiPowUpload').filesCount());
P.S. You should consider using the SWFObject script included with MultiPowUpload. It lets you set and change variables easily without having to worry about cross-browser issues and it also degrades gracefully for users without flash.
Further edit
To answer your comment: Yes, I've got filesCount working on my machine.
One thing I forgot to mention is that you might be trying to retrieve filesCount before the flash control is fully loaded.
The following is the code I'm using. I copied your code exactly and added the useExternalInterface setting as well as my own javascript.
Note that my javascript code repeatedly checks the filesCount every 500 milliseconds using the setInterval function.
<object id="FlashFilesUpload1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" viewastext>
<!-- Replace symbols " with the " at all parameters values and
symbols "&" with the "%26" at URL values or & at other values!
The same parameters values should be set for EMBED object below. -->
<param name="FlashVars" value="uploadButtonVisible=false&uploadUrl=../ReceiveBulkCases.aspx&useExternalInterface=Yes" />
<param name="BGColor" value="#F8F6E6" />
<param name="Movie" value="ClientSideControls/ElementITMultiPowUpload2.1.swf" />
<param name="Src" value="ClientSideControls/ElementITMultiPowUpload2.1.swf" />
<param name="WMode" value="Window" />
<param name="Play" value="-1" />
<param name="Loop" value="-1" />
<param name="Quality" value="High" />
<param name="SAlign" value="" />
<param name="Menu" value="-1" />
<param name="Base" value="" />
<param name="AllowScriptAccess" value="always" />
<param name="Scale" value="ShowAll" />
<param name="DeviceFont" value="0" />
<param name="EmbedMovie" value="0" />
<param name="SWRemote" value="" />
<param name="MovieData" value="" />
<param name="SeamlessTabbing" value="1" />
<param name="Profile" value="0" />
<param name="ProfileAddress" value="" />
<param name="ProfilePort" value="0" />
<!-- Embed for Netscape,Mozilla/FireFox browsers support. Flashvars parameters are the same.-->
<!-- Replace symbols " with the " at all parameters values and symbols "&" with the "%26" at URL values or & at other values! -->
<embed bgcolor="#F8F6E6" id="EmbedFlashFilesUpload" src="ClientSideControls/ElementITMultiPowUpload2.1.swf"
quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="450" height="350" flashvars="uploadButtonVisible=false&uploadUrl=../ReceiveBulkCases.aspx&useExternalInterface=Yes">
</embed>
</object>
<script>
function updateMessage() {
var message = (new Date()).toLocaleTimeString() + ': ';
try {
var objectElement = document.getElementsByTagName('object')[0];
var embedElement = document.getElementsByTagName('embed')[0];
if (objectElement.filesCount) {
message += 'We are in IE ' + objectElement.filesCount();
}
else if (embedElement.filesCount) {
message += 'We are in Firefox ' + embedElement.filesCount();
}
else {
message += "The flash object is not loaded or useExternalInterface is not set to 'Yes'";
}
}
catch (exp) {
message += 'An error occurred';
}
document.getElementById('message').innerHTML = message;
}
// Update the message every 500 milliseconds
setInterval(updateMessage, 500);
</script>

Resources