vue项目播放rtmp直播流

windows、chrome浏览器、vue项目

安装依赖

npm install vue-video-player -S

main.js引入

import VideoPlayer from 'vue-video-player'
import 'videojs-flash'
//import 'videojs-contrib-hls'//不确定是否需要了
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

helloworld.vue代码

不知道的bug

1.网上看的好多demo都说要自己用npm 安装videojs、videojs-falsh、videojs-swf。我照着操作反而不行，各种问题，

VIDEOJS: ERROR: The "flash" tech is undefined. Skipped browser support check for that tech

videojs Cannot read property 'one' of undefined

No compatible source was found for this media

具体原因我也不知道，也懒得研究，可能因为PC端chrome浏览器在移动模拟器下的问题，先别用模拟器调试了，直接用真实浏览器调试吧

我创建了一个干净的vue项目，只引入了vue-video-player一个组件，node_modules目录里面出现了video.js和videojs-flash、videojs-swf等各种videojs-*开头的组件

2.swf好像并不是必须的，逻辑上看是先判断h5能否播放，不能的话就用flash的方式播放，而播放flash用的就是pllayerOptions里面的swf设置

				flash: {
					hls: { withCredentials: false },
					//swf: './static/video-js.swf'				 // 引入静态文件swf
				},

可能别的浏览器会需要用到吧

3.手机上访问此网页，依然显示博客播放。具体原因也不知道，还有待研究，本想接入第三方的插件，

结果阿里云直接说明不支持https://help.aliyun.com/document_detail/125570.html

flash模式

h5模式

一共也就这两种模式可供选择，手机上两种都不支持

华为的播放器也是直截了当

https://support.huaweicloud.com/playersdk-live/live_58_0015.html

 

另一款http-flv更是简单明了not possible

https://www.yanxurui.cc/posts/server/2017-11-25-http-flv/#rtsprtmp-streaming

那就再观望观望, 望的越多，越省的写代码了