在IE、360浏览器中如何使用VLC播放rtsp格式

技术学院󰃄 2022-05-27     󰃩 17 次查看

本人已经趟过坑

第一步：安装 32位 vlc

经测试64位安装后播放不显示，要安装32位才行

第二步：播放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。

1. 先给 embed 加一个id，embed上移除target属性

<embed  id="vlc" type="application/x-vlc-plugin" name="vlc" width="100%" height="100%" volume="50“ controls="true" />

1. 通过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)})