shady-xia / flvExtend

基于 flv.js 的功能扩展插件(追帧、断流重连、实时更新)
https://shady-xia.github.io/flvExtend
Other
150 stars 31 forks source link

这个是为啥呢 #2

Closed burialz closed 1 year ago

burialz commented 2 years ago

TypeError: this._mediaElement.play is not a function

shady-xia commented 2 years ago

能贴一下你的代码么

jxh-0514 commented 1 year ago

我也是这样哎,请问怎么解决啊

<!-- flv-extend二次封装过的flv插件 -->
<template>
  <div>
    <div id="videoElement"></div>
  </div>
</template>

<script>
import FlvExtend from "flv-extend";
export default {
  components: {},

  data() {
    return {};
  },

  computed: {},

  watch: {},

  //生命周期 - 创建完成(可以访问当前this实例)
  created() {},
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    this.init();
  },

  methods: {
    init() {
      const videoElement = document.getElementById("videoElement");
      // 配置需要的功能
      const flv = new FlvExtend({
        element: videoElement, // *必传
        frameTracking: true, // 开启追帧设置
        updateOnStart: true, // 点击播放后更新视频
        updateOnFocus: true, // 获得焦点后更新视频
        reconnect: true, // 开启断流重连
        reconnectInterval: 0, // 断流重连间隔
      });

      // 调用 init 方法初始化视频
      // init 方法的参数与 flvjs.createPlayer 相同,并返回 flvjs.player 实例
      const player = flv.init(
        {
          type: "flv",
          url: "http://192.168.1.71:8080/hdl/34020000001110000002/34020000001310000003.flv",
          isLive: true,
        },
        {
          enableStashBuffer: false, // 如果您需要实时(最小延迟)来进行实时流播放,则设置为false
          autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
          stashInitialSize: 128, // 减少首帧显示等待时长
        }
      );

      // 直接调用play即可播放
      player.play();
    },
  },
};
</script>
<style lang="scss" scoped></style>
shady-xia commented 1 year ago

必须用 video 标签 <video id="videoElement" controls autoplay></video>

jxh-0514 commented 1 year ago

必须用video标签 <video id="videoElement" controls autoplay></video>

好的,已成功,谢谢!