1. 程式人生 > >網頁直播技術是如何實現的?以及如何實現簡單的聊天室功能

網頁直播技術是如何實現的?以及如何實現簡單的聊天室功能

一般很少創業型公司是全能型人才,一般都是做好自己精通的方向,把其他業務依託於其他成熟的第三方服務上。
前言:總而言之,實現web端的直播技術,可以採用呼叫第三方的服務,而我再一次  
專案實踐中使用的是網易視訊雲服務提供的web端的api介面實現的。
網易視訊雲服務的web端api介面使用,實現web端直播。網易雲直播
  1. 開發準備:在需要播放視訊的頁面中引入第三方初始化指令碼和樣式表.一般都是cdn連結,當然不同的階段有不同的決定,包放在哪裡都可以,你喜歡就行

    <link href="neplayer.min.css" rel="stylesheet">
    <script src="neplayer.min.js"></script>
  2. 新增播放器video標籤。在網易雲api呼叫之前,需要video標籤,neplayer會在頁面載入時讀取video標籤,並初始化播放器,

    <video id="my-video" class="video-js" x-webkit-airplay="allow" webkit-playsinline controls poster="poster.png" preload="auto" width="640" height="360" >
    <source src="MY_VIDEO.mp4" type="video/mp4">
    </video>

    關於video中class屬性,為了播放器樣式能正常載入,class中必須有”video-js”類,如果要使播放器的播放按鈕位於播放器正中間而不是左上角,需要在class中增加”vjs-big-play-centered”類如果要使播放器自適應填滿父元素,需要在class中增加”vjs-fluid”類,這都是由網易雲視訊服務提供的類和ui設計
  3. neplayer呼叫

    neplayer("videoid", option配置,初始化回撥函式)

    如果video標籤是先載入的,可以不設定初始化回撥函式來手動初始化播放器。但如果video是後加載的,即在nepalyer呼叫的時候,video標籤不在dom上了,那麼需要手動初始化播放器。
  4. 初始化播放器以後呼叫api介面先設定資料來源

    myPlayer.setDataSource({
    type: "video/mp4",
    src: "http://www.example.com/path/to/video.mp4"

    注意:播放器初始化完成如果立即設定資料來源,可能失效,最好,是放在初始化播放器的回撥函式裡面執行,
  5. 最後就是一些api的呼叫
myPlayer.play() 開始播放
myPlayer.pause(); 暫停播放
myPlayer.reset(); 重置播放器
myPlayer.release(); 釋放播放器所有資源
myPlayer.seekTo(12345); 要跳轉到的播放時間(單位毫秒)
myPlayer.pause(); 暫停播放
myPlayer.setMute(true) 是否靜音
myPlayer.setVolume(0.5); 要設定的音量(0 ~ 1)
myPlayer.getVolume(); 獲取當前音量(0 ~ 1)
myPlayer.enterFullscreen(); 全屏播放
myPlayer.exitFullscreen(); 退出全屏
myPlayer.getPlayState(); 獲取播放狀態(1:播放中;2:暫停中;3:播放結束)
onPlayState( stateCode, [func]) 註冊播放狀態回撥函式
myPlayer.refresh(); 重新拉流並播放
on() 監聽播放相關的事件
off() 解除事件監聽

6. 註冊函式異常處理
myPlayer.onError(function(err){
console.log(err.errCode);
console.log(err.errMsg);
});

7. 其實看到這裡你就會發現,其實網易雲視訊服務提供的web端api,只是用了video標籤初始化了一個播放器,一些控制元件api都給封裝了,所以才有這麼多可以呼叫的方法