流行的ReactNative、Node.js、Angular.js、RXjs等技术
H5视频直播 ReactNative应用 JavaScript的新语法 高性能服务端框架 Webpack支撑大规模应用开发 Angular2 Vue.js 3D引擎架构 RxJs构建流式前端应用
内容元素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;
}
}
}