Using the sample from here, I have changed it to display in modal popup
Upload Save Retrieve and Play MP4 Video files with live streaming from
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 500px;
border: 3px solid #0DA9D0;
padding: 0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
padding: 5px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<hr />
<asp:DataList ID="DataList1" Visible="true" runat="server" AutoGenerateColumns="false"
RepeatColumns="2" CellSpacing="5">
<ItemTemplate>
<u>
<%# Eval("Name") %></u>
<hr />
<asp:Button Text='<%# Eval("Name") %>' runat="server" ToolTip='<%# Eval("Id") %>' OnClientClick = "return ShowModalPopup(this)" />
</ItemTemplate>
</asp:DataList>
<cc1:toolkitscriptmanager id="ToolkitScriptManager1" runat="server">
</cc1:toolkitscriptmanager>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:modalpopupextender id="ModalPopupExtender1" behaviorid="mpe" runat="server"
popupcontrolid="pnlPopup" targetcontrolid="lnkDummy" backgroundcssclass="modalBackground">
</cc1:modalpopupextender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Video
</div>
<div class="body">
<a id="player" class="player" style="height: 300px; width: 300px;
display: block"></a>
<br />
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick = "return HideModalPopup()" />
</div>
</asp:Panel>
<script src="FlowPlayer/flowplayer-3.2.12.min.js" type="text/javascript"></script>
<script type="text/javascript">
var player;
function ShowModalPopup(btn) {
var id = btn.title;
$get("player").href = "FileCS.ashx?Id=" + id;
$find("mpe").show();
$f("a.player", "FlowPlayer/flowplayer-3.2.16.swf", {
clip: {
url: "FileCS.ashx?Id=" + id,
autoPlay: true,
autoBuffering: true
},
plugins: {
controls: null
},
onLoad: function () {
}
});
return false;
}
function HideModalPopup() {
$find("mpe").hide();
$f(0).stop();
return false;
}
</script>
</form>
</body>
</html>