诸城盟族网站建设,品牌推广与传播方案,官方网站开发模板,thinkphp商城源码起因#xff1a; 由于需要在一个项目内接入多种常用的视频流#xff0c;所以接触到video.js#xff0c;这里就做个记录。
框架#xff1a; vue2 video.js videojs-contrib-hls videojs-flvjs-es6 videojs-flash video-js.swf
vue安装就不讲了#xff0c;直接从项目…起因 由于需要在一个项目内接入多种常用的视频流所以接触到video.js这里就做个记录。
框架 vue2 video.js videojs-contrib-hls videojs-flvjs-es6 videojs-flash video-js.swf
vue安装就不讲了直接从项目开始了。
第一步安装依赖
// video.js
npm install video.js
// 安装hls用于播放 HLS
npm install videojs-contrib-hls
// 安装flv用于播放 FLV
npm install videojs-flvjs-es6
npm install flv.js
// 安装flash 用于播放 RTMP
npm install videojs-flash
npm install videojs-swf依赖版本
flv.js: ^1.6.2,
video.js: ^7.21.5,
videojs-contrib-hls: ^5.15.0,
videojs-flash: ^2.2.1,
videojs-flvjs-es6: ^1.0.1,
videojs-swf: ^5.4.2,说明比较重要有很多坑
安装 videojs-swf 是因为 RTMP 必须用 flash 播放 RTMP 是由 Adobe 公司基于 Flash Player 播放器对应的音视频 FLV 封装格式提出的一种基于TCP 的数据传输协议video.js 里面使用 flash 是需要引入 swf 文件路径的所以这里需要安装一下方便引用当然也可以自己下载后放在资源目录里面引用。安装以上依赖的时候要注意要用 npm 安装在查资料的时候发现有些文章说用 cnpm 安装会出现一些问题不过我没遇到不过为了避免还是慎重吧毕竟像我这种学艺不精的有些问题解决起来挺玄学的。针对 RTMP 的说明截止目前2023.08.30Chrome浏览器114版本和 Microsoft Edge116版本 已经不支持 flash 了反正我找了半天没找到设置的地方最终还是在360浏览器上才勉强测试了 RTMP 的播放。对于 videojs-flash 这个插件需要 video.js 版本的配合如果版本不对就会一直报错The flash tech is undefined. Skipped browser support check for that tech.解决方案是找到 videojs-flash 里面匹配的版本然后更换 video.js 版本就可以解决了具体的方法文章后面会详细介绍的。
第二步引入依赖
import videojs from video.js
import video.js/dist/video-js.min.css
import videojs-contrib-hls
import videojs-flvjs-es6
import videojs-flash
import SWF_URL from videojs-swf/dist/video-js.swf第三步创建播放器播放视频流
html 部分
templatediv refvideoPlayerBox classcomponentvideo classvideoPlayer video-js/video/div
/templateJS 部分
templatediv refvideoPlayerBox classcomponentvideo classvideoPlayer video-js/video/div
/template
script
import { VueExtend } from vdrag-lib
import videojs from video.js
import video.js/dist/video-js.min.css
import videojs-contrib-hls
import videojs-flvjs-es6
import videojs-flash
import SWF_URL from videojs-swf/dist/video-js.swfexport default {data () {return {player: null,streamType: RTMP,streamURL: rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp}},watch: {streamType: function () {console.log(change streamType)this.$nextTick(() {this.loadPlayer()})},streamURL: function () {console.log(change streamURL)this.$nextTick(() {this.loadPlayer()})},},mounted () {this.initPlayer()},beforeDestroy () {this.disposePlayer()},methods: {// 初始化播放器initPlayer () {this.$nextTick(() {let playerOption {preload: auto, // 预加载autoplay: true, // 自动播放controls: true,techOrder: [html5, flvjs, flash], // 这里的顺序一定要 flvjs 在 flash 前面要不然 flv 格式的就无法播放了// 如果报 app.js:242798 Uncaught TypeError: this.el_.vjs_getProperty is not a function 错误只保留 flash 就不报错了// 报错 The flash tech is undefined. Skipped browser support check for that tech. 可以查看 videojs-flash 里面 node_modules 查看需要的 video.js 的版本然后修改video.js的版本就可以了flash: {hls: { withCredentials: false },swf: SWF_URL // 引入静态文件swf},flvjs: {mediaDataSource: {cors: true,withCredentials: false,},},sources: [{src: this.streamURL,type: this.getType(this.streamType)}],}this.player videojs(this.$el.querySelector(.videoPlayer), playerOption, function onPlayerReady () {console.log(onPlayerReady, this)})})},// 重新加载播放器loadPlayer () {this.$refs.videoPlayerBox.innerHTML video classvideoPlayer video-js/videothis.$nextTick(() {this.initPlayer()})},// 销毁播放器disposePlayer () {if (this.player) {this.player.dispose()}},getType (type) {let playerType switch (type) {case FLV:playerType video/x-flvbreakcase HLS:playerType application/x-mpegURLbreakcase RTMP:playerType rtmp/flvbreakcase RTSP:playerType video/mp4break}return playerType}}
}
/script
