使用VueJS设置srcObject的替代方法 [英] Alternative for setting the srcObject using VueJS

问题描述

设置html视频元素的src属性不适用于Vue.js和Vuex：

Setting the "src" attribute of the html video element does not work with Vue.js and Vuex:

<video id="myVideoEl" :src="myStreamSrc" autoplay="autoplay">

myStreamSrc 是一个计算值并设置在事件处理程序的变异中：

myStreamSrc is a computed value and is set in a mutation by an event handler:

AddStream: function (state, plMyStream) {
  state.myRTCPeerConnection.addStream(plMyStream)
  state.myStreamSrc = plMyStream
}

当我运行我的时候使用该代码的应用程序，我收到以下错误：

When I run my application with that code, I get the following error:

不支持text / html的HTTPContent-Type。加载媒体
资源 http：// localhost：8080 / [object％20MediaStream] 失败。

当我执行以下操作时：

state.myVideoEl = document.querySelector('#myVideoEl')
state.myVideoEl.srcObject = payloadWithMyStream

我没有收到任何错误，显示了流。问题是，我不能使用剪切的工作代码，因为引用的元素稍后会添加到DOM中。当我使用 v-if Vuex.js属性绑定div中的html视频元素时，此代码段不起作用。然后我得到未定义作为结果（因为页面加载时视频元素的div元素不存在）。

I do not get any error and the stream is shown. The problem is, I can not use the working code snipped because the referenced elements are added later to the DOM. This code snippet does not work when I bind the html video element in a div with a v-if Vuex.js attribute. Then I just get "undefined" as a result (because the div element with the video element did not exist on page load).

设置<之间是否有区别code> srcObject 并设置 src 属性？我认为当我设置 srcObject 时，视频元素将具有 src 属性，但它没有。

Is there a difference between setting the srcObject and setting the src attribute? I thought that when I set srcObject the video element will have a src attribute, but it does not.

是否可以在视频html属性中设置 srcObject ？

Is it possible to set the srcObject in the video html attribute?

欲了解更多信息，请访问我在Vue.js论坛上的theard：
https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13

For more info, please visit my theard in the Vue.js forum: https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13

推荐答案

你试过吗

<video v-if="myStreamSrc" id="myVideoEl" :srcObject ="myStreamSrc" autoplay="autoplay"> ?

否则我建议您为该案例编写一个组件：

Otherwise i would recommend you to write a component for that case:

var videoComponent = {
  template: '<video ref="myVideoEl" :srcObject ="myStreamSrc" autoplay="autoplay">'
  props: ['myStreamSrc']
}
Vue.component("video-component", videoComponent)

在父模板中

<video-component v-if="myStreamSrc" :myStreamSrc="myStreamSrc"></video-component>

或者在父级中，您可以为srcObject设置一个观察者，我假设它等于false直到加载正确的视频源。在这种情况下，您可以等到设定源目标，然后以工作方式进行。

OR in the parent you can just put a watcher for the srcObject which i assume to be equal to false until the correct video source gets loaded. In this case you can wait till the source target is set and then do it in the working way.

...
watchers:{
    myStreamSrc: function (newValue, oldValue) {
      if(!oldValue && !!newValue){
        this.nextTick(function () {
          state.myVideoEl = document.querySelector('#myVideoEl')
          state.myVideoEl.srcObject = payloadWithMyStream
        })
      }
  }
}

提示：
您可以使用 $ refs.myVideoEl 而不是 document.querySelector（'＃myVideoEl'）当您将 ref =myVideoEl设置为html-时元素而不是 id =myVideoEl。这只是一种品味。

Hint: You can use $refs.myVideoEl instead of document.querySelector('#myVideoEl') when you set ref="myVideoEl" to the html-element instead of id="myVideoEl". This is just a sort of taste.

PS：我在没有拼写检查器的情况下直接在stackoverflow中编写代码......

PS: I wrote the code in stackoverflow directly without an spellchecker...

这篇关于使用VueJS设置srcObject的替代方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！