美文网首页
在IE、360浏览器中如何使用VLC播放rtsp格式

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

作者: 老白涮肉坊_ | 来源:发表于2021-08-16 16:12 被阅读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)
    

    相关文章

      网友评论

          本文标题:在IE、360浏览器中如何使用VLC播放rtsp格式

          本文链接:https://www.haomeiwen.com/subject/icnmbltx.html