时间戳

首页 > 解决方案 > 使用 vuejs 渲染视频对象

javascript - 使用 vuejs 渲染视频对象

问题描述

我正在尝试使用 vuejs 在 vi​​deoList 数组中渲染视频对象。视频被推送到数组中，但视图只输出“[object HTMLVideoElement]”。如何让 vue 渲染视频？

<div v-for="(video,index) in videoList" :key="index">
    {{video}}
</div>

export default {
data(){
    return{
        videoList:[]
    }
},
methods:{
    connectToNewUser(userId, stream) {
        const call = myPeer.call(userId, stream)
        const video = document.createElement('video')
        call.on('stream', userVideoStream => {
            this.addVideoStream(video, userVideoStream)
        })
    },
    addVideoStream(video, stream) {
        video.srcObject = stream
        video.addEventListener('loadedmetadata', () => {
            video.play()
        })
        this.videoList.push(video)
    }
 },
}

标签： javascriptvue.js

解决方案

该{{ }}符号接受您放入的任何内容，将其评估为 JavaScript 表达式并将结果显示为字符串。

这意味着如果您<video>在控制器中创建元素并将它们放置在胡须之间的模板中，您将获得：[object HTMLVideoElement].

首先，您不应该在控制器内创建 DOM 元素。让 Vue 为您渲染并通过$refs使用创建的 DOM 元素。

在我提供一个实际示例之前，您需要使用有关触发<video>元素生成的更多信息来更新您的问题。理想情况下，你应该把它变成一个可运行的片段。

原则上，您videoList应该是一个对象数组，其中包含<video>元素运行所需的数据（不是实际的 DOM<video>元素）。一旦将一个这样的对象推送到数组中，<video>如果您使用以下内容，Vue 将为它呈现一个标签：

<video v-for="(video,index) in videoList" :key="index" ref="videos" />

在您的addVideoStream方法中，您将一个对象推送到videoList数组中，并且在$nextTick()包装器内（以允许 Vue 有时间生成<video>标签），您将能够<video>使用this.$refs.videos[n]（基于 0）定位标签并与之交互（添加侦听器，更改属性，播放，暂停等...）。

简而言之，这应该有效：

methods: {
  connectToNewUser(userId, stream) {
    const call = myPeer.call(userId, stream);
    call.on('stream', uStream => this.addVideoStream(uStream));
  },
  addVideoStream(stream) {
    this.videoList.push({});
    this.$nextTick().then(() => {
      const video = this.$refs.videos[this.videoList.length - 1];
      if (!video) return;
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      })
    })
  }
}

如果它不起作用，您可能想提供一个最小的可运行示例，以便我可以亲自测试它，看看有什么问题。

推荐阅读