使用 VueJS 设置 srcObject 的替代方法

Question

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

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

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

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

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

不支持“text/html”的 HTTP“Content-Type”。媒体资源http://localhost:8080/[object%20MediaStream] 加载失败。

当我执行以下操作时：

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

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

srcObject设置src属性和设置属性有区别吗？我以为当我设置srcObjectvideo 元素时会有一个src属性，但它没有。

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

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

Answer 1

srcObject 是修饰符而不是 html 属性，因此您需要编写

<video :srcObject.prop="myStreamSrc" autoplay/>

有关2019 年更新，请参阅Priansh Shah 的回答。

Answer 2

发布适用于较新版本 Vue 的更新解决方案，以防有人遇到此问题并遇到与我相同的错误。

2019 年更新：

<video :src-object.prop.camel="stream">

第一个变化是绑定到srcObject使用 v-bind，这是一个速记示例：

<video :srcObject.prop="stream">

但是srcObject是驼峰式的，所以在 HTML 中它只是变成srcobject（小写），这被认为是不同的属性，因此不会触发视频。

如果您使用的是 Vue < 2.1，则必须使用document.getXXXXX(...).srcObject = stream.

但是，如果您使用的是 Vue v2.1+，那么您很幸运，因为现在也有一个 API 修饰符：

<video :src-object.prop.camel="stream">

.camel将kebab-case转换为camel case，所以为了得到srcObject我们做相反的事情并得到src-object.camel. 结合它.prop和v-bind我们得到上面的语法。

Answer 3

你有没有尝试过

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

否则我建议您为这种情况编写一个组件：

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，直到加载正确的视频源。在这种情况下，您可以等到源目标设置好，然后以工作方式执行。

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

提示：当您设置html-element 而不是时，您可以使用$refs.myVideoEl而不是。这只是一种味道。document.querySelector('#myVideoEl')ref="myVideoEl"id="myVideoEl"

PS：我直接在stackoverflow中编写了代码，没有使用拼写检查器......