Question

我有一个 vuejs 组件，它在MP4上流过http流，但是一旦该组件被破坏，http连接就保持打开状态并继续下载内容，直到刷新浏览器为止

在安装组件时，我设置了一个<video>标签src等于MP4网址，这反过来会自动打开与MP4的http连接，并开始下载和显示视频，这是预期的和期望的。但是，destroyed()挂钩中的组件被破坏时，连接保持打开状态并继续下载视频。

我尝试使用XMLHttpRequest()创建连接，但是那也不起作用。有没有一种方法可以在销毁vue组件时基本终止http连接？

Vue组件：

<template>
    <video muted :src="mp4Src"></video>
</template>

export default {
  data() {
    return {
        mp4Src: null
    }
  },
  mounted() {
      this.mp4Src = 'http://my-stream.com/123.mp4';
  },
  destroyed() {
    // Setting this to this.mp4Src = ''; doesnt work
    console.log('How to destroying stream?');
  }
}

Answer 1

向ref元素添加video属性：

<video ref="video" muted :src="mp4Src"></video>

然后，在destroyed钩上获取MediaStream并将其停止：

this
  .$refs
  .video
  .srcObject
  .getTracks()
  .forEach(track => track.stop());
this.$refs.video.srcObject = null;

Answer 2

如果您查看documentation，则应该使用beforeDestroy

在此阶段，实例仍然可以正常运行

而不是被摧毁的api：

Vue实例已解除绑定

编辑：

似乎vue无法在video element中关闭该连接。但是我认为问题可能出在video element自我上。我四处阅读，发现过去人们在正确卸载视频元素方面遇到问题。

我创建了一个变通方法，似乎关闭了连接。 Codepen

beforeDestroy() {
   this.$refs["mp4"].load();
 }

Answer 3

因此，就我而言，在发现我的组件没有被破坏之后，我实际上能够在beforeDestroy()钩子中解决此问题。它之所以未被销毁，是因为组件是在v-if循环中动态创建的，而:key绑定不是一个完全唯一的键，因此这导致组件无法正确更新/销毁。一旦我更正了此:key绑定，它便开始按预期工作。

Vue.js组件停止打开http连接

3 个答案: