Question

On my website, I have an embedded video (.mov) which opens and begins to play immediately when the user opens the page. I would like to make the site easier to use by making an image of the first frame which users can click on to begin the video. What’s the best way to do this in HTML/javascript?

Answer 1

The way I did this was to make a javascript function which updated the innerHTML line when clicked, like this:

function displayVideo() {
  document.getElementById('videoContainer').innerHTML = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="480" style="float:left"><param name=src value="resources/screencast.mov" /><param name=controller value=false /><param name=autoplay value=true /><param name=loop value=true /><embed src="resources/screencast.mov" width="320" height="480" controller=false autoplay=true loop=true pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" /></object>';

}