I have a web application under development that involves dynamically updating pictures. This is easily ahieved using picture.src="filename.jpg" kind of thing (where picture is an id="picture" of the image). This instantly updates the image.
I want to do the same with videos. Probably wmv. Getting Media Player to work in IE and FF etc seems to be problematic - generally a horrid classid and then lots of <params> etc.
I'm using this one from webdeveloper.com forum. Seems to be quite rare.
<div id="movies" style="display:none; position:absolute; bottom:40px; left:10px; z-index:202">
<object id="video" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/" name="win_media_player" width="320" height="310" hspace="0" vspace="0" title="movie">
<param name="fileName" value="" />
<param name="autostart" value="true" />
<param name="showstatusbar" value="0" />
<param name="showdisplay" value="0" />
<param name="PlayCount" value="1" />
<embed id="mozvid" src="" width="320" height="310" hspace="0" vspace="0" autostart="true" filename="" name="win_media_player" playcount="1" showdisplay="0" showstatusbar="0"></embed>
</object>
</div>
<object id="video" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/" name="win_media_player" width="320" height="310" hspace="0" vspace="0" title="movie">
<param name="fileName" value="" />
<param name="autostart" value="true" />
<param name="showstatusbar" value="0" />
<param name="showdisplay" value="0" />
<param name="PlayCount" value="1" />
<embed id="mozvid" src="" width="320" height="310" hspace="0" vspace="0" autostart="true" filename="" name="win_media_player" playcount="1" showdisplay="0" showstatusbar="0"></embed>
</object>
</div>
Anyhow, this is the only one of several similar snippets where I've been able to programmatically add the "fileName" value when I need the video to run. (I need the video to run without Click Play etc and with no control panel etc). Using code thus:
document.video.fileName = theImage;
var movieParamDOM = document.getElementById ("mozvid");
movieParamDOM.src=theImage;
movieParamDOM.filename=theImage;
var movieParamDOM = document.getElementById ("mozvid");
movieParamDOM.src=theImage;
movieParamDOM.filename=theImage;
Problems.
1) The control panel is still visible on both IE (7) and FF. Even though I've turned it off in both IE and FF style (I think).
2) I don't know when the video is finished in order to carry on doing stuff. E.g. setting display:block; back to default display:none; when the video is done.
3) I'm adding my own buttons on top of the images to control the app but these appear under the media player (z-index of buttons is higher than the div the object is sitting in). Long story regarding using my own buttons but that is what I need to do. I suspect a Modal/Focus issue maybe.
4) Ideally, I want complete control of the media player from javascript. E.g. play forward or reverse, jump to a specific frame, fast forward.
Needs to be a cross-browser kind of solution and ideally not flash (don't have tools/knowledge and users may not have flash plugin).
I think I'm asking a lot!
Wish me luck.
Stuart
