此博文省略了流媒体服务器组建(网络管理员的事)。
可以先看到截图：
把下面的js代码，另存为LiveBroadcast.js文件，存在专案中的js目录中：
LiveBroadcast.js
function Fulls() {
try {
if (document.all.Media.playState == 3) { document.all.Media.fullscreen = 1; }
}
catch (e) {
alert("您已经打开了另一个播放窗口，不能全屏观看，请关闭其它的播放窗口再全屏观看。");
}
}
function checkplay() {
var i = document.all.Media.playState;
window.status = "欢迎来到直播室...数据侦测中 ....";
info.style.display = "";
info.innerHTML = " 欢迎来到直播室...数据侦测中... "
if (i == 10) {
document.all.Media.Url = strurl;
window.status = "未发现直播数据,尝试重新连接,请稍候...";
info.style.display = "";
info.innerHTML = " 未发现直播数据,尝试重新连接,... "
}
if (i == 1) {
document.all.Media.Url = strurl;
window.status = "播放结束..,尝试重新连接..";
info.style.display = "";
info.innerHTML = " 播放结束..,尝试重新连接.. "
}
if (i == 2) {
document.all.Media.Url = strurl;
window.status = "直播断开,系统重新连接,请稍候...";
info.innerHTML = " 直播暂停,等待中,请稍候... "
info.style.display = "";
}
if (i == 7) {
document.all.Media.Url = strurl;
window.status = "直播断开,系统重新连接,请稍候...";
info.style.display = "";
info.innerHTML = " 直播暂停,等待中,请稍候... "
}
if (i == 3) {
window.status = "已经成功连接到 [Insus.NET网络科技视频直播专用服务器] ,正在获取数据......";
info.style.display = "none";
}
setTimeout("checkplay()", 6000);
}
try {
if (document.all.Media.playState == 3) { document.all.Media.fullscreen = 1; }
}
catch (e) {
alert("您已经打开了另一个播放窗口，不能全屏观看，请关闭其它的播放窗口再全屏观看。");
}
}
function checkplay() {
var i = document.all.Media.playState;
window.status = "欢迎来到直播室...数据侦测中 ....";
info.style.display = "";
info.innerHTML = " 欢迎来到直播室...数据侦测中... "
if (i == 10) {
document.all.Media.Url = strurl;
window.status = "未发现直播数据,尝试重新连接,请稍候...";
info.style.display = "";
info.innerHTML = " 未发现直播数据,尝试重新连接,... "
}
if (i == 1) {
document.all.Media.Url = strurl;
window.status = "播放结束..,尝试重新连接..";
info.style.display = "";
info.innerHTML = " 播放结束..,尝试重新连接.. "
}
if (i == 2) {
document.all.Media.Url = strurl;
window.status = "直播断开,系统重新连接,请稍候...";
info.innerHTML = " 直播暂停,等待中,请稍候... "
info.style.display = "";
}
if (i == 7) {
document.all.Media.Url = strurl;
window.status = "直播断开,系统重新连接,请稍候...";
info.style.display = "";
info.innerHTML = " 直播暂停,等待中,请稍候... "
}
if (i == 3) {
window.status = "已经成功连接到 [Insus.NET网络科技视频直播专用服务器] ,正在获取数据......";
info.style.display = "none";
}
setTimeout("checkplay()", 6000);
}
应用样式：
.chattable {
border-right: #BED6E0 1px solid;
border-top: #BED6E0 1px solid;
border-left: #BED6E0 1px solid;
border-bottom: #BED6E0 1px solid;
font-size: 12px;
line-height: 1.5;
}
border-right: #BED6E0 1px solid;
border-top: #BED6E0 1px solid;
border-left: #BED6E0 1px solid;
border-bottom: #BED6E0 1px solid;
font-size: 12px;
line-height: 1.5;
}
在aspx页面中的head写js和引用js文件，Insus.NET在javascript语言块中，拉了一个literal Web控件，是为了让后台cs能传值给js。
<head runat="server">
<title></title>
<script type="text/javascript">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</script>
<script src="Js/LiveBroadcast.js"></script>
</head>
<title></title>
<script type="text/javascript">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</script>
<script src="Js/LiveBroadcast.js"></script>
</head>
下面是aspx body网页内代码，哗，直接Ctrl + C 然后Ctrl + V即可。
View Code
<body style="overflow-x: hidden; overflow-y: auto; margin: 2px;" onload="checkplay();">
<form id="form1" runat="server">
<div>
<table style=" 100%; height: 100%; background-color: #ffffff" class="chats"
cellspacing="2" cellpadding="0" align="center" border="0">
<tr>
<td style="height: 173px" align="center">
<object style=" 100%; height: 250px" id="Media" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
name="Media">
<param name="AutoStart" value="-1" />
<param name="url" value='<%= LiveBroadcasePath %>' />
<param name="stretchToFit" value="1" />
<param name="ShowCaptioning" value="1" />
<param name="ShowControls" value="1" />
<param name="uiMode" value="None" />
</object>
<div id="info" style="z-index: 101; left: 69px; position: absolute; top: 127px; height: 22px; background-color: snow"
class="chattable" align="center">
数据处理中...
</div>
</td>
</tr>
<tr>
<td align="center" style="height: 20px; background-color: black" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" style=" 100%">
<tr>
<td style=" 81px">
<input id="Button1" onclick="Fulls()" style="height: 22px" type="button" value="全屏观看" />
</td>
<td align="left">
<asp:Label ID="lblTitle" runat="server" ForeColor="White">现场直播测试...</asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<table style=" 100%; height: 100%; background-color: #ffffff" class="chats"
cellspacing="2" cellpadding="0" align="center" border="0">
<tr>
<td style="height: 173px" align="center">
<object style=" 100%; height: 250px" id="Media" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
name="Media">
<param name="AutoStart" value="-1" />
<param name="url" value='<%= LiveBroadcasePath %>' />
<param name="stretchToFit" value="1" />
<param name="ShowCaptioning" value="1" />
<param name="ShowControls" value="1" />
<param name="uiMode" value="None" />
</object>
<div id="info" style="z-index: 101; left: 69px; position: absolute; top: 127px; height: 22px; background-color: snow"
class="chattable" align="center">
数据处理中...
</div>
</td>
</tr>
<tr>
<td align="center" style="height: 20px; background-color: black" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" style=" 100%">
<tr>
<td style=" 81px">
<input id="Button1" onclick="Fulls()" style="height: 22px" type="button" value="全屏观看" />
</td>
<td align="left">
<asp:Label ID="lblTitle" runat="server" ForeColor="White">现场直播测试...</asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
在.aspx.cs
View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class LiveBroadcast : System.Web.UI.Page
{
private string _LiveBroadcasePath;
public string LiveBroadcasePath
{
get
{
return _LiveBroadcasePath;
}
set
{
_LiveBroadcasePath = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
Data_Binding();
}
private void Data_Binding()
{
//媒体流是mms协议。
this._LiveBroadcasePath = "mms://61.136.19.228/live4";
this.Literal1.Text = "var strurl='" + LiveBroadcasePath + "'";
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class LiveBroadcast : System.Web.UI.Page
{
private string _LiveBroadcasePath;
public string LiveBroadcasePath
{
get
{
return _LiveBroadcasePath;
}
set
{
_LiveBroadcasePath = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
Data_Binding();
}
private void Data_Binding()
{
//媒体流是mms协议。
this._LiveBroadcasePath = "mms://61.136.19.228/live4";
this.Literal1.Text = "var strurl='" + LiveBroadcasePath + "'";
}
}