• 在vue中接收rtmp视频流并播放,切换视频源


    vue环境

    1、包

    "video.js": "5.19",
     "videojs-flash": "2.1.2"

    2、html

    <video
                    id="my-player1"
                    class="video-js
                    vjs-default-skin
                    vjs-big-play-centered"
                    preload="auto"
                    width="500"
                    height="400"
                    data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
                   
                  </video>

    3、js

    data里放

    options1: {
              autoplay: true, // 是否自动播放
              muted: false, // 是否静音
              controls: false,
              fluid: true, // 宽高自适应
              sources: [{
                src: 'rtmp://-----------------------',
                type: 'rtmp/flv'
              }]
            }
    mounted()中

    this.player1 = videojs('my-player1', this.options1, function onPlayerReady() {
            videojs.log('播放器已经准备好了!')
            this.on('play', function() {
              console.log('开始/恢复播放')
            })
            this.on('pause', function() {
              console.log('暂停播放')
            })
            this.on('ended', function() {
              console.log('结束播放')
            })
          })
          this.player1.play()


    切换视频源,踩了坑记录下,就下面几行代码:
    this.player1 = videojs('my-player1', this.options1, function onPlayerReady() {
                var player1 = this
                player1.src({ src: 'rtmp://------------------', type: 'rtmp/flv' })
                this.play()
              })
  • 相关阅读:
    Maven私服安装
    Maven运行的方式
    Maven传递依赖的范围
    Maven子模块
    Maven父工程
    Maven项目指定JDK版本
    Maven传递依懒
    Maven概念模型
    Swift -欢迎界面1页, 延长启动图片的显示时间(LaunchImage)
    Swift
  • 原文地址:https://www.cnblogs.com/awei4home/p/9969698.html
Copyright © 2020-2023  润新知