【JS&JQuery】使用VLC在html中播放rtsp视频
2020-04-13 本文已影响0人
smartdream
本文系统:
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播放器
下载更早的版本
选择更早的版本
选择 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);
三、IE配置
以下设置完成后需要重启计算机
![](https://img.haomeiwen.com/i19539351/76e0c444880fe6e3.png)
![](https://img.haomeiwen.com/i19539351/479886f1b570f8e3.png)
![](https://img.haomeiwen.com/i19539351/dc0498de0d2edc1a.png)
![](https://img.haomeiwen.com/i19539351/9ab50808596dffcb.png)
![](https://img.haomeiwen.com/i19539351/5a5febf0813d577e.png)
![](https://img.haomeiwen.com/i19539351/51290fb49a6d669c.png)
![](https://img.haomeiwen.com/i19539351/26324b5a89798f1e.png)
![](https://img.haomeiwen.com/i19539351/5297e764899d174a.png)
![](https://img.haomeiwen.com/i19539351/fa333523c0b514e8.png)
![](https://img.haomeiwen.com/i19539351/2fa3e726349aa71e.png)
![](https://img.haomeiwen.com/i19539351/f7b8fecc313fb1f9.png)
![](https://img.haomeiwen.com/i19539351/467ed132dd6bef5c.png)
参考文档网址:
官方文档官方
VLC控件——属性和方法
vlc插件详细使用说明推荐
HTML中实现VLC播放器并对播放器进行控制
html中嵌入VLC播放器(页面展示大华摄像机实时监控)
vlc rtsp流 转 http播放视频
关于RTSP在HTML5前端播放问题解决办法