[Solved] ScriptableName issue in IE<9, Chrome and FireFox; unable to create link between SMFPlayer and Javascript

Mar 30, 2012 at 3:15 PM

Hi all,

I developped an asp.net web site, with one single page in which can be played video files inside a SMF player.

The purpose of the page is to display videos; the user clicks on a link inside a list a files (a table actually).

 

First let's see some code below :

1. The javascript part I put in the <head> element

    <script type="text/javascript">
        var basicPlayer = null;

        function VideoStop() {
            basicPlayer.Stop();
        }
        function OnPlayerReady(playerArgs) {
            basicPlayer = playerArgs;
        }

        function changeMedia(uRI) {
            var NewPlaylistItem = basicPlayer.CreatePlaylistItem(uRI, '', '', '');
            NewPlaylistItem.DeliveryMethod = 'ProgressiveDownload';
            var NewPlaylist = basicPlayer.CreatePlaylist();
            NewPlaylist.AddPlaylistItem(NewPlaylistItem);
            basicPlayer.SetPlaylist(NewPlaylist);
            basicPlayer.Play();
        } 
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            Ready();
        }); 
    </script>

 

2. The player part in the <body>

    <asp:Panel ID="pnlPlayer2" runat="server" CssClass="sous_groupe player">
        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                width="576" height="400" id="silverlightControl">
                <param name="source" value="ClientBin/CJI.Demat.Web.Browse.Player.xap" />
                <param name="onError" value="onSilverlightError" />
                <param name="background" value="white" />
                <param name="minRuntimeVersion" value="5.0.61118.0" />
                <param name="autoUpgrade" value="true" />
                <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration: none">
                    <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Download Microsoft Silverlight"
                        style="border-style: none" />
                </a>
            </object>
            <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
                border: 0px"></iframe>
    </asp:Panel>

3. The xaml part which references a SMF player :

<UserControl xmlns:smf="http://schemas.microsoft.com/smf/2010/xaml/player"  x:Class="Browse.Player.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="576" Padding="0" Margin="0">

    <Grid x:Name="LayoutRoot" Background="Transparent" Width="576" Height="400">
        <Border BorderThickness="0"></Border>
        <ScrollViewer x:Name="ScrollView" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"
                      BorderThickness="0" Background="#eee" Padding="0" Margin="0">
            <StackPanel x:Name="ContentStackPanel"  Margin="0">

                <TextBlock x:Name="LogText" Text="" Height="20"/>

                <smf:SMFPlayer x:Name="pVideo"
                               MediaOpened="pVideo_MediaOpened"
                               ScriptableName="basicPlayer"
                               PlaylistVisibility="Disabled"
                               VersionInformationVisibility="Disabled"
                               CaptionsVisibility="Disabled"
                               Background="#FC8"
                               Padding="0"
                               Margin="0"
                               BorderThickness="0"
                               Width="576" Height="360"
                               >
                </smf:SMFPlayer>
                <TextBlock x:Name="tbInfo" Text="" Height="20"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</UserControl>

 

Some explanations :

The ready function retrieves a video file list from a directory, then fill a table with it; a html link is added for each line in the table; While clicking on it, it calls the changeMedia function which musts open the video file in the SMF video player.

I use the basicPlayer variable to interact with the player. The link between the xaml and javacript is achieved through the scriptableName property equaled to basicPlayer, and the function onPlayerReady triggered while the player is ready.

In IE9, it works fine; I can see the video file running.

In IE < 9, any Firefox and any Chrome web navigator, it fails. The error message is "basicPlayer is null".

And of course, my client cannot install IE9 on his PCs ... I must fine a solution.

 

Did some of you experience the same issue?

Thank you all in advance for your help.

OnPlayerReady
Apr 12, 2012 at 9:52 AM

For your tests in Firefox and Chrome, are you still loading the player from the same domain as the HTML?

- Loke

Apr 16, 2012 at 9:39 AM
lokexstream wrote:

For your tests in Firefox and Chrome, are you still loading the player from the same domain as the HTML?

- Loke

Hi lokexstream,

It is not the case.
I found the solution of my problem, after a lot of digginq in several forums, and eventually a simple solution.
I downloaded the last source code package available in the download page of this project (microsoft-smf-src-2.2012.0214.0.zip).
And it is full of sample codes, and fortunately for javascript interactions.

I dug in it and found that I wasn't instantiating correctly the videoPlayer on javacript side.
I was actually doing it like in an older version of the FrameworkPlayer.

Here is the code one must use with the current version (2.6.1) :

// javascript part    
<script type="text/javascript"> var basicPlayer = null; function VideoStop() { basicPlayer.Player.Stop(); } function pluginLoaded(sender, playerArgs) { basicPlayer = sender.getHost().Content; } function changeMedia(uRI) { var NewPlaylistItem = basicPlayer.CreatePlaylistItem(uRI, '', '', ''); NewPlaylistItem.DeliveryMethod = 'ProgressiveDownload'; var NewPlaylist = basicPlayer.Player.CreatePlaylist(); NewPlaylist.AddPlaylistItem(NewPlaylistItem); basicPlayer.Player.SetPlaylist(NewPlaylist); basicPlayer.Player.Play(); } </script>
// html player part :
<
div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="512" height="329" id="silverlightControl"> <param name="source" value="ClientBin/MyProgressiveDownloadPlayer.xap" /> <param name="onError" value="onSilverlightError" /> <param name="background" value="red" /> <param name="minRuntimeVersion" value="5.0.61118.0" /> <param name="autoUpgrade" value="true" /> <param name="onload" value="pluginLoaded" /> <param name="InitParams" value="scriptablename=Player" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration: none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Télécharger Microsoft Silverlight" style="border-style: none" /> </a> </object> <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe> </div>

Notice 2 things :
- in the javascript part : the pluginLoaded implementation.
- in the html player part : the "onload" param whose name MUST BE "pluginLoaded", otherwise it is not working.

Now it works fine, in every web navigator (FF 9+, IE7+, Chrome) !
But one mystery remains : I cannot understand why the "wrong" code was effective in IE9.

Hope it helps.