javascript - 使用 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
}

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

HTTP “Content-Type” of “text/html” is not supported. Load of media resource http://localhost:8080/[object%20MediaStream] failed.

当我执行以下操作时:

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

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

设置 srcObject 和设置 src 属性有区别吗？我以为当我设置 srcObject 时，video 元素将具有 src 属性，但它没有。

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

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

Answer 1

srcObject 是修饰符，不是 html 属性，所以你需要这样写

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

参见 Priansh Shah 的回答2019 年更新。