-
一、视频基础知识
1、帧率（frame rate）
2、码率（bit rate）
3、分辨率（bit rate）
4、图片群组（group of picture & GOP）
二、视频video标签
1、视频全屏：
（1）伪全屏：通过设置样式和布局将视频内容撑满屏幕，无法覆盖webview.
（2）真全屏：一般是调用系统的native播放器来大道全屏观看，覆盖在webview之上。
2、canplaythrough在android的兼容性不是很好，如果要监听视频变化，最好用timeupdate，ios和android兼容性都较高。
3、videojs：开源组件，增加很多兼容性处理。
三、直播结构
1、视频录制端：（1）native：①系统提供丰富的api接口可以调用。②提供丰富的编解码功能。③性能比web页面要好。
（2）webRTC(web real-time communication：①基于pc端：提供Js的api获取视频数据。②利用websocket数据交互)。
2、视频播放器：flash、<vedio></video>、native
3、视频服务器端:nginx
四、直播协议
1、基于hls协议（视频分割成一个个的ts文件）- 短链接http，跨平台，h5直播
（1）html5使用<video>
2、基于rtmp协议 - 长链接tcp，延时低，即时互动。：
（1）pc端使用flash。（2）native端使用系统播放器。
五、http请求：
（1）3次握手，4次挥手。
（2）优化：①二进制分帧。②多路复用。③头部压缩。④服务端推送。
查看全部 -
原始内容 + 编码压缩 ＋ 封装 ＝ 视频
查看全部 -
H5视频弹幕查看全部
-
H5视频弹幕查看全部
-
webpack的手段 1.cdn & hash web pack能设置哪些cdn 1.cdn of js/img => output.publicPath 2.cdn of css => extract-text-webpack-plugin 为什么给静态资源加hash 1.避免覆盖旧文件 2.回滚方便，只需要回滚html 3.由于文件名唯一，可开启服务器永久缓存 hash基本概念 1.hash 2.chunkhash 3.contenthash (extract-text-webpack-plugin) 使你的chunk根据内容生成md5 web pack-md5-hash 拆包 require require.ensure router 离线包与提取公共包 离线包大影响下载／更新速度 1.entry chunk new webpack.optimize.CommonsChunkPlugin({ name: ‘commons’, filename: ‘commons.js’, chunks: [‘js/index’, “js/spa”], }) 2.Explicit vendor chunk 3.将被拆包公共部份提取到common chunk中 4.同3，但将公共部份提到单独的文件中 带来问题： 1.包含动态加载chunk, 导致hash频繁变化 chunk-manifest-webpack-plugin 2.增量更新，commonchunk与chunk中module id 对应不上 recordsPath, recordsInputPath, recordsOutputPath webpack2.0 tree-shaking 就是把没用的代码，从代码里摇走 code split system.import 返回promise 捕获加载error 2.减少首屏包大小 3.减少总体包大小查看全部
-
web pack提高构建速度 1.将大型库外链 External 2.将库预编译 DllPlugin 动态链接库，即事先将包打好，再引用 noParse 将部分库预先编译好为es5 PrefetchPlugin stats-webpack-plugin 3.减少构建搜索或编译路径 resolve.alias 绝对路径 resolve.unsafeCache 保存搜索过的路径，下次启动编译，不再搜索。 慎用： 1.resolve.root 2.resolve.modulesDirectory 3.resolve.fallback 4.缓存 babel-loader { test: /\.js$/, loader: ‘babel, query: { cacheDirectory: ‘./wabpack-cache/’, } } 5.并行 happy pack new HappyPack({ id: ‘jshappy’, loaders: [ { test: /\.js$/, loader: ‘babel, query: { cacheDirectory: ‘./wabpack-cache/’, } } ] }) css (用不了extract-text-webpack-plugin) 代码丑化 66s webpack.optimize.UglifyJsPlugin 19.5 webpack-uglify-parallel 思考： 热刷新／热替换 1.自建server 自建server有什么好处 场景：产品找你配置代理体验 proxy-middleware 2.React-hot-loader 3.HotModuleReplacementPlugin 哪些方法提升开发体验 区分开发环境与生产环境查看全部
-
自建server查看全部
-
RTMP基于flash无法再ios的浏览器里播放，但实时性比HLS好，一般使用这种协议来上传视频流，也就是视频流推送到服务器查看全部
-
视频不能自动播放 1.设置autoplay 2.事件回调函数加play(); 3.webview.mediaPlaybackRequiersUserAction=NO查看全部
-
generator查看全部
-
要注意/有医用使用CodeSplit - 代码分割(拆包)
查看全部 -
webpack2 - Tree-shaking:
把代码中没用过的代码摇走
查看全部 -
CommonsChunckPlugin带来的问题及解决方案
查看全部 -
CommonsChunkPlugin的作用
查看全部 -
产品性能优化 - 利用vendor指明哪些库要打包到公共CommonChunk中 - 再使用CommonsChunkPlugin
查看全部
举报