vue vlc插件的使用

公司要求使用vlc插件播放rtsp实时视频

<object
        :id="item.id"
        class="vlc"
        type="application/x-vlc-plugin"
        events="True"
        width="100%"
        height="100%"
        pluginspage="http://www.videolan.org">
        <param name="mrl" :value="item.path" />
        <param name="volume" value="50" />
        <param name="autoplay" value="true" />
        <param name="loop" value="false" />
</object>

由于视频比例不一致，一样的div框会有不同大小的黑边，
使用以下param标签均不起作用

        <param name="fullscreen" value="true" />
        <param name="stretchToFit" value="1" />

最终通过获取 vlc.video.aspectRatio 来设置长宽比，以此达到铺满外部div的目的，如果大家能找到直接铺满的欢迎评论区留言

export default {
  data () {
    return {
      vedios: [
        { id: 'video1', path: 'rtsp://192.168.1.101:1554/stream/av1_1' },
        { id: 'video4', path: 'rtsp://192.168.1.101:1554/stream/av4_1' }
      ]
    }
  },
  mounted () {
    this.fullScreen(this.vedios)
  },
  methods: {
    fullScreen (vedios) {
      vedios.forEach(item => {
        var vlc = document.getElementById(item.id)
        vlc.video.aspectRatio = '16:9' // 设置比例
        vlc.playlist.playItem(item.path) // 重新加载
      })
    }
  }
}