使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流

官方教程：https://help.aliyun.com/document_detail/125570.htm?spm=a2c4g.11186623.0.0.4a3b125de04RLI#task-1997027

在 vue 项目中的 index.html 文件中，引入视频资源

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.11.0/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.11.0/aliplayer-h5-min.js"></script>

封装组件 base_video_Flv：

<template>
  <!-- 可播放 hls(.m3u8)、.flv格式的视频直播流 -->
  <div :id="videoId" :style="{ width: videoWidth, height: videoHeight }"></div>
</template>

<script>
export default {
  props: {
    //视频地址、video的id值
    vData: {
      type: Object,
      default: () => {
        return {
          hlsurl: "", //视频url地址
          cameraId: "", //id
          player: null,
        };
      },
    },
    //视频宽度
    videoWidth: {
      type: String,
      default: "100%",
    },
    //视频高度
    videoHeight: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      videoId: "",
    };
  },
  methods: {
    getVideo(url, videoId) {
      this.player = new Aliplayer(
        {
          id: videoId,
          //source:"http://10.182.28.116:8080/live/00000011-0000-0000-0000-0a3b010b401f.flv", //播放地址，可以是第三方直播地址，或阿里云直播服务中的拉流地址。
          //source:"https://live-hls-web-aje.getaj.net/AJE/index.m3u8",
          source: url,
          isLive: true, //是否为直播播放。
          skinLayout: [], //去除控制栏
        },
        function (player) {
          console.log("The player is created.");
        }
      );
    },
  },
  mounted() {},
  watch: {
    //监听视频地址、video的id值
    vData: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.cameraId) {
          this.videoId = val.cameraId;
          this.$nextTick(() => {
            this.getVideo(val.hlsurl, this.videoId);
          });
        }
      },
    },
  },
  beforeDestroy() {
    //  组件销毁时，清除播放器
    if (this.player) {
      this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom
    }
  },
};
</script>

<style lang="scss" scoped>
//隐藏播放按钮
::v-deep .video-js .vjs-big-play-button {
  display: none;
}
</style>

组件调用：

<template>
  <!-- 接收 hls(.m3u8) 和 .hlv 的视频流 -->
  <!-- 视频页面 -->
  <div style="width: 100%; height: 100%">
    <BaseVideoFlv :vData="vData"></BaseVideoFlv>
  </div>
</template>

<script>
import BaseVideoMore from "./base_video_Flv.vue"; 

export default {
  name: "IndexVideo",
  components: {
    BaseVideoFlv,
  },
  data() {
    return {
      vData: {
        hlsurl: "",
        cameraId: "",
      },
    };
  },
  methods: {
    getUrlParam() {
      // 假数据
      this.vData = {
        hlsurl: "http://10.182.28.116:8080/live/00000011-0000-0000-0000-0a3b010b401f.flv",
        cameraId: "video_id_01",
      };
    },
  },
  created() {
    this.getUrlParam();
  },
};
</script>

<style lang="scss" scoped>
</style>