vue项目基于vue-video-player实现rtmp直播流

最新推荐文章于 2024-09-27 17:17:29 发布

总有感动的事等待被发现

最新推荐文章于 2024-09-27 17:17:29 发布

阅读量6k

点赞数 5

分类专栏： IT web 文章标签： web vue

本文链接：https://blog.csdn.net/weixin_39863895/article/details/105553022

版权

本文介绍了在vue项目中使用vue-video-player实现rtmp直播流的过程，包括项目需求、插件选择、安装及使用步骤，并详细解析了在实际应用中遇到的autoplay失效、动态折叠播放器报错以及'flash' tech undefined等问题，提供了相应的解决方案。

摘要由CSDN通过智能技术生成

vue播放器插件

项目要求：

我们做的是一个监控项目，需要实时监控某机器，播放器在监控页面可拖动。

插件选择：

项目是vue框架，播放器选择了vue-video-player插件， vue-video-player，其实就是 video.js 集成到 vue 中，视频流选择rtmp格式，实时性高，稳定性也高，但是依赖flash插件。

使用步骤

安装 vue-video-player

npm install vue-video-player -S

引用插件

import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import { videoPlayer } from 'vue-video-player';
import 'videojs-flash';

注意:
1、vue-video-player 其实就是 video.js 集成到 vue 中，所以千万不要再安装 video.js，可能会出错。
2、播放 HLS 流，需要 videojs-contrib-hls 插件，（！直接引用，因为在安装vue-video-player插件时，hls插件是一并下载下来的），如果需要 RTMP 流，需要 videojs-flash 插件，也是直接引用就可以了（ flash 插件需要在 hls 之前引用）

使用插件播放器

<template>
  <div
    id="videoBox"
    ref="videoBox"
    v-drag
    class="video-box"
  >
    <div class="video-box-header">
      <div>
        <svg-icon
          class="video-box-header-mobile"
          icon-class="mobile"
        />
        <span>AGV监控视窗</span>
      </div>
      <a
        class="el-icon-arrow-up"
        @click="show=!show"
      />
    </div>
    <el-collapse-transition>
      <div v-if="show">
        <videoPlayer
          ref="videoPlayer"
          :options="videoOptions"
          class="vjs-custom-skin videoPlayer"