错误代码:
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 }) }
至此就已经搭建好了,我们看下效果
评论前必须登录!
注册