ASP.NET网站实现现场直播

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

可以先看到截图：

 

把下面的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);
}

 

应用样式：

.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即可。

View 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

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 +  " ' ";
    }
}

 

 

转载于:https://www.cnblogs.com/insus/archive/2012/10/26/2741239.html