本人已经趟过坑
第一步:安装 32位 vlc
经测试64位安装后播放不显示,要安装32位才行
官网下载:👇
32位下载地址:vlc-3.0.16-win32.exe
64位下载地址:vlc-3.0.16-win64.exe下载
第二步:播放rtsp
关于object
标签写法属性详解请参考这篇文章:object标签属性详解
<object
width="600"
height="400"
events="True"
type="application/x-vlc-plugin"
classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
>
<!-- 缺少了 embed 360和老版谷歌、火狐中不能播放 -->
<embed type="application/x-vlc-plugin" name="vlc" width="100%" height="100%" target="此处填写你自己的rtsp视频地址" />
<!-- 缺少下面这行,IE中不能播放 -->
<param name="mrl" value="此处填写你自己的rtsp视频地址" />
<param name="volume" value="50" />
<param name="autoplay" value="true" />
<param name="loop" value="false" />
<param name="fullscreen" value="false" />
</object>
此时,IE中可能并不会直接在页面显示vlc rtsp视频,因为在IE中还有个 小bug。
经过一番查找后,发现IE浏览器的页面需要触发重绘才能显示。
因此需要加上下方代码
<script>
window.scrollBy(0,0); // 触发浏览器重绘
</script>
如此,就可以在IE中播放rtsp视频了。
此时 rtsp 格式视频还是无法播放怎么办?
如果此时地址上放上了 rtsp 格式视频还是无法播放,那可能需要将播放流从 UDP 转成 TCP。
- 先给 embed 加一个id,embed上移除target属性
<embed id="vlc" type="application/x-vlc-plugin" name="vlc" width="100%" height="100%" volume="50“ controls="true" />
- 通过vlc浏览器加载的插件动态添加地址,并转TCP流进行播放。
const vlc = document.getElementById('vlc')
const options = new Array('rtsp-tcp')
const id = vlc.playlist.add(动态播放地址, "fancy name", options)
vlc.playlist.playItem(id)
此时,理论上就该播放了,但是有时候浏览器加载 vlc 插件也是需要时间的。
vlc.playlist
可能获取时是undefined
,这时候加个setTimeout
就能解决了,定时时间大概大于等于0.5s
后,再去获取vlc.playlist
即可。
setTimeout(() => {
const vlc = document.getElementById('vlc')
const options = new Array('rtsp-tcp')
const id = vlc.playlist.add(动态播放地址, "fancy name", options)
vlc.playlist.playItem(id)
}, 600)
网友评论