JavaScriptBridge and CreatePlaylist

Apr 30, 2011 at 7:15 AM

Not being able to download the prebuilt SmoothStreamingPlayer.xap, I have built one myself using the code below. In my html page I can manipulate the player object using the Play(), Stop(), Pause() methods, but CreatePlaylist fails with "Error: Object doesn't support this property or method" same goes for CreatePlaylistItem. Is something broken in the Javascript bridge or am I doing something wrong?

MainPage.xaml:

<UserControl x:Class="fPlayerPCSilverlight.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"
    xmlns:Core="clr-namespace:Microsoft.SilverlightMediaFramework.Core;assembly=Microsoft.SilverlightMediaFramework.Core" 
    xmlns:Media="clr-namespace:Microsoft.SilverlightMediaFramework.Core.Media;assembly=Microsoft.SilverlightMediaFramework.Core"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="800">
    <Grid x:Name="LayoutRoot" Background="Black">
        <Core:SMFPlayer x:Name="mediaPlayer" IsControlStripVisible="False" PlaylistVisibility="Disabled" ScriptableName="fPlayer"/>
    </Grid>
</UserControl>
MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace fPlayerPCSilverlight
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Player.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Smooth Streaming Player</title>
    <script type="text/javascript">

        var fPlayer = null;

        function onPlayerReady(thePlayer) {
            fPlayer = thePlayer;
        }

        function Play(stream) {
            try {
                createNewPlaylistItem(stream);
                fPlayer.Play();
            } catch (e) {
                alert(e);
            }
        }

        function Stop() {
            fPlayer.Stop();
        }

        function GetVolume() {
            var vol = fPlayer.GetVolume();
            alert('Current volume = ' + vol);
            return vol;
        }

        function SetVolume(vol) {
            fPlayer.SetVolume(vol);
        }

        function createNewPlaylistItem(stream) {
            try {
                var NewPlaylistItem = fPlayer.CreatePlayListItem(stream, '', 'Title', 'Description');
                NewPlaylistItem.DeliveryMethod = 'AdaptiveStreaming';
                var NewPlaylist = fPlayer.Player.CreatePlaylist();
                NewPlaylist.AddPlaylistItem(NewPlaylistItem);
                fPlayer.Player.SetPlaylist(NewPlaylist);
            } catch (e) {
                alert(e);
            }
        }

        function ChannelUp() {
            var stream = 'http://streams.smooth.vertigo.com/elephantsdream/Elephants_Dream_1024-h264-st-aac.ism/manifest';
            Play(stream);
        }

        function ChannelDown() {
            var stream = 'http://ecn.channel9.msdn.com/o9/content/smf/smoothcontent/elephantsdream/Elephants_Dream_1024-h264-st-aac.ism/manifest';
            Play(stream);
        }
    </script>
</head>
<body>
<form id="form1" runat="server" style="height: 100%">
    <input type="button" value="Stop" onclick="Stop()"/>
    <input type="button" value="Get Volume" onclick="GetVolume()"/>
    <input type="button" value="Set Volume to 0" onclick="SetVolume(0)"/>
    <input type="button" value="Set Volume to 1" onclick="SetVolume(1)"/>
    <input type="button" value="Up" onclick="ChannelUp()"/>
    <input type="button" value="Down" onclick="ChannelDown()"/>

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                width="100%" height="100%">
            <param name="source" value="Bin/Debug/fPlayerPCSilverlight.xap"/>
            <param name="minRuntimeVersion" value="4.0.50826.0"/>
            <param name="autoUpgrade" value="true"/>
            <param name="InitParams"
                   value="scriptableName=fPlayer,mediaurl=http://streams.smooth.vertigo.com/elephantsdream/Elephants_Dream_1024-h264-st-aac.ism/manifest"/>
        </object>
    </div>
</form>
</body>
</html>


May 17, 2011 at 9:46 AM

The SmoothStreamingSamplePlayer is on the download page now.

The samples projects in the sources are a good source for troubleshooting problems like this. The sources are also available on the download page.

It looks like you forgot to hookup the onload event, so you are not connected to the SL app in your script. The sample works like this. The javascript code:

    <script type="text/javascript">
        var slCtl = null;
        function pluginLoaded(sender, args) {  
            slCtl = sender.getHost().Content;
        }

        function createNewPlaylistItem() {
            var NewPlaylistItem = slCtl.Player.CreatePlaylistItem('http://ecn.channel9.msdn.com/o9/content/smf/smoothcontent/elephantsdream/Elephants_Dream_1024-h264-st-aac.ism/manifest', '', 'Title', 'Description');
            NewPlaylistItem.DeliveryMethod = 'AdaptiveStreaming';
            var NewPlaylist = slCtl.Player.CreatePlaylist();
            NewPlaylist.AddPlaylistItem(NewPlaylistItem);
            slCtl.Player.SetPlaylist(NewPlaylist);
        }
    </script>
The HTML looks like this:
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="95%">
	<param name="source" value="../../ClientBin/SmoothStreamingPlayer.xap"/>
         <param name="onload" value="pluginLoaded" />
	<param name="background" value="white" />
	<param name="minRuntimeVersion" value="4.0.50303.0" />
	<param name="autoUpgrade" value="true" />
         <param name="InitParams" value="scriptablename=Player" />
	<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50303.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>

May 24, 2011 at 11:09 AM

Thanks for pointing out the missing onload hook. 

Where can I find the exact source code for the SmoothStreamingPlayer.xap currently available? 

May 24, 2011 at 11:58 AM

Hi

In your code sample you do:

                var NewPlaylistItem = fPlayer.CreatePlayListItem(stream, '', 'Title', 'Description');
                NewPlaylistItem.DeliveryMethod = 'AdaptiveStreaming';
                var NewPlaylist = fPlayer.Player.CreatePlaylist();
                NewPlaylist.AddPlaylistItem(NewPlaylistItem);
                fPlayer.Player.SetPlaylist(NewPlaylist);

But shouldn't it be

                var NewPlaylistItem = fPlayer.CreatePlayListItem(stream, '', 'Title', 'Description');
                NewPlaylistItem.DeliveryMethod = 'AdaptiveStreaming';
                var NewPlaylist = fPlayer.CreatePlaylist();
                NewPlaylist.AddPlaylistItem(NewPlaylistItem);
                fPlayer.Player.SetPlaylist(NewPlaylist);

(Calling CreatePlaylist() on fPlayer instead of fPlayer.Player)

- Loke

                var NewPlaylistItem = fPlayer.CreatePlayListItem(stream, '', 'Title', 'Description');
                NewPlaylistItem.DeliveryMethod = 'AdaptiveStreaming';
                var NewPlaylist = fPlayer.Player.CreatePlaylist();
                NewPlaylist.AddPlaylistItem(NewPlaylistItem);
                fPlayer.Player.SetPlaylist(NewPlaylist);
May 24, 2011 at 12:34 PM

The sources can be found in the sources-zip. See the downloads section.

May 24, 2011 at 2:51 PM

Ok. Found the player under Players/SmoothStreaming in the source archive on the download page. 
The javascript above I have changed so it now works, with the following restrictions:

1. Cannot toggle to full screen because this is not allowed except from within silverlight and on a user generated event, which is ok. I thought a signed player would do, but that does not seem to be working in-browser. I have added a button that appears in the corner to handle this.

2. When changing media sources from javascript the caption stream is lost and so captions are dropped. I have added a new play method that handles the above creation of playlist etc, passing on the SelectedCaptionsStream.