网页直播技术是如何实现的？以及如何实现简单的聊天室功能

一般很少创业型公司是全能型人才，一般都是做好自己精通的方向，把其他业务依托于其他成熟的第三方服务上。

前言：总而言之，实现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都给封装了，所以才有这么多可以调用的方法