分类导航

silverlight 发布时间：2022-05-04 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了一个silverlight播放器的DEMO(Expression Encoder 2)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

在写完" Silverlight中鼠标事件的js开发 "一文之后，我就想写一篇真正应用这种事件处理方式的进行实际开发的例子。
后来在网上看到了这篇文章（实际应用链接：http://www.thejamesbondmovies.com/ ），发现里面的DEMO正好是
我想演示的。如下：

     因为这个DEMO的演示用到了Expression Encoder,而相关下载链接,请点击这里。

     原文中的老外因为不满足于Expression Encoder所提供的模板代码，他认为在媒体列表中应该实现点播的效果。而
不仅仅是“一味”的顺序播放。因此他在Expression Encoder代码生成的基础上，对Xaml和js@L_489_9@都做了相应改动。下面
我们来看一下他所开发的主要流程。

     首先使用Expression Encoder来创建一个项目，并将其模板设置为"Expression" (因为本人不喜欢这个模板，所以
在DEMO中使用了"Executive"模板)，然后单击Import按钮来选择要播放的视频@L_489_9@。如下图所示。最后单击“Encode”
进行编码转换(当转换成功后会启动一个测试页面进行演示，“Preview In Brower”需勾选)。

这样我们就可以在“Directory”设置项中下找到我们所生成的所有项目@L_489_9@了。

因为模板@L_489_9@生成的XAML中不带播放列表，所以要修改XAML@L_489_9@中 Canvas 的高度，并将下面的XAML代码（播入列表代码）
放在该@L_489_9@的结尾处：

Navigation arrows   < Path x:Name ="LeftArrow" Opacity ="0.74" Width ="38" Height Stretch ="Fill" stroke ="#FF000000"
Canvas.Left ="11" Canvas.Top ="514" Data ="M37.5,0.5 L37.5,37.5 0.5,37.5 z" Fill ="#FFFFFFFF"
RenderTransformOrigin ="0.5,0.5" cursor ="Hand" >
     Path.RenderTransform
         TransformGroup
             ScaleTransform ScaleX ="1" ScaleY ="1" /> SkewTransform AngleX ="0" AngleY ="0" RotateTransform Angle ="134.119" TranslateTransform X Y </ Path ="RightArrow" ="588" ="314.365"

The outer canvas here is clipped: only the area defined by the rectangle geometry is visible   This is necessary as when we animate the 'Library' canvas inside it we do not want to see the
thumbnails slide under the navigation arrows and off the screen Canvas ="ClippedCanvas" ="491" Canvas.Left ="43" ="550" ="90"
BACkground ="Silver" Canvas.Clip RectangleGeometry Rect ="0, 0, 550, 114"

     Animations to move the playlist left and right. They are numbered so that we can call them
logically from code Canvas.resources Storyboard ="MoveLeft01" DoubleAnimation Storyboard.TargetProperty ="(Canvas.Left)" Storyboard.TargetName ="Library"
                                  From ="13" To ="-613" Duration ="0:0:2" Storyboard ="MoveRight02" The Library Canvas groups the playlist buttons into a single element that can be easily animated
left - right.
     Width ="1157.275" ="82.96" x:Name ="Library" ="550.275" ="playlist1" Image ="play0" ="133.275" source ="1.png" Stretch ="Hand" ="play1" ="2.png" ="139" ="play2" ="3.png" ="278" ="play3" ="4.png" ="417" Canvas ="playlist2" ="607" ="play4" ="5.png" ="play5" ="6.png" ="play6" ="7.png" ="play7" ="8.png" >

下面就要改一下相应的js@L_489_9@了，找到StartPlayer.js@L_489_9@，新的播入列表方法放在页面的最上面:

// 全局变量声明 var curPos = 1 ; 当前播入的媒体@L_489_9@在列表中的位置 maxPos 2 当前的分页数，因为是8个@L_489_9@，每4个@L_489_9@为1页，所以这里是两页 cVideos 8 视频@L_489_9@个数(本DEMO中有8个) function get_mediainfo(mediainfoIndeX) {
     switch (mediainfoIndeX) {

         case 0 :
             return   { " @H_66_82@mediasource : @H_66_82@movie1.wmv ,
                       placeholdersource "" chapters : [] };

         @H_66_82@movie2.wmv @H_66_82@movie3.wmv 3 @H_66_82@movie4.wmv 4 @H_66_82@movie5.wmv 5 @H_66_82@movie6.wmv 6 @H_66_82@movie7.wmv 7 @H_66_82@movie8.wmv : [] };

         default :
              throw Error.invalidoperation( No such mediainfo );
     }
}

将原码中的原有播放@L_489_9@列表变量和相关内容注释：

this._playlist=[];
// try { eval( 'this._playlist=['+ '{"mediasource":"15_mt_l2s_callingsqlfunctions.wmv",'+ '"placeholdersource":"",0)"> '"chapters":'+ '['+ ']},0)"> '{"mediasource":"18_mt_l2s_transactions.wmv",0)"> ']}'+ '];' ); } catch(E){} this._galleryItems=[]; eval( 'this._galleryItems=['+ 'new ExpressionPlayer.GalleryItem("15_mt_l2s_callingsqlfunctions.wmv",""),0)"> 'new ExpressionPlayer.GalleryItem("18_mt_l2s_transactions.wmv","")'+ this._player.set_galleryInfo( this._galleryItems,@R_621_3816@.createDelegate(this, this._onClickGalleryItem) ); this._onPlayNextVideo(null,null);

将下列代码放在该注释下方来解决对相应媒体播放按钮进行事件绑定：

wire up the rollover and click events for each of our play buttons        this .Plugin document.getElementById( ._hostName);

for ( i ; i < cVideos; i ++ )
{
     element .Plugin.Content.findName( ' play + i);
    element.addEventListener( @H_66_82@mouseEnter 3816@.createDelegate( ._rollOver));
    element.addEventListener( @H_66_82@mouSELEave ._rollOut));
    element.addEventListener( @H_66_82@mouSELEftButtonUp ._playX));
}

LeftArrow ).addEventListener( 618@                                  Function.createDelegate( ._rollOver));
._rollOut));
._slideLeft));
RightArrow                                   Function.createDelegate( @H_335_618@._slideRight));

._onPlayNextVideo( null 618@);

而下面就是其相应的事件处理代码了：

_rollOver: (sender, eventArgs) {
    sender.opacity ;
},

  _rollOut: 0.74
     X number(sender.Name.subString( ));
     ._currentMediainfo X;
     ._player.set_mediainfo( get_mediainfo( X ));
    sender.opacity
       (curPos)
      {
           :
              sender.findName( ).opacity 0.85 ;
               break ;
           @H_66_82@moveRight0 curPos).begin();
              curPos -- ;
      }
},

_slideRight: (curPos)
      {
           maxPos:
              sender.findName( ;
             ;
           :
            sender.findName( @H_66_82@moveLeft0 ;
              sender.findName( ;
      }
}

因为使用了新的播放列表变量，所以原来生成的如下方法内容会被改写如下：

_onPlayPrevIoUsVideo: if ._currentMediainfo > )
    {
         ._player.set_mediainfo(get_mediainfo( ._currentMediainfo ));
    }
},

_onPlayNextVideo: cVideos)
    {
         ._currentMediainfo ));
    }
},

     到这里我们可以在本地运行一下default.htm来看一下效果。

     然后为了演示方便，我将这个Application上传到了Silverlight Streaming 上，经常了n遍的上传之后，终于测试
成功，所以才在本文开头做了相应的演示。

    好了，今天的内容就先到这里了.

    源码下载，请点击这里:)

    注：因为老外所写的文章是在silverlight 1.0下运行的，所以本文的JS与原文中有所变动，但不会影响对代码的理解。