Player Video avec SilverLight 1.0
Bonjour à toutes et à tous,
Ma question est sans doute bête mais je rencontre quelques difficultés.
Je développe un site web actuellement à partir du framework .NET 2.0 et du language C# et dans ce cadre je cherche à créer dans mon site un petit player video tout bête afin de lire les vidéos qui m'auront été envoyé par les utilisateurs.
- Premier problème : Comment faire un player video avec Silverlight 1 (je ne peux pas utiliser le SilverLight 2 puisqu'il nécessite le framework 3.5 et que je suis limité au 2.0 pour le moment).
J'ai certes trouvé quelques tutos mais le résultat n'est pas très probant cf. : www.jobrss.biz/Player/Default.html
Je ne comprends pas pourquoi, mais la video se fige au bout de 5 sec (et ceci quelque soit la vidéo)
Avez-vous une idée de l'origine du problème ?
Avez-vous des tutos digne de ce nom ?
Ci-dessous le code du fichier Page.xaml:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300"
Background="White"
x:Name="Page">
<Canvas.Resources>
<Storyboard x:Name="FadeOutPlayButton">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="playButton" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="pauseButton" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<MediaElement Width="360" Height="260" Canvas.Left="20" Canvas.Top="20" Source="Bear.wmv" Stretch="Fill" x:Name="mediaElt"/>
<Canvas Width="60" Height="40" Canvas.Left="225" Canvas.Top="230" x:Name="playButton" MouseLeftButtonDown="mediaelement_play">
<Rectangle Width="60" Height="40" Fill="#FFFF0000" Canvas.Left="0" RadiusX="7" RadiusY="7" Opacity="0.85"/>
<Polygon Canvas.Left="20" Canvas.Top="10" Points="0,0 0,24 24,12" Fill="Black" Opacity="0.70" />
<Rectangle Width="55" Height="32" RadiusX="5" RadiusY="7" Canvas.Left="2.5" Opacity="0.85">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.482,0">
<GradientStop Color="#D0FFFFFF" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="0.528"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas Width="60" Height="40" Canvas.Left="134" Canvas.Top="230" x:Name="pauseButton" MouseLeftButtonDown="mediaelement_pause">
<Rectangle Width="60" Height="40" Fill="#FFFF0000" Canvas.Left="0" RadiusX="7" RadiusY="7" Opacity="0.85"/>
<Rectangle Opacity="0.85" Width="8" Height="24" Fill="Black" Stroke="#FF000000" Canvas.Left="20" Canvas.Top="8"/>
<Rectangle Opacity="0.85" Width="8" Height="24" Fill="Black" Stroke="#FF000000" Canvas.Left="34" Canvas.Top="8"/>
<Rectangle Width="55" Height="32" RadiusX="5" RadiusY="7" Canvas.Left="2.5" Opacity="0.85">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.482,0">
<GradientStop Color="#D0FFFFFF" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="0.528"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Canvas> |
et ici le code de Page.xaml.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| if (!window.SilverlightSite1)
SilverlightSite1 = {};
SilverlightSite1.Page = function()
{
}
function mediaelement_play(sender, args) {
sender.findName("mediaElt").play();
sender.findName("FadeOutPlayButton").begin();
sender.findName("pauseButton").Opacity = 0.85;
}
function mediaelement_pause(sender, args) {
sender.findName("mediaElt").pause();
sender.findName("FadeOutPauseButton").begin();
sender.findName("playButton").Opacity = 0.85;
}
SilverlightSite1.Page.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
this.control = control;
// Sample event hookup:
rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
},
// Sample event handler
handleMouseDown: function(sender, eventArgs)
{
// The following line of code shows how to find an element by name and call a method on it.
// this.control.content.findName("Storyboard1").Begin();
}
} |
- Second problème : Les quelques tutos que j'ai vu permettait de lire une vidéo définit en "dur"... Je ne suis pas du tout expert en JavaScript ni en Xaml... et donc je voulais savoir s'il était possible de passer en variable le nom de la vidéo à "jouer" sachant que les vidéos sont stockés sur le même serveur ??? (J'imagine que cela doit-être possible car ce n'est pas bien sorcier)
Si oui, comment doit-on procéder ?
Je vous remercie par avance pour vos réponses avisées...
