我们公司会议室装的球机是大华的，上云需要上乐橙云，但是乐橙的播放控件我们c开发那边集成后播放不了，于是我决定用h5的直播方式播放实时视频，但是有个缺点，延时有10到30秒。
虽然有缺点，但是亦有优点，下面开始说集成的过程。
首先自然是把大华的球机加到乐橙的硬盘录像机里，然后再乐橙的云开放平台里加入这个硬盘录像机设备，这个可以参见我的微博：
https://www.cnblogs.com/LcxSummer/p/13738049.html
加入后可以在乐橙的云开放平台里看到直播的url
这个地址直接放到video标签的src里后，并不能播放，需要看这个浏览器支不支持video的type="application/vnd.apple.mpegurl"
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoUrl;
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
我测试的结果：
video.canPlayType('application/vnd.apple.mpegurl')
""
video.canPlayType('video/mp4')
"maybe"
我的浏览器支持不了，于是采用了另一种方式，利用hls.js 来实现播放
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
hls的下载地址：
https://www.bootcdn.cn/hls.js/
播放也是遇到了一定的问题，报错，提示：
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
百度后找到了解决方案：
给video标签加入 静音即可。Chrome 66为了避免标签产生随机噪音。
最后终于成功，下面见完整的测试代码：