vue展示视频流没有效果

请教一下，vue中如何展示后台传回来的视频流，网上找了好几种办法都不行，不能直接解析播放，求指条明路

后端传回的格式
url :"rtsp://adminS123:ABCabc..@192.168.1.18:054/1/h1234major"
通过el-dialog直接展示出来

需要转格式，网页播放不了

【以下回答由 GPT 生成】

问题解答：

在Vue中展示后台传回的视频流可以通过使用Vue Video Player插件来实现。Vue Video Player是一个基于video.js的视频播放器组件，它提供了丰富的功能和灵活的配置选项。

下面是具体的步骤：

  1. 首先，在你的Vue项目中安装vue-video-player依赖。

    npm install vue-video-player --save

  2. 在你的Vue项目中引入vue-video-player组件。

    ```javascript // main.js import Vue from 'vue' import VideoPlayer from 'vue-video-player'

    // 引入video.js样式 import 'video.js/dist/video-js.css'

    // 引入vue-video-player样式 import 'vue-video-player/src/custom-theme.css'

    // 引入videojs-contrib-hls插件使其支持m3u8格式的视频流 import 'videojs-contrib-hls'

    Vue.use(VideoPlayer) ```

  3. 在你要展示视频流的组件中使用<video-player>标签来展示视频。

    ```html

    ```

通过以上步骤，你就可以在Vue中展示后台传回的视频流了。在上述代码中，我们将视频流的地址通过src参数传递给<video-player>组件，并在playerOptions中进行了配置。你可以根据需要自定义播放器的样式和功能，例如自动播放、是否显示控制栏等。

希望以上解决方案对你有所帮助。如果你有任何疑问，请随时问我。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^