Este artigo foi traduzido por máquina.

Em execução

Criando players personalizados com o Silverlight Media Framework

Ben Rush

Fluxo de mídia tornou amplamente presentes na Web. Ele parece todos — de sites de notícias para redes sociais para seu vizinho next-door — está envolvida na experiência do vídeo on-line. Devido a esse surto popularidade, a maioria dos sites deseja apresentar o vídeo de alta qualidade — e de alta qualidade com freqüência reconhecimento de largura de banda vídeo — para seus consumidores de forma confiável e fácil de usar.

Um elemento fundamental na experiência em fornecimento de mídia on-line é o player propriamente dito. O player é com o cliente interage e unidades de todos os elementos da experiência on-line do usuário. Com tanta atenção centrada no player, não é surpresa que se tornaram reprodutores de mídia baseada na Web modernos, muito mais complicados implementar diferente daquela até mesmo alguns anos atrás. Conseqüentemente, os desenvolvedores precisam de uma estrutura robusta em que eles podem criar seus participantes.

O Silverlight Media Framework (SMF) é um projeto de código-fonte aberto que foi lançado pela Microsoft em Microsoft Professional Developers Conference 2009. É uma extensível e altamente dimensionável Silverlight vídeo estrutura que responde diretamente a necessidade de um núcleo estável no qual os desenvolvedores e designers podem criar seus próprios players. O código no centro do Silverlight Media Framework foi aperfeiçoado com base nas lições aprendidas da NBC Olimpíadas e projetos de vídeo domingo à noite Football Web.

Este artigo irá explicar os elementos básicos de SMF, demonstre como integrar SMF em seus próprios projetos de player e orientá-lo um projeto simples que usa SMF para criar uma experiência de player personalizado. Mostrarei como usar o log, configurações e recursos de manipulação de eventos do SMF. Finalmente, criarei um aplicativo de player exibe vídeos sugeridos para a exibição ainda mais quando termina o vídeo atual.

Introdução ao SMF

Para começar, a primeira coisa que você vai querer fazer é baixar a estrutura do CodePlex (SMF.codeplex.com). Você também precisará fazer o download do suave Streaming Player Development Kit (IIS.NET/expand/smoothplayer) e a referência a ele em quaisquer projetos usando SMF. O Kit de desenvolvimento de Player Streaming suave não é parte do SMF — é um componente de código-fonte fechado completamente separado. No entanto, SMF utiliza um conjunto básico de funcionalidade do kit, especificamente o player de vídeo propriamente dito. Desde a elaboração deste artigo, o Kit de desenvolvimento de Player Streaming suave é na versão beta 2.

SMF consiste em um número de assemblies do Microsoft .NET (como mostra a Figura 1), cada uma parte funcional diferente da estrutura geral.

Figura 1 Os conjuntos de Silverlight Media Framework

O assembly principal é Microsoft.SilverlightMediaFramework.dll, que consiste em um número de classes de utilitário e tipos referenciados em todo o restante da estrutura. Ao usar qualquer aspecto do SMF, você também deve fazer referência do assembly Microsoft.SilverlightMediaFramework.dll.

O namespace Microsoft.SilverlightMediaFramework.Data fornece classes auxiliares para consumir dados externos ao player e encapsular dados dentro do player. Os dados podem ser gerais com qualquer formulário, mas também podem ser informações de configurações para o player propriamente dito. Há outro espaço para nome Microsoft.SilverlightMediaFramework.Data.Settings, para tipos que representam e lidar com as configurações do player.

Além dos dados usados para configurações, o tipo de dentro do namespace de dados com que provavelmente você vai interagir é o limite de fluxo DataClient classe, que pode recuperar dados de uma fonte externa. Você fazer referência a este assembly para baixar e usar dados externos ao player.

O player SMF inclui o framework Microsoft.SilverlightMediaFramework.Logging robusto que usa um paradigma de estilo de retorno em que a gravação da infra-estrutura de log gera eventos. Registrar seus próprios métodos de retorno de chamada com o sistema de log e esses retornos de chamada executam operações adicionais chamadas uma vez — por exemplo, postar informações para um serviço da Web ou exibir informações a uma caixa de texto. Você fazer referência a este assembly se desejar usar os recursos de logs interno do SMF.

O assembly Microsoft.SilverlightMediaFramework.Player implementa o player propriamente dito. Ele também fornece uma série de controles do player depende, como o depurador, marcadores de controle e cronograma de volume. O player SMF padrão é elegante e limpa, um ótimo ponto de partida para qualquer projeto que requerem um player do Silverlight. No entanto, para todos os controles definidos dentro de SMF é a noção de modelos de controle, portanto, cada controle pode ser com tema usando ferramentas como o Expression Blend ou no Visual Studio.

Criar e referenciar SMF

SMF baixa como um arquivo .zip único no qual você encontrará um arquivo de solução, um projeto para cada biblioteca de saída e testar projetos para a execução e verificando o player propriamente dito.

SMF conta com o Kit de desenvolvimento de Player Streaming suave. Para fazer referência do kit, mova o assembly Streaming suave (Microsoft.Web.Media.SmoothStreaming.dll) para a pasta \Lib de projeto SMF.

Em seguida, abra a solução SMF no Visual Studio e compilá-lo, todos os assemblies necessários para aproveitar a estrutura de criação. Para verificar que tudo o que é executado conforme o esperado, pressione F5 para iniciar a depuração. Criará a solução e o destino Microsoft.SilverlightMediaFramework.Test.Web executará, apresentando a você com o player SMF padrão fluxo contínuo de um vídeo “ grande Buck coelhinho ” (consulte Figura 2). Observe como completa o player padrão já é, com um elemento da posição para depuração, botões executar/parar/pausar, controles de volume, controles de tela inteira e assim por diante.

Figura 2 O Player SMF e o vídeo Buck coelhinho grande

A próxima etapa é criar seu próprio projeto Silverlight separado e aproveitar SMF de dentro dele. No Visual Studio, clique em File | New | Project | aplicativo Silverlight. Ligue para a solução SMFPlayerTest e clique em OK. Uma caixa de diálogo modal será exibida, perguntando se você deseja hospedar o aplicativo do Silverlight em um novo site. Clique em OK e você verá uma solução de aplicativo do Silverlight básica consiste em dois projetos, SMFPlayerTest e SMFPlayerTest.Web.

A etapa final é fazer referência a assemblies SMF e Kit de desenvolvimento de Player de streaming suave a partir de seu projeto recém-criado. Copie os módulos (assemblies) SMF de saída e Kit de desenvolvimento de Player de streaming suave da pasta de depuração da solução SMF e colá-los em seu novo projeto, conforme mostrado no Figura 3. Sua nova solução agora inclui todas as referências assembly necessárias para aproveitar ao máximo o SMF.

Figura 3 Referenciando assemblies necessários

Exibir o Player

Para começar a usar o SMF, inclua espaço para nome do jogador SMF dentro de sua página MainPage.xaml. Isso garante que todas as referências resolver corretamente:

xmlns:p="clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player"

Agora insira XAML do player no controle de grade LayoutRoot da página: 

<Grid x:Name="LayoutRoot">
  <p:Player>
  </p:Player>
</Grid>

Pressionando F5 será iniciar o projeto e exibir o player SMF. No entanto, porque o player ainda não foi informado que jogar, ele não fará nada. Tudo o que você obtém é um player com nenhum conteúdo a ser reproduzido.

SMF usa SmoothStreamingMediaElement (do suave Streaming Player Development Kit) para executar o vídeo. Das SmoothStreamingMediaElement, SMF herda sua própria player, chamado CoreSmoothStreamingMediaElement. Este objeto é necessário se você deseja que o player para transmitir o conteúdo. Certifique-se de definir a propriedade SmoothStreamingSource como uma URL de mídia de fluxo contínuo de suave válida:

<Grid x:Name="LayoutRoot">
  <p:Player>
    <p:CoreSmoothStreamingMediaElement
      AutoPlay="True"
      SmoothStreamingSource="replace with address to content here"/>
  </p:Player>
</Grid>

Como mencionado anteriormente, a Microsoft fornece fluxo de vídeo de amostra “ grande Buck coelhinho ”, que os desenvolvedores podem usar para testar projetos do Silverlight. Para usar este fluxo de teste, defina a propriedade SmoothStreamingSource em CoreSmoothStreamingMediaElement para:

http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest

Uma vez, pressione F5 para compilar e executar o projeto. O navegador será executado com o mesmo jogador como antes, mas desta vez o “ grande Buck coelhinho ” vídeo começará streaming minutos depois que o player tem totalmente carregado. Se a tarefa foi criar um player do Silverlight básico transmitir o conteúdo, você já fez isso.

No entanto, o SMF oferece um pouco mais do que vimos até agora. Adicionar Let’s algum log básico.

Log do Player

Efetuando login SMF é simples — sempre que um evento é registrado, ele chama um evento LogReceived. Você registrar um manipulador de eventos para este evento e, portanto, recebe uma notificação para cada evento de log como ele é disparado. O que você faz com a notificação é para você; você pode exibi-la em uma nova janela dentro do player, filtrar os eventos e notificar um serviço da Web sempre que um determinado evento é gerado ou faça tudo o que é necessário para seu cenário.

O evento LogReceived é definido estaticamente na classe de agente de log propriamente dito (definido em Microsoft.SilverlightMediaFramework.Logging.dll), portanto, é possível registrar para registrar eventos em qualquer lugar dentro do projeto. Eis um exemplo de registro para e definir o manipulador de eventos no arquivo de projeto SMFPlayerTest MainPage.xaml:

public partial class MainPage : UserControl {
  public MainPage() {
    InitializeComponent();

    Logger.LogReceived += 
      new EventHandler<SimpleEventArgs<Log>>(
      Logger_LogReceived);
  }

  void Logger_LogReceived(object sender, 
    Microsoft.SilverlightMediaFramework.SimpleEventArgs<Log> e) {
    throw new NotImplementedException();
  }
}

SMF gera eventos algumas fora da caixa. Para vê-las, crie um ponto de interrupção no método Logger_LogReceived e execute o player novamente em modo de depuração. Quase imediatamente obter alcance o ponto de interrupção, permitindo que você percorra os parâmetros do método e ver as informações transmitidas para ele.

Dados do log de eventos são empacotados dentro de um objeto de mensagens especial cujo tipo deve herdar de uma classe abstrata denominada registro. Esse tipo de registro abstrato tem três propriedades: Remetente, mensagens e TimeStamp. Remetente faz referência ao objeto que disparou o evento. Mensagem é um objeto do tipo System.String que contém o texto para o evento de log. TimeStamp simplesmente mantém a data e hora em que o objeto de log foi instanciado pela primeira vez. Objeto <>SimpleEventArgs passado como o segundo parâmetro para o manipulador de eventos armazena uma referência para o objeto log através da sua propriedade Result.

Para elevar um evento de log, tudo o que é necessário é instanciar um tipo que herda da classe base log e, em seguida, passa esse tipo para o método de registro estaticamente definido no tipo de agente de log. A estrutura fornece uma classe DebugLog que já herda do tipo base log. O que é especial sobre o tipo de DebugLog, no entanto, é que, se as bibliotecas que está sendo referenciadas por seu projeto Silverlight foram criadas em Debug construir do SMF, passando um tipo DebugLog para a estrutura do registro SMF irá disparar um evento de log correspondente (e, portanto, chamar seus manipuladores de eventos). Por outro lado, uma compilação de versão do SMF irá ignorar qualquer chamada do método de log é transmitido a classe DebugLog. Em resumo, se você tiver depuração instruções que você deseja somente usar Debug cria, com o objeto DebugLog como o argumento de evento de log; caso contrário, será necessário construir seu próprio tipo herdado do tipo de registro abstrato.

Aqui está um exemplo que gera um evento de escuta através do sistema de eventos SMF, instanciar um objeto DebugLog e transmiti-la ao método estático log do agente de log (Certifique-se de que seus arquivos do Kit de desenvolvimento de Player de streaming suave foram criados em configurações de depuração):

public MainPage() {
  InitializeComponent();

  Logger.LogReceived += 
  new EventHandler<SimpleEventArgs<Log>>(
    Logger_LogReceived);

  Logger.Log(new DebugLog { 
    Message = "Listening!", Sender = this }); 
}

Herança da classe Player

Embora o log seja um recurso central do player, os recursos de reprodução SMF só são acessíveis quando você herda e começa a estender o próprio tipo de Player de SMF.

Para ver como isso funciona, você precisará criar uma nova classe chamada SMFPlayer herdado do tipo de Player.

A nova classe SMFPlayer tem esta aparência:

namespace SMFPlayerTest {
  public class SMFPlayer : Player {
    public override void OnApplyTemplate() {
      base.OnApplyTemplate();
    }
  }
}

Cada tipo de FrameworkElement (como o Player na SMF) tem um método OnApplyTemplate que é chamado sempre que o evento ApplyTemplate é gerado. Esse método serve, com freqüência, como um ponto inicial útil de durante a inicialização de um tipo de FrameworkElement.

Nesse caso, eu substituir o método de OnApplyTemplate padrão de dentro da nova classe SMFPlayer. Para demonstrar que o novo tipo SMFPlayer é executado em vez do tipo de Player padrão, você pode definir um ponto de interrupção dentro de substituição. Quando você depurar o player no Visual Studio, este ponto de interrupção será encontrou quando Silverlight executa o SMFPlayer.

Agora atualize o arquivo MainPage.xaml para usar a nova classe do player. Primeiro, inclua espaço para nome do player na lista de espaços para nome já referenciados (como fez anteriormente o espaço para nome de jogador):

xmlns:smf="clr-namespace:SMFPlayerTest"

Basta atualize as marcas de Player no XAML para usar SMFPlayer em vez do Player:

<Grid x:Name="LayoutRoot">
  <smf:SMFPlayer>
    <p:CoreSmoothStreamingMediaElement
      AutoPlay="true"
      SmoothStreamingSource="http://..."/>
  </smf:SMFPlayer>
</Grid>

Em seguida, criar uma instância de uma classe DebugLog e passá-lo para o método de registro como mostrado anteriormente. Isso acionará o evento é registrado anteriormente para o qual um manipulador de eventos:

public override void OnApplyTemplate() {
  Logger.Log(new DebugLog {
    Message = "Hello from OnApplyTemplate!",
    Sender = this
    });

  base.OnApplyTemplate();
}

Para ouvir especificamente este evento a partir do manipulador de eventos, filtre a propriedade Message do próprio objeto DebugLog. Neste exemplo, procure qualquer mensagem que contenha “ OnApplyTemplate ”:

void Logger_LogReceived(
  object sender, SimpleEventArgs<Log> e) {
  if (e.Result.Message.Contains("OnApplyTemplate")) {
    return;
  }
}

Usando dados de configurações

Uma estrutura desenvolvida para lidar com configurações é crucial para projetos de software mais em larga escala. O código para manipular as configurações no SMF foi construído sobre o conjunto Microsoft.SilverlightMediaFramework.Data.dll, que permite que você baixe genérico, dados externos. A camada de configurações de SMF usa essa infra-estrutura para chegar e baixar um arquivo de configurações XML especialmente formatado hospedado em um servidor Web. Depois que os dados de configurações tem sido baixados e ler com êxito, a camada de configurações de SMF encapsula-lo com um objeto SettingsBase cujos métodos são usados para recuperar os valores de configurações.

A classe SettingsBase, como o nome sugere, funciona como uma base para uma classe mais específica que pode fornecer altamente digitado acesso aos seus valores de configurações. Eis um exemplo de uma classe que herda do SettingsBase. Ele tem duas propriedades, um para recuperar uma URL de origem de player de vídeo e outra para recuperar um valor Boolean que indica se o player de vídeo deve iniciar automaticamente ou esperar que o visualizador pressionar o botão de reprodução:

namespace SMFPlayerTest {
  public class SMFPlayerTestSettings : SettingsBase {
    public Uri VideoPlayerSource {
      get { return new Uri(
        GetParameterValue("videoSource")); }
    }

    public bool? AutoStartVideo {
      get { return GetParameterBoolean(
        "autoStart"); }
    }
  }
}

Os métodos de propriedade usam funções implementadas pela classe SettingsBase para inspecionar a coleção de pares nome/valor de configurações carregados para o tipo subjacente (por meio de um mecanismo discutido em breve). Isso fornece um método de tipo seguro e amigável do IntelliSense de recuperar informações de configurações.

Agora criar um novo arquivo XML no projeto SMFPlayerTest.Web, nomeá-la SMFPlayerSettings.xml e adicione o seguinte:

<?xml version="1.0" encoding="utf-8" ?>
<settings>
  <Parameters>
    <Parameter 
      Name="videoSource" 
      Value="http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest"/>
    <Parameter Name="autoStart" Value="True"/>
  </Parameters>
</settings>

Em seguida, crie um objeto SettingsClient no qual você irá carregar as configurações de XML. SettingsClient usa um URI apontando para o arquivo de configurações:

m_settingsGetter = new SettingsClient(
  new Uri("http://localhost:10205/SMFPlayerSettings.xml"));

O processo de recuperar os dados de configurações é assíncrono, portanto, um método de retorno de chamada deve ser atribuído ao método RequestCompleted no SettingsClient:

m_settingsGetter.RequestCompleted += 
  new EventHandler<SimpleEventArgs<SettingsBase>>
  (m_settingsGetter_RequestCompleted);

A última etapa é chamar o método de obtenção sem parâmetros no objeto SettingsClient. Quando os dados são recuperados, o manipulador de eventos settingsGetter_RequestCompleted será chamado e um objeto SettingsBase será passado para ele:

void m_settingsGetter_RequestCompleted(
  object sender, SimpleEventArgs<SettingsBase> e) {

  SettingsBase settingsBase = e.Result;
  return; 
}

O objeto SettingsBase passado para o método settingsGetter_RequestCompleted é carregado com os pares nome/valor analisados a estrutura subjacente do arquivo SMFPlayerSettings.xml para você. Para carregar esses dados em seu objeto SMFPlayerTestSettings, você simplesmente chama o método Merge, que mescla informações de configurações de um objeto derivado de SettingsBase com a do outro:

SettingsBase settingsBase = e.Result;
m_settings.Merge(settingsBase);

this.mediaElement.SmoothStreamingSource = 
  m_settings.VideoPlayerSource;
this.mediaElement.AutoPlay = 
  (bool)m_settings.AutoStartVideo; 

return;

Você não tem mais codificar as propriedades de reprodução automática e SmoothStreamingSource em CoreSmoothStreamingMediaElement dentro da página XAML, pois as configurações do player estão sendo descarregadas de dentro do método OnApplyTemplate. Isso é tudo o que você precisa para o player XAML:

<Grid x:Name="LayoutRoot">
  <smf:SMFPlayer>
    <p:CoreSmoothStreamingMediaElement/>
  </smf:SMFPlayer>
</Grid>

Quando você executa o player, carregarão todos os dados de configurações, o retorno de chamada carregará os valores no elemento de mídia do player e o vídeo começará a transmitir apenas como antes.

Estendendo o Player SMF

Em muitos sites de vídeo populares quando a reprodução de vídeo tiver sido concluído, ver uma lista de vídeos semelhantes ou recomendados. Para ilustrar como é fácil estender o player SMF, let’s percorrer as etapas para criar um recurso de visualização sugerido semelhante no projeto SMFPlayerTest.

Comece adicionando um atributo x: Name para o elemento de Player no arquivo MainPage.xaml:

<Grid x:Name="LayoutRoot">
  <smf:SMFPlayer x:Name="myPlayer">
    <p:CoreSmoothStreamingMediaElement/>
  </smf:SMFPlayer>
</Grid>

Isso torna mais fácil de fazer referência ao objeto SMFPlayer por nome em Visual Studio e Expression Blend.

Agora, clique com o botão direito do mouse no arquivo MainPage.xaml no Solution Explorer e selecione Abrir no Expression Blend. O Expression Blend 3 irá iniciar e exibir uma interface de design ao player SMF. Na linha do tempo e objetos seção, você encontrará um nó myPlayer na árvore de objetos visuais que corresponde ao nome fornecido para o objeto SMFPlayer anteriormente. O objetivo é criar um modelo para SMFPlayer, em seguida, para adicionar três botões sugestão o modelo. Usando um modelo no Expression Blend, você pode adicionar, editar ou remover controles incorporados ao player propriamente dito.

Para criar um modelo, clique com o botão direito do mouse myPlayer na linha do tempo e objetos janela e selecione Editar modelo | editar uma cópia. Uma caixa de diálogo Criar estilo de recursos será exibida, clique em OK. Para inserir os três botões na parte superior do player de vídeo, clique duas vezes no ícone do botão na janela ferramentas para cada botão que deseja adicionar. Três botões agora devem ser visíveis na árvore de controles que compõem o modelo do player (consulte Figura 4).

Figura 4 Controles de botão adicionados à árvore de controle

Selecione todos os três botões na árvore, vá para a janela de propriedades para os controles e definir o alinhamento horizontal e vertical para ser centralizado (consulte Figura 5), alinhando, assim, os botões de centro e intermediária do player de vídeo.

Figura 5 Definindo o alinhamento do controle de botão

Os botões são o tamanho padrão e se encontra entre si. Defina a largura de cada botão como 400 e a altura para 75. Em seguida, ajuste as margens para que um botão tem um deslocamento de 175 pixels da parte inferior, outro deslocamento 175 pixels da parte superior e o último tem deslocamentos sem margem em todos os. O resultado final parecerá Figura 6.

Figura 6 Os botões centralizados no Expression Blend

Para verificar se que os botões foram colocados no player corretamente, salve todos os abra arquivos no Expression Blend e retorne ao Visual Studio. O Visual Studio pode solicitar que você recarregue documentos que foram alterados por Expression Blend. Se isso ocorrer, clique em OK. De dentro do Visual Studio, pressione F5 para reiniciar o player em modo de depuração de SMF. O player agora deve aparecer com três botões alinhados ao centro da tela de vídeo conforme mostrado no Figura 7.

Figura 7 Os botões do Player SMF centralizados

Conectar manipuladores de eventos

Manipuladores de eventos devem agora estar associados com os botões. Para fazer referência os botões do código, você precisa atribuir nomes a eles, fazer através da caixa de texto nome na guia Propriedades. Para simplificar, nomeie os botões Button1, Button2 e Button3. Quando terminar, os objetos e janela de linha do tempo deve atualizar e exibir os nomes de botão adjacentes aos ícones dos botões na árvore visual.

Na guia Propriedades para cada botão, você encontrará um botão de eventos que é usado para atribuir manipuladores de eventos para um componente visual. Selecione um dos botões, clique no botão eventos na guia Propriedades e clique duas vezes na caixa de texto clique para gerar automaticamente um manipulador de eventos dentro do MainPage.xaml.cs. A janela de propriedades para cada botão agora terá um manipulador de evento atribuído ao seu evento Click (consulte Figura 8), e o arquivo MainPage.xaml.cs terá manipuladores de evento atribuídos ao Click do botão para cada evento.

Figura 8 Definir o manipulador de eventos

Você pode depurar o player. Clicando em qualquer um dos botões na tela irá disparar um evento Click, que agora é manipulado pelos métodos em MainPage.xaml.cs gerado automaticamente.

Vídeos sugeridos

Agora let’s utilizar estes botões para ativar o recurso de vídeo sugerido. O seguinte XML representarão as sugestões:

<?xml version="1.0" encoding="utf-8" ?>
<Suggestions>
  <Suggestion DisplayName="A suggestion" Url=""/>
  <Suggestion DisplayName="Another suggestion" Url=""/>
  <Suggestion DisplayName="My final suggestion" Url=""/>
</Suggestions>

O valor do atributo URL, especifique o vídeo que o player é carregado quando o botão for clicado, e o atributo DisplayName é o texto a ser escrito no botão. Salve este arquivo com o nome Suggestions.xml no projeto SMFPlayerTest.Web.

O tipo de DataClient (no namespace Microsoft.SilverlightMediaFramework.Data) será usado para baixar o documento XML e para representar o conteúdo de uma maneira de tipo seguro. Para representar cada sugestão ler do arquivo XML de maneira com rigidez de tipos, crie uma classe chamada SMFPlayerTestSuggestion no seu projeto do Silverlight:

namespace SMFPlayerTest {
  public class SMFPlayerTestSuggestion {
    public string DisplayName;
    public Uri Url; 
  }
}

DataClient como SettingsBase, deve ser derivado por uma classe que permite uma representação com rigidez de tipos de dados de conteúdo XML (neste caso, uma matriz de objetos SMFPlayerTestSuggestion).

Crie outro arquivo de classe dentro do projeto SMFPlayerTest chamado SMFPlayerTestDataClient:

namespace SMFPlayerTest {
  public class SMFPlayerTestDataClient : 
    DataClient<SMFPlayerTestSuggestion[]> {

    public SMFPlayerTestDataClient(Uri Url) : base(Url) { }

    protected override void OnRequestCompleted(
      object sender, SimpleEventArgs<string> e) {

      throw new NotImplementedException();
    }
  }
}

SMFPlayerTestDataClient herda DataClient e define seu argumento modelo como uma matriz de tipos SMFPlayerTestSuggestion. A classe de base DataClient fornece toda a necessária assíncrona rede lógica para ficar on-line e fazer o download do arquivo XML externo. Depois que o conteúdo tiver sido baixado, no entanto, a base DataClient será invocar OnRequestCompleted e espera que todo o processamento dos dados XML para que ocorram, em seguida. Em outras palavras, a classe base DataClient baixa o conteúdo, mas o implementador é responsável por fazer algo com ele.

Aqui está uma implementação mais completa de OnRequestCompleted:

protected override void OnRequestCompleted(
  object sender, SimpleEventArgs<string> e) {

  XDocument doc = XDocument.Parse(e.Result);
  List<SMFPlayerTestSuggestion> suggestions = 
    new List<SMFPlayerTestSuggestion>();
  foreach (XElement element in doc.Descendants("Suggestion")) {
    suggestions.Add(new SMFPlayerTestSuggestion {
      DisplayName = element.Attribute("DisplayName").GetValue(),
      Url = element.Attribute("Url").GetValueAsUri()
    });
  }

  base.OnFetchCompleted(suggestions.ToArray()); 
}

Para fins de simplicidade, usei o LINQ para XML nesta implementação para analisar os elementos necessários e os atributos no XML. Depois de recuperar os valores de atributo DisplayName e URL de cada nó sugestão, um objeto SMFPlayerTestSuggestion é instanciado e os valores são atribuídos.

A etapa final é chamada de evento OnFetchCompleted. Fora consumidores de SMFPlayerTestDataClient podem registrar manipuladores de eventos ao evento FetchCompleted para ser notificado quando os dados de vídeo sugeridos foi descarregados. Como OnRequestCompleted tem empacotado os dados XML em uma forma de tipos seguros, cada manipulador de eventos receberão um conjunto prático de SMFPlayerTestSuggestion objetos, um para cada elemento sugestão no documento XML a classe base DataClient baixado.

DataClient subjacente fornece um método chamado busca que, uma vez chamado, começa o processo de forma assíncrona baixar conteúdo. Para começar a baixar dados sugestão quando o vídeo foi encerrada, anexe um manipulador de eventos chamado mediaElement_MediaEnded ao evento MediaEnded no objeto MediaElement:

void mediaElement_MediaEnded(
  object sender, RoutedEventArgs e) {

  m_client = new SMFPlayerTestDataClient(
    new Uri("http://localhost:10205/Suggestions.xml"));
  m_client.FetchCompleted += 
    new EventHandler<SimpleEventArgs<
    SMFPlayerTestSuggestion[]>>(m_client_FetchCompleted);
  m_client.Fetch(); 
}

O método mediaElement_MediaEnded cria uma instância do tipo SMFPlayerTestDataClient, atribui outro manipulador de eventos ao evento FetchCompleted e, em seguida, chama busca para iniciar o processo de download. O manipulador FetchCompleted será chamado pela chamada para OnFetchCompleted anteriormente implementado em OnRequestCompleted (que é ativado pelo tipo base DataClient depois que o conteúdo tiver baixado).

A implementação de suggestion_FetchCompleted, registradas em até mediaElement_MediaEnded, a matriz com rigidez de tipos de sugestão data e atribui uma sugestão para cada botão:

void m_client_FetchCompleted(
  object sender, SimpleEventArgs<
  SMFPlayerTestSuggestion[]> e) {
  for (int c = 1; c <= 3; c++) {
    Button btn = (Button)GetTemplateChild(
      "Button" + c.ToString());
    btn.Tag = e.Result[c - 1].Url;
    btn.Content = 
      e.Result[c - 1].DisplayName; 
  }
}

GetTemplateChild, um método no tipo subjacente de FrameworkElement, obtém uma referência a cada um dos botões definidos em XAML MainPage. Para cada botão, o texto de exibição é atribuído à propriedade Content e o URI é atribuído à propriedade tag. Cada botão clique pode do manipulador de eventos e, em seguida, puxe o URI da propriedade tag e atribuir a URL para MediaElement do player para reproduzir o fluxo:

private void Button1_Click(
  object sender, System.Windows.RoutedEventArgs e) {

  Uri redirectUrl = (Uri)((Button)sender).Tag;
  myPlayer.MediaElement.SmoothStreamingSource = 
    redirectUrl; 
}

Mostrando os botões

A etapa final é ocultar os botões até que a atualmente fluxo contínuo de vídeo foi encerrada no ponto em que os botões ficam visíveis. Depois que um usuário clica em um botão, os botões estão ocultos novamente.

No Visual Studio, edite a classe SMFPlayer decorando-lo com dois atributos TemplateVisualState:

[TemplateVisualState(Name = "Hide", GroupName = "SuggestionStates")]
[TemplateVisualState(Name = "Show", GroupName = "SuggestionStates")]
public class SMFPlayer : Player

TemplateVisualState é um atributo fascinatingly poderoso que define estados visuais sob a qual pode existir um objeto. Depois que um estado visual se torna ativo, Silverlight irá atualizar propriedades de elementos visuais pertencentes à classe conforme instruído — como a visibilidade de um controle de botão filho.

Para definir o atual estado visual, use o método estático do GoToState da classe VisualStateManager (um tipo nativo do Silverlight). A propriedade GroupName dos grupos TemplateVisualState como estados juntos, enquanto a propriedade Name do TemplateVisualState Especifica o estado individual.

Retornar para o Expression Blend. Clique no modelo myPlayer, em myPlayer diretamente acima da janela designer, clique Edit Template | Editar atual. Clique na guia de estados e role para baixo SuggestionStates conforme mostrado no Figura 9.

Figura 9 Estados visuais para SuggestionStates

Os dois SuggestionStates criados pelos atributos são exibidos como ocultar e mostrar. Se você clicar em Ocultar, um círculo vermelho aparecerá à esquerda, indicando o Expression Blend está gravando as alterações de propriedade no designer. O Expression Blend continua a alterações de propriedade de registro até ocultar é clicado novamente, que faz com que o círculo vermelho gravação desapareça.

Com o Expression Blend ativamente de gravação para o estado visual ocultar, defina os botões para recolhido. Selecione todos os três botões em Objects and Timeline janela e escolha Collapsed como sua visibilidade na guia Propriedades. Interrompa a gravação para o estado visual ocultar clicando no botão Ocultar mais uma vez. Agora clique em Mostrar para que um círculo vermelho é exibido à esquerda do estado visual de slides. Desta vez registre explicitamente visível como o status de visibilidade clicando no botão Opções de propriedades avançadas à direita da lista suspensa visibilidade e selecionando o valor atual do registro. Salvar todos os documentos abertos e volte novamente para Visual Studio.

A classe nativa do Silverlight, VisualStateManager, é usada para definir explicitamente um estado visual ativo no momento. De dentro do método OnApplyTemplate do player, definir ocultar como o estado visual ativo no momento:

VisualStateManager.GoToState(this, "Hide", true);

Dentro de suggestion_FetchCompleted, defina mostrar como o estado ativo no momento para exibir os botões quando o fluxo terminou e concluiu o download de dados sugestão:

VisualStateManager.GoToState(this, "Show", true);

Para ocultar os botões quando um botão é clicado (ou fluxo original é repetido), crie um novo manipulador de eventos MediaOpened eventos do MediaElement e defina o estado visual para ocultar.

Iniciar e o player de depuração uma última vez. Você verá que os botões estão invisíveis até o final muito do vídeo, no ponto em que elas se tornam visíveis. Clicar em um botão navega o player para qualquer URL foi especificada na configuração de sugestão correspondente do botão.

O espaço de projeto SMF no CodePlex fornece acesso a base de código, documentação, discussões e o controlador do problema. Dê uma olhada e o contribute é possível. As mentes mais criativas aplicadas ao projeto, melhor o resultado para todos.

Ben Rush é um desenvolvedor de 18 anos veterano software especializado no Microsoft .NET Framework e tecnologias da Microsoft relacionadas. Ele gosta de código inteligente e rápida bicicleta conta.