最新项目涉及到摄像头，这篇文章记录一下在VUE中播放RTSP视频流。
这篇文章主要介绍使用VLC插件播放RTSP视频流，目前支持的浏览器有 360浏览器、2345浏览器，可用于一些对播放器要求不高的项目中。
安装VL插件
VLC插件网上有很多，需要的小伙伴网上下载一个就行，我用的是 vlc-3.0.8-win32.exe ，我有使用过 win64 的发现插件不支持，具体原因还没有去深究，知道的小伙伴欢迎留言。
安装VLC主要注意勾选 Mozilla 插件，否则视频流也是播放不了的。
播放RTSP视频流
rtsp视频流播放是使用<object> 标签
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org/" events="false"
width="100%" height="100%">
<param :value="'rtsp://192.168.1.101:8557/h264'" name="mrl">
<param name="volume" value="50">
<param name="autoplay" value="true">
<param name="loop" value="false">
<param name="fullscreen" value="false"> <param name="controls" value="false">
</object>
使用此方法会产生一个很难受的问题，就是 <object> 会默认是最顶层的，并且z-index 也控制不了他的层级。
因为<object> 标签不在 dom 文档流里面，浏览器在解析的时候先把<object> 放置在最上层，然后依次解析dom文档，放在下层，所以在这里使用z-index是无效的。
为了解决这个问题，我引入了<iframe> 标签，<iframe> 标签的级别高于 <object> 标签，而又由于<div>能够遮挡<iframe>，所以可以通过在<div>中加入<iframe>来解决该类问题。
<div>
<iframe src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%;z-index:-1; filter:alpha(opacity=0);"/>
<!-- 在此处编写被覆盖的布局 -->
</div
这样处理虽然不是最好的方法，但是勉强能实现视频播放。
还有更好的办法欢迎留言！
