vue3 RTMP视频流 --- 直播

 VUE页面

1.  
   <div class="con monitor">
2.  
   <video
3.  
   id="mymain"
4.  
   class="video-js vjs-default-skin vjs-big-play-centered"
5.  
   preload="auto"
6.  
   data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
7.  
   </video>
8.  
   </div>

TS

1.  
   const options2 = {
2.  
   autoplay: true, // 是否自动播放
3.  
   fullscreenToggle: true, // 是否全屏
4.  
   muted: false, // 是否静音
5.  
   controls: false,
6.  
   fluid: true, // 宽高自适应
7.  
   sources: [{
8.  
   src: 'rtmp://192.168.3.136/live/play',
9.  
   // src: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1',
10.  
    type: 'rtmp'
11.  
    }]
12.  
    }
13.  
    nextTick(()=>{
14.  
    const player2 = videojs(document.getElementById('mymain'), options2, function onPlayerReady () {
15.  
    videojs.log('播放器已经准备好了!')
16.  
    })
17.  
    player2.player()
18.  
    })
19.  
    // 以上代码是在setup中

引入和npm安装配置

1.  
   /* npm下载的包
2.  
   "video.js": "^5.1.9",
3.  
   "videojs-flash": "^2.1.0"
4.  
   "videojs-swf": "^5.4.2",
5.  
   */
6.  
   import 'videojs-flash'
7.  
   import videojs from 'video.js'
8.  
   import { videoPlayer } from 'vue-video-player'
9.  
   import 'video.js/dist/video-js.css'
10.  
    import 'vue-video-player/src/custom-theme.css'

还下载什么了  有点忘记了  而且这个 flash  只被 360急速浏览器支持  目前各大浏览器暂不支持

这篇好文章是转载于：编程之路