标签:style family 测试结果 container font start fun 切片 blank
目前几种视频流的简单对比:
协议 |
httpflv |
rtmp |
hls |
dash |
传输方式 |
http流 |
tcp流 |
http |
http |
视频封装格式 |
flv |
flv tag |
Ts文件 |
Mp4 3gp webm |
延时 |
低 |
低 |
高 |
高 |
数据分段 |
连续流 |
连续流 |
切片文件 |
切片文件 |
Html5播放 |
可通过html5解封包播放(flv.js) |
不支持 |
可通过html5解封包播放(hls.js) |
如果dash文件列表是mp4webm文件,可直接播放 |
RTMP(Real Time Messaging Protocol)是基于TCP的,由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。
HLS(HTTP Live Streaming)是基于HTTP的,是Apple公司开放的音视频传输协议。
HTTP FLV则是将RTMP封装在HTTP协议之上的,可以更好的穿透防火墙等。
Http_flv & RTMP
这两个协议实际上传输数据是一样的,数据都是flv文件的tag。http_flv是一个无限大的http流的文件,相比rtmp就只能直播,而rtmp还可以推流和更多的操作。但是http有个好处,就是是以80http通信的,穿透性强,而且rtmp是非开放协议。
这两个协议是如今直播平台主选的直播方式,主要原因就是延时极低。
将测试:RTMP延迟1s左右,HTTPFLV延迟1-2s左右,可用于对延迟要求比较苛刻的场景,但要注意兼容性,文章最后会说明HTTPFLV兼容性。
HTTP FLV直播Demo:
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>flv.js demo</title> <style> .mainContainer { display: block; width: 1024px; margin-left: auto; margin-right: auto; } .urlInput { display: block; width: 100%; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 8px; } .centeredVideo { display: block; width: 100%; height: 576px; margin-left: auto; margin-right: auto; margin-bottom: auto; } .controls { display: block; width: 100%; text-align: left; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 10px; } .logcatBox { border-color: #CCCCCC; font-size: 11px; font-family: Menlo, Consolas, monospace; display: block; width: 100%; text-align: left; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="mainContainer"> <video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay> Your browser is too old which doesn‘t support HTML5 video. </video> </div> <script src="./flv.js?v=2"></script> <script> if (flvjs.isSupported()) { startVideo() } function startVideo(){ var videoElement = document.getElementById(‘videoElement‘); var flvPlayer = flvjs.createPlayer({ type: ‘flv‘, isLive: true, hasAudio: true, hasVideo: true, enableStashBuffer: true, url: ‘https://xl.live-play.acgvideo.com/live-xl/520658/live_12860646_332_c521e483.flv?wsSecret=778d91efcb22c588be28cb67ebe57082&wsTime=1510929009‘ }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } videoElement.addEventListener(‘click‘, function(){ alert( ‘是否支持点播视频:‘ + flvjs.getFeatureList().mseFlvPlayback + ‘ 是否支持httpflv直播流:‘ + flvjs.getFeatureList().mseLiveFlvPlayback ) }) function destoryVideo(){ flvPlayer.pause(); flvPlayer.unload(); flvPlayer.detachMediaElement(); flvPlayer.destroy(); flvPlayer = null; } function reloadVideo(){ destoryVideo() startVideo() } </script> </body> </html>
flv.js问题:(暂时发现这几个)
1. 播放一段时间后,音视频不同步
2. 播放一段时间后,音频模糊
3. 暂停后继续播放是接着暂停时的场景继续播,对于直播会产生延迟 =》 临时解决方案:暂停后继续播放时,手动销毁视频再重新加载播放
4. 手机端兼容性差
--------------------------------------------
1,2 问题解决方案:
尝试设置 config.fixAudioTimestampGap = false
控制台将不会输出大量警告信息。
经检测,不同的推流客户端,会导致音视频同步问题有不一样的体现。
LFLiveKit 的音频流时间戳问题,定期会有两帧之间存在两倍时间戳差,会导致严重音画不同步。
目前在我们平台,ios客户端音视频均同步,安卓客户端音视频不同步,需要设置flvjs的config.fixAudioTimestampGap = false才会音视频同步。
github issue:https://github.com/Bilibili/flv.js/issues/136
----------------------------------------------
判断flv.js在手机端是否支持点播和httpflv直播:
是否支持点播视频:flvjs.getFeatureList().mseFlvPlayback
是否支持httpflv直播流:flvjs.getFeatureList().mseLiveFlvPlayback
目前测试结果:
ios :均不支持,包括微信和safari
安卓:微信均不支持;其他浏览器部分支持点播,全部不支持直播
标签:style family 测试结果 container font start fun 切片 blank
原文地址:http://www.cnblogs.com/saysmy/p/7851911.html