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

一般很少创业型公司是全能型人才,一般都是做好自己精通的方向,把其他业务依托于其他成熟的第三方服务上。
前言:总而言之,实现web端的直播技术,可以采用调用第三方的服务,而我再一次  
项目实践中使用的是网易视频云服务提供的web端的api接口实现的。

网易视频云服务的web端api接口使用,实现web端直播。网易云直播
  1. 开发准备:在需要播放视频的页面中引入第三方初始化脚本和样式表.一般都是cdn链接,当然不同的阶段有不同的决定,包放在哪里都可以,你喜欢就行



  2. 添加播放器video标签。在网易云api调用之前,需要video标签,neplayer会在页面载入时读取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都给封装了,所以才有这么多可以调用的方法

你可能感兴趣的:(js开发中碰见的问题)