此博文省略了流媒体服务器组建(网络管理员的事)。

可以先看到截图：
ASP.NET网站实现现场直播_CSS

 

把下面的js代码，另存为LiveBroadcast.js文件，存在专案中的js目录中：

ASP.NET网站实现现场直播_CSS_02ASP.NET网站实现现场直播_style_03LiveBroadcast.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);
}

 

应用样式：

.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;
        }

 

在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>

 

下面是aspx body网页内代码，哗，直接Ctrl + C 然后Ctrl + V即可。

ASP.NET网站实现现场直播_CSS_02ASP.NET网站实现现场直播_style_03View Code
<body style="overflow-x: hidden; overflow-y: auto; margin: 2px;" onload="checkplay();">
    <form id="form1" runat="server">
        <div>
            <table style="width: 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="width: 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="width: 100%">
                            <tr>
                                <td style="width: 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

ASP.NET网站实现现场直播_CSS_02ASP.NET网站实现现场直播_style_03View 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 + "'";
    }
}