• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

vue3 RTMP视频流 --- 直播

武飞扬头像
Caroline0812
帮助1

 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急速浏览器支持  目前各大浏览器暂不支持

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

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 编程之路
  • 本文地址: /boutique/detail/tanhhfeceb
系列文章
更多 icon
同类精品
更多 icon
继续加载