MediaElement name for Smooth Streaming Sample Player?

Jul 17, 2014 at 8:48 AM
Hello,

I’m using the Smooth Streaming Sample Player downloaded here: http://smf.codeplex.com/releases/view/88970 , and I’m having a hard time accessing the MediaElement object for the player so that I can define events.

It looks like this is normally done via the following:

// The ID attribute of the <object/> element in your HTML where you embed SL2VideoPlayer.
var objectID = "silverlightControlHost1";
// The Name attribute identifying the MediaElement in the XAML of the SIlverlight application -- in SL2VideoPlayer it's "mediaPlayer".
var mediaElementName = "mediaPlayer";
var host = document.getElementById(objectID);
var mediaElement = host.content.findName(mediaElementName);

My problem is that I can’t figure out what mediaElementName should be for this particular player ("mediaPlayer" does not work). Is there a way to figure out what this should be? I’m assuming that with this name, the following will work (replacing "mediaElementName" with whatever this name should be)?
(in my markup):
<param name="onload" value="onLoaded”/>

function onLoaded(sender, eventArgs)
{
var host = document.getElementById('slPlayer');
var mediaElement = host.content.findName(mediaElementName);
var token = mediaElement.addEventListener("DownloadProgressChanged", progressChanged);
 }

function progressChanged(sender, eventArgs) {
  console.log('progress changed');
}
Jul 17, 2014 at 8:54 AM
This is most likely completely obvious, but I am, of course, trying to create these events using Javascript.
Jul 24, 2014 at 2:20 AM
judging from http://smf.cloudapp.net/html5/html/advancedfallbacks.html you need: <object id="myVideo" class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="../media/bigbuck.png"> <param name="source" value="../xap/SmoothStreamingPlayer.xap"/> <param name="onError" value="onSilverlightError" /> <param name="onLoad" value="onSilverlightLoad" /> <param name="minRuntimeVersion" value="4.0.50401.0" /> <param name="autoUpgrade" value="false" /> <param name="enableGPUAcceleration" value="true" /> <param name="windowless" value="true" /> <param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://streams.smooth.vertigo.com/BigBuckBunny_30sec/bigbuck.ism/manifest"/> <div class="pf-static"> Silverlight is not installed or a later version is required. </div> </object> NOTE the scriptablename=Player initialization parameter used there (at "InitParams"). Obviously SMF registers the specific player to the javascript bridge with the passed-in name. Useful if you want to have multiple players on a page, you give there a different name for each one
Jul 24, 2014 at 7:27 AM
Edited Jul 24, 2014 at 7:28 AM
Thanks Birbilis, that was exactly the info I was looking for!

For whatever reason though, the following code is not working:
var host = document.getElementById('slPlayer');
var mediaElement = host.content.findName('Player');
console.dir(mediaElement);

token = mediaElement.addEventListener("DownloadProgressChanged", progressChanged);
mediaElement is returning as null. Here is the player code with the scriptablename InitParam included. Am I missing something?
<div style="height:100%" id="silverlightControlHost"><object id="slPlayer" name="slPlayer" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"><param name="source" value="/main/SmoothStreamingPlayer.xap"/><param name="onError" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="5.0.61118.0" /><param name="autoUpgrade" value="true" /><param name="enableGPUAcceleration" value="true" /><param name="onload" value="onLoaded"/><param name="InitParams" value="scriptablename=Player,selectedcaptionstream=textstream_eng,mediaurl=http://myIP:1935/vod/mymovie/Manifest" /><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"><img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/></a></object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
Aug 11, 2014 at 6:45 AM
Any ideas, Birbilis?
Sep 3, 2014 at 4:15 PM
maybe register the SMFPlayer instance with the JavaScript bridge manually?

e.g. at ClipFlair Studio (http://studio.clipflair.net) I used:

HtmlPage.RegisterScriptableObject("activityWindow", activityWindow);
//NOTE: must do this only after setting RootVisual (obviously for Rendered to be called this will have occured)

I have the above code in the Rendered event at App.xaml.cs to register my main app object with the bridge. Then I can query properties of it and get other scriptable objects that have appropriate class attribute (e.g. [ScriptableType] public class MySMFPlayerSublass ...) that makes them Scriptable from Javascript

You can examine the source code of the above webpage (press F12 in IE) and see how I talk to it in the JavaScript (I have implemented notification to the C# code for browser window closing query so that it can react upon it [e.g. if the clipflair activity object has warnOnClosing property set to false it won't warn you])
Jan 15, 2015 at 5:35 PM
Hi Joeauty, did u manage to solve the problem. I am interested in getting the video player events (buffering, play, pause) from the SmoothStreamingPlayer.xap. facing similar problem as you faced. help appreciated. Waiting. Regards
Jan 15, 2015 at 7:22 PM
Sorry, no luck!
Jan 15, 2015 at 7:48 PM
why don't you extend the player and catch the events, then propagate to Javascript yourself calling back into it via the Javascript bridge?
Jan 16, 2015 at 9:31 AM
Hi Birbilis, I am quite new to SIlverlight and dont really understand what you mean by extending the player. The sample player is provided by microsoft in the form of an xap file. I dont have the sources for this player. You mean I have to build my own player to catch its event. In my opinion this is quite an effort for a´someone like me who know little about player development in silverlight. Besides I need to have the events for players which are in use for playing smooth streaming (Amazon Netflix etc). Make your own player is not the line I want to go along.
I will really appreciate if you can help in accessing the player events through the javascript. the problem is essentially the same as of joeuty. I am not managing to get the handle to the player in my javascript. Help appreciated.
Regards
Jan 16, 2015 at 10:20 AM
the player sources are available as DLLs. A XAP is just a zip package that contains those DLLs, configuration files, some resources (e.g. images/audio) that might not be inside the DLLs etc.

the SMF (MMPPF called now) is available in source code that you can also compile if you wish, but you don’t need to

you can download its installer (2.7 for Silverlight if I remember well) and install it. Then it puts the DLLs in the Global Assembly Cache and you can add reference to them from Visual Studio to your projects. After you do that you can subclass the SMFPlayer (if I remember the class name correctly) class and add more functionality

You can see an example of subclassing the player at http://ClipFlair.codeplex.com, see Client/Media/MediaPlayer folder at the codepage for a project you can try. That player of mine is extending the SMFPlayer class and adds more functionality. Then I host it inside Client/ClipFlair.Windows/MediaPlayerWindow component (a FloatingWindow descendent, as defined in ZUI/FloatingWindow and ZUI/FloatingWindowZUI projects [the later is the zoomable version of the FloatingWindow container])

you can try the result at http://ClipFlair.net, try opening ClipFlair Studio, then use the Help/Tutorial Activity and see the media player component (called Clip component)
Jan 16, 2015 at 10:22 AM
also read the "readme.txt" in the base folder of ClipFlair project sourcecode (at codeplex) to see what requirements exist (what you have to install from SMF and from IIS team [for SmoothStreaming control that SMF uses] on your machine). In fact ClipFlair's player and SMF can also play MPEG-DASH streams apart from Smooth Streaming and progressive download content with latest SmoothStreaming library from IIS team
Jan 16, 2015 at 10:32 AM
btw, a tip for trying the ClipFlair Studio: you can use the wrench button on the titlebar of each component to flip it over (uses ZUI/FlipPanel project for the flipping [has various themes there one can use for the animation, even 3D like]). At the Clip component's back there is a Media URL field where you can give a URL to progressive download file [say a link on Dropbox - my MediaPlayer has code that knows how to convert dropbox file sharing url and find the real download url], or a smooth stream URL or a MPEG-DASH url (make sure you install the prerequisites mentioned in readme.txt if you try to build my code, since if you have older SmoothStreaming library from IIS team it won't support MPEG-DASH - that was added only recently).

at http://gallery.clipflair.net you can also see the PivotViewer component in action (can try the Activity/Video/Image galleries) that may be interesting to you depending on your project (if you need rich metadata queries)
Mar 20, 2015 at 5:02 PM
also patch 10152 from here http://smf.codeplex.com/sourcecontrol/list/patches might be relevant:

player breaks whenever javascript bridge needs to ScriptPlaylistItem with a null S3DProperties.
for example when added the PlaylistItemChanged event (on javascript)
Proposed FIX:
on Microsoft.SilverlightMediaFramework.Core.Javascript.ScriptPlaylistItem change line 41
to:
ScriptS3DProperties = item.S3DProperties!=null ?new ScriptS3DProperties(item.S3DProperties):new ScriptS3DProperties();