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

2021-08-16  本文已影响0人  老白涮肉坊_

本人已经趟过坑

第一步:安装 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

  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)
}, 600)
上一篇下一篇

猜你喜欢

热点阅读