【JS&JQuery】使用VLC在html中播放rtsp视频

作者: smartdream | 来源:发表于2020-04-13 14:04 被阅读0次

本文系统: windows10 64位
本文浏览器: IE11
本文 VLC 版本: 使用 vlc-2.2.8-win32.exe 版本下载
使用说明:
使用 vlc-2.2.8-win64.exe 版本时会报错,无法使用vlc.playlist.add(mrl)
使用 VLC 老版本 2.X 版本，新版本 3.X 不行
谷歌浏览器不支持

浏览器支持

一、系统中安装vlc播放器

VLC官方下载地址

下载更早的版本
选择更早的版本
选择 2.2.8
2.2.8
下载win32版本
win32
vlc-2.2.8-win32.exe
vlc-2.2.8-win32.exe

二、使用

html中嵌入标签

<object
  class="naturalVideo"
  type="application/x-vlc-plugin"
  id="vlc"
  events="True"
  classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
  codebase=""
  height="340"
  width="190"
>
    <param name="mrl" value="" />
    <param name="volume" value="50" />
    <param name="autoplay" value="true" />
    <param name="loop" value="false" />
    <param name="fullscreen" value="true" />
</object>

script中加入播放源

var vlc = document.getElementById('vlc');
var mrl = encodeURI('rtsp://......');
var id = vlc.playlist.add(mrl);
vlc.video.aspectRatio = '4:3'; //获取和设置长宽比使用视频屏幕。该属性采用字符串作为输入值。有效值为：“1:1”，“4:3”，“16:9”，“16:10”，“221:100”和“5:4”
let vlcVideo = this.$refs.vlcVideo;//包裹vlc的设置宽高
let vlc_h = vlcVideo.clientHeight;
let vlc_w = vlcVideo.clientWidth;
vlc.style.height = `${vlc_h}px`;
vlc.style.width = `${vlc_w}px`;
vlc.playlist.playItem(id);