（1）Angular的开发

流行的ReactNative、Node.js、Angular.js、RXjs等技术

H5视频直播
ReactNative应用
JavaScript的新语法
高性能服务端框架
Webpack支撑大规模应用开发
Angular2
Vue.js
3D引擎架构
RxJs构建流式前端应用

image.png

内容元素content
图像image
音频audio
元信息metadata
编解码器codec
视频video
容器文件格式
帧率frame rate
码率bit rate
分辨率bit rate
图片群组group of picture&gop
视频自动播放
autoplay
play()事件回调里执行

loadstart 浏览器开始在网上寻找媒体数据

durationchange 播放时长被改变

loadedmetadata 浏览器获取完毕媒体的时间长和字节数

loadeddata 当前帧的数据已经加载，但没有足够的数据来播放指定音频/视频的下一帧，会触发

progress 当浏览器正在下载指定的视频时，会触发

canplay 当浏览器能够开始播放指定的视频时，会触发

canpalythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的视频时，会触发

playing 当视频在已因缓冲而暂停或停止后就绪时，会触发

timeupdate 当目前的播放位置已更改时会触发

视频录制端：
native
webRTC
视频播放端
flash
<video></video>
native

视频服务器端：
nginx

html5使用基于HLS协议
PC端使用flash基于RTMP协议

视频中的评论利用css和div渲染，同时利用webscoket来实时获取评论并展示

点赞效果是由css3来实现

弹幕文字使用translateX位移
利用css3的transition-duration控制弹幕速度

文字碰撞和重叠检测

websocket实时获取弹幕数据

视频直播性能
视频首屏打开耗时
视频的延迟
直播页面的交互性能

优化http请求

https://github.com/arut/nginx-rtmp-module

rtmp {
 server {
 listen 1935;
 
 chunk_size 4000;
 
application hls {
  live on;
  hls on;
  hls_path /usr/local/var/www/hls;
  hls_fragment 5s;
 }
}
}

image.png image.png

---

请点赞！因为你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群