www.webdeveloper.com
Results 1 to 5 of 5

Thread: JavaScript control of a Media Player

  1. #1
    Join Date
    Apr 2008
    Posts
    7

    JavaScript control of a Media Player

    Hi


    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 the webdeveloper.com forum. Seems to be quite rare when googled.

    Code:
    <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>


    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:


    Code:
     document.video.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

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Well having been a strong supporter of the Windows Media Player for a long time, I wish you the best in your endeavor.
    But...IMHO if you are concerned about "Needs to be a cross-browser kind of solution" and "users may not have flash plugin", let me tell you, Flash is much more cross-browser friendly and users or more likely to already have the Flash plug-in than they are to have the Windows Media Player.
    I recently lost a nice little contract because I sent the preview to a client in .wmv format instead of Flash. Since then I have come to learn a lot more about the Mac community. Some have WMP, perhaps half don't.
    Once you get involved with Flash and being able to create a custom player, along with the ease of using .xml files to create playlists makes the advantages real obvious.
    Compare this custom Flash video player to the skin you may be able to give the WMP:
    http://www.lynnjohnson.citradingcard...eo_player.html
    or an audio player like this (at bottom of page):
    http://www.uncledoodad.com/photo_ss/...index_its.html
    Can you do that with the WMP??
    Still, wishing you the best,
    Eye for Video
    www.cidigitalmedia.com

  3. #3
    Join Date
    Apr 2008
    Posts
    7
    Thanks for that EfV

    I had discounted Flash on account of my target audience being more of the silver surfer community - an application to show videos of country estates and similar. So not a cutting edge techie/teenage site. I'm sure that most people who've bought a PC to send email and surf and not much more will have no knowledge that things like FireFox exist. (Generalisation). Penetration of Mac is probably rare. On that basis I have assumed that Flash (being a techie kind of thing) would never have been downloaded or looked for within this more conservative community.

    In other words, a PC is just a tool - you buy it from a shop and use whatever tools Microsoft has helpfully pre-installed.

    From that perspective I have assumed that flash might never have been downloaded and may even be viewed with suspicion. Perhaps these days it comes pre-installed in most PCs. So I had a look and according to some figures that I've seen there is 98% usage, which was a bit of a surprise.

    Anyhow, I decided to persevere for one more day with WMV and after setting up repeated tests got the video running when called from JS in both IE and FF but the latter would always show the control panel. I'v also seen little evidence that I could control the Frames directly.

    So I'm looking into Flash as per your advice.
    I use Coffee Cup and it has a tool to create Flash videos including the markup and the xml you describe and the swf etc. I quickly got a video running. However, I'm trying to run the methods on the object link TPlay() or Play() etc. In all cases Firebug tells me that the element has no methods or similar errors.

    Code:
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
     width="320" height="240" id="example" name="example">
    <param name="movie" value="myvideoplayer.swf"/>
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="myvideoplayer.swf" quality="high" bgcolor="#ffffff" width="320" height="240"
     name="example" scale="noscale" type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer" />
     </object>
    Some of the code I've been trying out.
    Code:
      
    //var movie = document.getElementById("example");
    var movie = window.document["example"]; 
    //movie.TStopPlay("_level0/myvideoplayer");
    movie.StopPlay();
    I suspect that TStopPlay etc are for older versions of the plugin and have been dropped.

    I reckon I need to include a javascript library so will try SWFObject.

    Any views on the best solution?

    Cheers

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    So are you aiming to get just one particular video to start playing when a page loads? Or is the goal to have a playlist that the user can choose from? and are you saying that you do not want any Start, Stop, Pause buttons on the player…. not even a mute button?
    Personally I am really irritated by videos or audio that do not let me control at least the sound. In my experience with silver surfers…ahhh, I guess that could almost include me also… They are easily irritated by the sound, and many times just have the sound turned off. My recommendation, give them the option to at least mute the video if not stop it all together.
    As far as controlling the addition of videos, using an xml file to create the playlist is really a very fast and simple method to add videos as well as determine the order in which they play.
    Here is the simple text xml file for a player I created:

    <?xml version="1.0" encoding="UTF-8"?>
    <videos>

    <video title="The Delta Farm Tour" url="video_library/video_1.flv" />
    <video title="The Delta Farm Tour pt 2 " url="video_library/video_2.flv" />
    <video title="The Clapp Farm" url="video_library/video_3.flv" />
    <video title="Evening Festivities pt 1" url="video_library/video_4.flv" />
    <video title="Evening Festivities pt 2" url="video_library/video_5.flv" />
    <video title="Evening Festivities pt 3" url="video_library/video_6.flv" />

    </videos>

    The ActionScript in the player sees this list as an Array. That is, whichever title and url are in the first position (actually the 0 position in an array), it will play first if player is set to autostart = true.
    To add or change the order, just use Notepad and type in a new name or add more videos in whichever position you choose (top, play first, or bottom, play last, etc). Save the text file and upload to your server. Done!
    Here is the player on a page:

    http://www.lynnjohnson.citradingcard...eo_player.html

    The titles you see come from the xml file and could be changed anyway I would like. In this case the autostart is =false, to give the user the opportunity to choose which video they would like.
    Not sure if this has helped or not but I’m interested to see how you finally accomplish your objective.
    Eye for Video
    www.cidigitalmedia.com

  5. #5
    Join Date
    Apr 2008
    Posts
    7
    Slight confusion. I want to have full programmatic control of the player.

    I want to start a specific video determined by e.g. various settings on the page, or random, or geographic location etc. So, if the user clicks on a checkbox indicating they are interested in gardens then a video of gardens plays. They won't necessarily select the video, there might be a random element.

    Another major element is geographic position. I'm creating mashups using Virtual Earth and Google etc. If the user clicks on a marker it may have pictures associated with it or text or a video. If a video is available I want it to run automatically (very short clips - 5-15 seconds probably). And I'm also thinking of Panoramic 'videos' a bit like those clever things where you can spin around or zoom in. The spinning around would be achieved by moving forward frame by frame (for spinning clockwise) and reverse frame by frame for turning anticlockwise. One idea is to use a slider to control the Frame being viewed (a bit like an editing app) or even hotspots on the video itself (I've seen API calls somewhere recently for hotspots but it might have been QuickTime).

    The general approach I have tried to replicate is shown at this Tutorial Page which shows control of a flash player.

    http://www.webwasp.co.uk/tutorials/b...l-js/index.php

    Page 2 shows a technique for getting control using example.TGotoFrame, Tplay, TStopPlay etc. where example is the id="example" of the object. Looks easy enough but I have had no success. Essentially var mymovie = document.getElementById("example"). Does not return a pointer to a SWF object. Eventually, I found a technique here
    http://www.permadi.com/tutorial/flashGetObject/

    when I dropped getElementById in favour of
    var mymovie = window.document["example"];
    mymovie.play(); stopped resulting in Errors. And the method Play could be seen when the mymovie element was inspected (Firebug Add Watch thing). Actually, the Play method was seen once and I haven't seen it since (changing stuff all the time).

    I've tried the SWFObject but it appears to be little more than an Adaptor that writes the object markup via a function call which appears to do very little. I thought it would expose TPlay, (or Play), GotoFrame etc etc. I'm not sure it adds much - early days perhaps I've missed the point of the thing.

    Something very odd is going on with all this TPlay stuff. It obviously works (webwasp proves it). Also, Play works but not Stop or StopPlay when using the permadi technique.

    I have a slight suspicion that the fact I am developing on my local Apache server might be a factor (just something I read about a security issue). I'm going to try and strip down the source of WebWasp to try and recreate it and see how I get on. I suspect I'm delving into real Ninja territory here.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles