M
M1iS
I'm trying to create a playlist control using AJAX to be used with a flash
video player. I have created the playlist control out of a 2 GridView
controls in an update panel. The first GridView is my list of playlists and
the second GridView is a list of playlist items for the selected playlist.
When a playlist item is selected the html for the flash video player is
generated and inserted into a DIV and the video begins playing. My problem
is that when a new playlist is clicked to be browsed and before another
playlist item is selected my video starts over. I've included my code below.
Any help would be greatly appreciated. Thanks,
--
Scott W.
Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Player.aspx.cs"
Inherits="Player" %>
<!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 runat="server">
<title>Playlist Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="playerColumn" style="width: 400px; float: left;
margin-right: 20px; border-right: gainsboro 1px solid; border-top: gainsboro
1px solid; border-left: gainsboro 1px solid; border-bottom: gainsboro 1px
solid;">
<div id="divPlayer" runat="server">
</div>
</div>
<div id="playlistColumn" style="width: 200px; float: left;
border-right: gainsboro 1px solid; border-top: gainsboro 1px solid;
border-left: gainsboro 1px solid; border-bottom: gainsboro 1px solid;">
Playlist:<br />
<asp:GridView ID="grdPlaylists" runat="server"
AutoGenerateColumns="False" DataKeyNames="PlaylistID"
EmptyDataText="No records found" ShowHeader="False"
AutoGenerateSelectButton="True"
OnSelectedIndexChanged="grdPlaylists_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="PlaylistName"
HeaderText="Playlist" ReadOnly="True" ShowHeader="False" />
</Columns>
</asp:GridView>
<br />
Items:<br />
<asp:GridView ID="grdItems" runat="server"
AutoGenerateColumns="False" DataKeyNames="ItemUrl"
EmptyDataText="No records found" ShowHeader="False"
OnRowCommand="grdItems_RowCommand">
<Columns>
<asp:BoundField DataField="ItemName"
HeaderText="Name" ReadOnly="True" ShowHeader="False" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button1" runat="server"
CommandName="Play" Text="Play" CommandArgument='<%# Eval("ItemUrl") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Code behind:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Player : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
grdPlaylists.DataSource = PlaylistController.GetPlaylists();
grdPlaylists.DataBind();
}
}
protected void grdPlaylists_SelectedIndexChanged(object sender,
EventArgs e)
{
grdItems.DataSource =
PlaylistController.GetPlaylistItems(Convert.ToInt32(grdPlaylists.SelectedValue));
grdItems.DataBind();
}
protected void grdItems_RowCommand(Object sender,
GridViewCommandEventArgs e)
{
if (e.CommandName == "Play")
{
displayPlayer(e.CommandArgument.ToString());
}
}
private void displayPlayer(string mediaUrl)
{
Web20.Players.FlowPlayer121.Clip media = new
Web20.Players.FlowPlayer121.Clip();
media.Url = mediaUrl;
Web20.Players.FlowPlayer121 p = new Web20.Players.FlowPlayer121();
p.AutoPlay = true;
p.Loop = false;
p.InitialScale =
Web20.Players.FlowPlayer121.InitialScaleOptions.scale;
p.Playlist.Add(media);
divPlayer.InnerHtml = p.Html;
}
}
video player. I have created the playlist control out of a 2 GridView
controls in an update panel. The first GridView is my list of playlists and
the second GridView is a list of playlist items for the selected playlist.
When a playlist item is selected the html for the flash video player is
generated and inserted into a DIV and the video begins playing. My problem
is that when a new playlist is clicked to be browsed and before another
playlist item is selected my video starts over. I've included my code below.
Any help would be greatly appreciated. Thanks,
--
Scott W.
Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Player.aspx.cs"
Inherits="Player" %>
<!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 runat="server">
<title>Playlist Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="playerColumn" style="width: 400px; float: left;
margin-right: 20px; border-right: gainsboro 1px solid; border-top: gainsboro
1px solid; border-left: gainsboro 1px solid; border-bottom: gainsboro 1px
solid;">
<div id="divPlayer" runat="server">
</div>
</div>
<div id="playlistColumn" style="width: 200px; float: left;
border-right: gainsboro 1px solid; border-top: gainsboro 1px solid;
border-left: gainsboro 1px solid; border-bottom: gainsboro 1px solid;">
Playlist:<br />
<asp:GridView ID="grdPlaylists" runat="server"
AutoGenerateColumns="False" DataKeyNames="PlaylistID"
EmptyDataText="No records found" ShowHeader="False"
AutoGenerateSelectButton="True"
OnSelectedIndexChanged="grdPlaylists_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="PlaylistName"
HeaderText="Playlist" ReadOnly="True" ShowHeader="False" />
</Columns>
</asp:GridView>
<br />
Items:<br />
<asp:GridView ID="grdItems" runat="server"
AutoGenerateColumns="False" DataKeyNames="ItemUrl"
EmptyDataText="No records found" ShowHeader="False"
OnRowCommand="grdItems_RowCommand">
<Columns>
<asp:BoundField DataField="ItemName"
HeaderText="Name" ReadOnly="True" ShowHeader="False" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button1" runat="server"
CommandName="Play" Text="Play" CommandArgument='<%# Eval("ItemUrl") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Code behind:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Player : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
grdPlaylists.DataSource = PlaylistController.GetPlaylists();
grdPlaylists.DataBind();
}
}
protected void grdPlaylists_SelectedIndexChanged(object sender,
EventArgs e)
{
grdItems.DataSource =
PlaylistController.GetPlaylistItems(Convert.ToInt32(grdPlaylists.SelectedValue));
grdItems.DataBind();
}
protected void grdItems_RowCommand(Object sender,
GridViewCommandEventArgs e)
{
if (e.CommandName == "Play")
{
displayPlayer(e.CommandArgument.ToString());
}
}
private void displayPlayer(string mediaUrl)
{
Web20.Players.FlowPlayer121.Clip media = new
Web20.Players.FlowPlayer121.Clip();
media.Url = mediaUrl;
Web20.Players.FlowPlayer121 p = new Web20.Players.FlowPlayer121();
p.AutoPlay = true;
p.Loop = false;
p.InitialScale =
Web20.Players.FlowPlayer121.InitialScaleOptions.scale;
p.Playlist.Add(media);
divPlayer.InnerHtml = p.Html;
}
}