vue使用videojs的坑

目前项目中需要使用videojs来播放视频流。代码如下：

<video-player ref="videoPlayers" class="vjs-custom-skin videoPlayer"
  :playsinline="true"
  :options="videoPlayer"
  customEventName="customstatechangedeventname">
</video-player>

import {
    
     getVideoPatrolList } from '@/api'
import 'video.js/dist/video-js.css'
import {
    
     videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
export default {
    
    
  name: 'operate',
  components: {
    
     videoPlayer },
  props: ['floorId'],
  data () {
    
    
  	return {
    
    
  	  playerOption: {
    
    
        width: '420',
        height: '290',
        autoplay: true,
        playbackRates: [1.0], // 播放速度
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如'16:9'或'4:3'）
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器
        debug: true,
        sources: [{
    
    
          type: 'rtmp/mp4',
          src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
        }],
        techOrder: ['flash', 'html5'], // 兼容顺序
        controls: true, /* 进度条 */
        controlBar: {
    
    
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false // 全屏按钮
        },
        flash: {
    
    
          hls: {
    
     withCredentials: false },
          swf: SWF_URL
        }
      }
  	}
  }
}

结果一直报The flash tech is undefined Skipped browser support check for that tech这个错：

去网上查了一下，说是把node_module删除，不要使用cnpm，使用npm进行安装，npm多次也不好使，后来发现是版本不一致，需要重新安装

解决方案

vue版本 3.x：

"videojs-contrib-hls": "5.12.2",
"videojs-flash": "2.1.0",
"videojs-swf": "^5.4.2",
"vue-video-player": "^4.0.6",

videojs-flash安装：npm install [email protected] -E

视频就可以播放啦！！！！！！

vue版本 2.x：

webpack.base.conf.js 添加 modules: [path.resolve(‘node_modules’), ‘node_modules’]

resolve: {
    
    
  modules: [path.resolve('node_modules'), 'node_modules']
}

可用的RTMP直播地址：

湖南卫视 rtmp://58.200.131.2:1935/livetv/hunantv
美国1,rtmp://ns8.indexforce.com/home/mystream
韩国GoodTV,rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
香港卫视: rtmp://live.hkstv.hk.lxdns.com/live/hks1
香港财经,rtmp://202.69.69.180:443/webcast/bshdlive-pc
韩国朝鲜日报,rtmp://live.chosun.gscdn.com/live/tvchosun1.stream
美国2,rtmp://media3.scctv.net/live/scctv_800
美国中文电视,rtmp://media3.sinovision.net:1935/live/livestream

VLC

扫描二维码关注公众号，回复： 14752266 查看本文章

可以下载一个VLC，用于测试视频流是否可以播放

解决方案

猜你喜欢