網頁直播技術是如何實現的？以及如何實現簡單的聊天室功能
阿新 • • 發佈：2019-01-07
一般很少創業型公司是全能型人才，一般都是做好自己精通的方向，把其他業務依託於其他成熟的第三方服務上。
前言：總而言之，實現web端的直播技術，可以採用呼叫第三方的服務，而我再一次
專案實踐中使用的是網易視訊雲服務提供的web端的api介面實現的。
網易視訊雲服務的web端api介面使用，實現web端直播。網易雲直播
- 開發準備：在需要播放視訊的頁面中引入第三方初始化指令碼和樣式表.一般都是cdn連結，當然不同的階段有不同的決定，包放在哪裡都可以，你喜歡就行
<link href="neplayer.min.css" rel="stylesheet">
<script src="neplayer.min.js"></script>
- 新增播放器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設計 - neplayer呼叫
neplayer("videoid", option配置，初始化回撥函式)
如果video標籤是先載入的，可以不設定初始化回撥函式來手動初始化播放器。但如果video是後加載的，即在nepalyer呼叫的時候，video標籤不在dom上了，那麼需要手動初始化播放器。 - 初始化播放器以後呼叫api介面先設定資料來源
myPlayer.setDataSource({
type: "video/mp4",
src: "http://www.example.com/path/to/video.mp4"
注意：播放器初始化完成如果立即設定資料來源，可能失效，最好，是放在初始化播放器的回撥函式裡面執行， - 最後就是一些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都給封裝了，所以才有這麼多可以呼叫的方法