【前端】在Vue项目中使用vue-video-player实现视频流播放

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在vue项目中使用GitHub上的开源项目vue-video-player结合axios请求rtmp流地址实现监控功能。

一、背景介绍

在项目开发的新一轮需求中增加了实时监控的功能，巧的是在GitHub上有一个开源项目vue-video-player，借此机会谈谈我在本次项目中的经验以及在配置过程中出现的一些问题的解决方案。

二、查看源码

<template>
  <video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)"
                 @ended="onPlayerEnded($event)"
                 @waiting="onPlayerWaiting($event)"
                 @playing="onPlayerPlaying($event)"
                 @loadeddata="onPlayerLoadeddata($event)"
                 @timeupdate="onPlayerTimeupdate($event)"
                 @canplay="onPlayerCanplay($event)"
                 @canplaythrough="onPlayerCanplaythrough($event)"
                 @statechanged="playerStateChanged($event)"
                 @ready="playerReadied">
  </video-player>
</template>
<script>
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import \'some-videojs-plugin\'
  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: \'en\',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }],
          poster: "/static/images/author.jpg",
        }
      }
    },
    mounted() {
      console.log(\'this is current player instance object\', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log(\'player play!\', player)
      },
      onPlayerPause(player) {
        // console.log(\'player pause!\', player)
      },
      // ...player event
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log(\'player current update state\', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        console.log(\'the player is readied\', player)
        // you can use it to do something...
        // player.[methods]
      }
    }
  }
</script>

大致理解一下，其实就是一个video-player组件，类似之前提到过的使用transition-group实现组件轮播效果。

三、移植使用

在组件使用前需要进行些许配置如下：

1、安装vue-vide-player 和 videojs-flash 两个包

npm install vue-video-player videojs-flash --save

2、将其引入并使用

//main.js
/* 引入并使用 vue-video-player */
import VideoPlayer from \'vue-video-player\'
import \'vue-video-player/src/custom-theme.css\'
import \'video.js/dist/video-js.css\'
Vue.use(VideoPlayer)

// 对应子组件中也需要引入
import \'video.js/dist/video-js.css\'
import { videoPlayer } from \'vue-video-player\'
export default {
  components: {
    videoPlayer
  }
}

3、去掉不需要的部分，改装成适用的形式

<template>
  <div id="video">
    <video-player
      autoplay
      muted
      class="video-player-box"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
    ></video-player>
  </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script>
import axios from \'axios\' //axios请求所需引入
import \'video.js/dist/video-js.css\'
import \'videojs-flash\'
import { videoPlayer } from \'vue-video-player\'
export default {
  data: function () {
    return {
      title: \'\',
      size: \'\',
      name: [1],
      videoShow: false,
      playerOptions: {
        // videojs options
        autoplay: true,
        muted: true,
        language: \'en\',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        techOrder: [\'flash\', \'html5\'], //设置顺序，
        sourceOrder: true,
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            type: \'rtmp/flv\',
            src: \'\',//视频流地址使用axios向后端请求的方式获取
          },
          {
            withCredentials: false,
            type: \'application/x-mpegURL\',
          },
        ],
        width: \'160px\',
        height: \'90px\',//设置视频的宽高
      },
    }
  },
  components: {
    videoPlayer, //注册组件
  },
  mounted() {
    axios.get(\'/camera/getrtmp?num=1\').then((res) => {
      this.playerOptions.sources[0].src = res.data
      //设置该组件中videoPlayer播放视频的源为从后端请求来的地址
    })
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    },
  },
}
</script>

四、几个问题

1、希望点开网页就可以看到播放画面。但是谷歌浏览器(Chrome)不支持视频流自动播放，据说是为用户节省流量的同时在一定程度上限制了广告。我们在浏览网页时，如果开发者把视频或音频设置了自动播放，对于一些带宽不是很理想的用户，我们只能在不知情的情况下消耗了流量，主动权应该在我们。

2、在后端未能提供rtmp流地址时进行组件测试。这里推荐可以使用vlc播放器和已知可用的rtmp视频流进行测试，这里提供湖南台的流地址供测试rtmp://58.200.131.2:1935/livetv/hunantv，经过vlc播放测试成功后将该地址写死在

sources: [{
            type: \'rtmp/flv\',
            src: \'\', //写死在此处
          }]

中,即可不依靠后端进行组件测试。

这便是我一次简单的视频流前端架设过程，涉及专业知识表述如有不当之处，还望不吝赐教。

以上是 【前端】在Vue项目中使用vue-video-player实现视频流播放 的全部内容， 来源链接： utcz.com/z/375237.html

回到顶部