vue中播放flv流视频

最新推荐文章于 2024-04-01 17:25:05 发布

qq_40099034

最新推荐文章于 2024-04-01 17:25:05 发布

阅读量4k

点赞数

分类专栏： Vue 文章标签： vue.js 音视频 javascript

本文链接：https://blog.csdn.net/qq_40099034/article/details/126177595

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、安装环境
npm install video.js
npm install flv.js

2、引入video，在main.js中引入

import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;

在这里插入图片描述
3、在播放flv流视频代码如下

<template>
  <div class="wrapper">
    <video id="videoElement" controls autoplay muted width="800px" height="600px">
    </video>
    <button @click="play">播放</button>
  </div>
</template>

<script>
  import flvjs from "flv.js";
  export default {
    data() {
      return {
        player: null,
      }
    },
    mounted() {
        if (flvjs.isSupported()) {
          var videoElement = document.getElementById('videoElement');
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
        isLive: true,
        hasAudio: false,
            url: 'http://192.168.1.212/hdl/hlsram/live1.flv'
          });
          this.flvPlayer.attachMediaElement(videoElement);
          this.flvPlayer.load();
      	  this.flvPlayer.play();
        }
    },
    methods: {
      play() {
        this.flvPlayer.play();
      }
    },
    beforeDestroy() {
      // 播放器存在清除播放器
      if (this.player) {
         this.player.destroy()
       }
    }
  }
</script>

<style scoped>
  .wrapper {
    width: 800px;
    height: 600px;
    margin: 100px 30px;
    overflow: hidden;
    position: relative;
  }

  .iframe {
    width: 1024px;
    height: 608px;
    position: absolute;
    top: -150px;
    left: -120px;


  }
</style>