如何实现的？以及如何实现简单的聊天室功能"/>
网页直播技术是如何实现的？以及如何实现简单的聊天室功能
一般很少创业型公司是全能型人才，一般都是做好自己精通的方向，把其他业务依托于其他成熟的第三方服务上。
前言：总而言之，实现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: ".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都给封装了，所以才有这么多可以调用的方法
更多推荐
网页直播技术是如何实现的？以及如何实现简单的聊天室功能
发布评论