在app和h5页面中播放视频监控

飞猫探长

已于 2023-04-27 10:13:25 修改

阅读量1.3k

点赞数 2

文章标签：前端 javascript

于 2022-11-24 16:37:34 首次发布

本文链接：https://blog.csdn.net/m0_67021283/article/details/125968293

版权

本文档介绍了在APP和H5中实现视频监控播放的解决方案，由于`live-player`组件在APP中不支持，作者采用FLV.js库来替代。通过创建`video`元素并利用FLV.js进行初始化和加载，成功实现在不同平台上的视频播放。注意，使用`live-player`组件需符合各小程序的类目要求并经过审核。

摘要由CSDN通过智能技术生成

本文章向大家介绍app和h5播放实时视频监控。

我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题，app和h5页面不支持live-player（小程序原生标签）后台报错组件注册失败，原因是该标签不支持app。所以只能换一个方向解决问题，经过我一早上百度下午3点多还没有写出来，网上好多东西乱七八糟说什么的都有，于是乎我综合了一下他们的观点实现了我的实时视频播放....不说了快下班了...上代码。

格式要求

video 支持：App平台，支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。

live-player 支持：app不支持百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式。

注意：使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（微信小程序类目、百度小程序类目），审核通过后在各家小程序管理后台自助开通该组件权限。

正式上代码

此处需要引入flv.js

<template>
  <div class="box">
    <!-- #ifdef H5 || APP-PLUS-->
    <view
      style="
        width: 100%;
        height: -webkit-calc(100% - 44px);
        height: -moz-calc(100% - 44px);
        height: calc(100% - 44px);
        display: table;"
      id="myPlayer"
      class="video"
    />
    <!-- #endif -->
  </div>
</template>

<script>
import flvjs from "../../js/flv.js"; 
export default {
  data() {
    return {
      videourl: "",
    };
  },
  onLoad(e) {
    this.videourl = e.videourl + "?authedkey=" + e.authedkey;
    uni.setNavigationBarTitle({
      title: e.title,
    });
    // #ifdef H5 || APP-PLUS
    this.$nextTick(() => {
      this.getLivePlayer();
    });
    //#endif
  },
  methods: {
    ///H5 初始化播放器
    getLivePlayer() {
      var player = document.createElement("video");
      player.style = "width: 100%";
      document.getElementById("myPlayer").appendChild(player);
      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: false, //<====直播的话，加个这个
          url: this.videourl, //<==自行修改
        });
        this.flvPlayer.attachMediaElement(player);
        this.flvPlayer.load(); //加载
        player.play();
        // this.flv_start();
      }
    },
    statechange(e) {
      console.log("live-player code:", e.detail.code);
    },
    error(e) {
      console.error("live-player error:", e.detail.errMsg);
    },
  },
};
</script>

<style lang="scss" scoped> //样式为全屏
.box {
  position: fixed;
    top: -35%;
    left: -42%;
    width: 173%;
    height: 160%;
    animation: rightHomeCssHome 0.3s forwards;
    background-color: rgb(17, 3, 3);
    padding: 1px;
}
@keyframes rightHomeCssHome {
  from{
    transform: rotate(0deg);
  }
  to{
     transform: rotate(90deg);
  }
}
</style>

---_00后_--作者再找女朋友星球号： nbxonb