站长资源
中国站长网站

vue引入videojs播放rtmp视频流问题

错误代码:

VIDEOJS: ERROR: The “flash” tech is undefined. Skipped browser support check for that tech.
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.

出现上述问题的原因网上有的说是得npm安装,有的说是在webpack里面配置node_modules,不过本人都试了结果还是一样,所以还是得从源头找问题。我用是vue-video-player播放器插件,而它里面又是用的video.js插件

开始我按照正常网上流程安装了vue-video-player,video-js,因为要播放rtmp又安装了video-flash,因为报错又安装了mux.js,总之是报啥错误就装啥,结果就变成上述的错误,可以播放正常的MP4等视频地址,但是rtmp播放不了

尝试着把video-flash及配置参数里面的techOrder: [‘flash’]给去掉,错误是不报了,但是视频还是播放不了啊,并没啥卵用

想写写分析问题的过程,哎有点啰嗦了,直接点吧

下面说一下解决办法

1、首先把node_modules包全部删除

2、修改package.json配置文件,把里面所有的和videojs相关的依赖全部删掉,也就是上面的video-js ,video-flash , mux.js等等你装的一系列相关的东西,只保留一个vue-video-player。为何要这么干,因为通过查看包发现,这货把我们需要的东西都已经写进去了,所以我们安装它的时候会一并安装好

3、重新npm install

依赖下载好之后们就可以启动项目看看结果了(切记除了vue-video-player其它啥也不要装

文字太苍白,我贴一些我的一些配置项,供大家参考

模板部分

<template>
	<div>
		<videoPlayer
		  ref="videoPlayer"
		  :options="videoOptions"
		  class="vjs-custom-skin videoPlayer"
		  :playsinline="true"
		/>
	</div>
</template>

js部分

<script>
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
  import { videoPlayer } from 'vue-video-player'
  import 'videojs-flash'
  import SWF from 'videojs-swf/dist/video-js.swf'
  export default {
    name: 'Monitor',
    components: {
      videoPlayer
    },
    data () {
      return {
        videoOptions: {
          live: true,
          playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
          fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
          techOrder: ['flash', 'html5'], // 兼容顺序
          flash: {
            hls: { withCredentials: false },
            swf: SWF // 引入静态文件swf
          },
          html5: { hls: { withCredentials: false } },
          sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换
            type: 'rtmp/hls',
            // src: 'rtmp://192.168.1.221/live/'
            src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
          }],
          poster: '', // 你的封面地址
          notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
          }
        }
      }
    }
  }
</script>

包依赖部分,其它自己的依赖项自己添加,播放视频只需要这一个依赖项,切记

  "dependencies": {
    "vue-video-player": "^5.0.2",
  }

因为上面用了了swf文件,所以还得配置下webpack的loader来加载swf文件

我用的vue-cli3所以是在vue.config.js中配置的,在chainWebpack中添加如下

chainWebpack: (config) => {
config.module
  .rule('swf')
  .test(/\.swf$/)
  .use('url-loader')
  .loader('url-loader')
  .options({
	limit: 10000
  })
}

至此就已经搭建好了,我们看下效果

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » vue引入videojs播放rtmp视频流问题

评论 抢沙发

评论前必须登录!