Question

We would like to display flash video files (tutorials) on our Sharepoint site.
Problem is, we cannot seem to either stop it from auto-playing (using the Windows Media Player) or start it playing by clicking (using flash embed).
We have a Content Editor WebPart with this code currently:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="320" HEIGHT="240" id="Tutorial1" ALIGN="">
<PARAM NAME=movie VALUE="video.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#333399>
<EMBED src="http://mydomain.com/infocentre/Videos/video.swf" quality=high bgcolor=#333399 WIDTH="320" HEIGHT="240" NAME="video.swf" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT> 

Any idea how we can get a “play” button or begin the video playing once the user clicks it?

Answer 1

The way you are embedding the SWF object, it will automatically load and start playing (as you described). The general technique of delay loading or loading based on a click is to actually wrap the object HTML code in some javascript, and have it dynamically added to the DOM based on your click event. This is also how sites don’t actually load or start playing a video file until it scrolls into view happens – instead of being bound the the click event, they hook up to some other visibility trigger.

There are a bunch of SWF loader scripts on the internet, but in a nutshell you do something like this:

<a id="player" href="#" onclick="playfile()">Play File</a>

and the definition for playfile()

function playfile() {
  // create the param and embed tags, set their values
  var param = document.createElement('param');
  param.name = "movie";
  param.value = "video.swf";
  var embed = document.createElement('embed');
  embed.src = "video.swf";
  embed.quality = "high";
  embed.bgcolor = "#333399";
  embed.width = 320;
  embed.height = 240;
  embed.name = "video.swf";
  // create the object tag and add the param and embed children
  var object = document.createElement('object');
  object.width = 320;
  object.height = 240;
  object.appendChild(param);
  object.appendChild(embed);
  // add new element after A tag
  document.getElementById('player').appendChild(object);
}

This is completely rough and untested, and may not even work – but the idea is sound and should get you headed in the right direction. Best of luck!