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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM