使用srcObject设置VueJS的替代方案
设置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”。媒体资源http://localhost:8080/[object%20MediaStream]加载失败。
当我做以下事情时：
state.myVideoEl = document.querySelector('#myVideoEl')
state.myVideoEl.srcObject = payloadWithMyStream我没有收到任何错误，并显示了流。问题是，我不能使用工作代码片段，因为引用的元素稍后会添加到DOM中。当我用v-if Vuex.js属性将div中的html视频元素绑定时，此代码段不起作用。因此，我只得到“未定义”(因为带有视频元素的div元素在页面加载中不存在)。
设置srcObject和设置src属性有什么区别吗？我认为当我设置srcObject时，视频元素将有一个src属性，但它没有。
是否可以在视频html属性中设置srcObject？
欲了解更多信息，请访问Vue.js论坛的“我的领主”：https://forum.vuejs.org/t/reference-elements-when-they-rendered-with-v-if/16474/13
回答 4
Stack Overflow用户
发布于 2017-08-26 10:57:59
你试过吗
<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
})
}
}
}提示:当您将$refs.myVideoEl设置为html元素而不是id="myVideoEl"时，可以使用ref="myVideoEl"而不是id="myVideoEl"。这只是一种味道。
PS:我在没有拼写检查器的情况下直接用堆栈溢出方式编写了代码.
Stack Overflow用户
发布于 2018-11-29 23:23:15
srcObject是修饰符而不是html属性，因此您需要编写
<video :srcObject.prop="myStreamSrc" autoplay/>有关2019年的更新，请参见Priansh Shah的答复。
Stack Overflow用户
发布于 2019-07-19 04:04:21
为更新版本的Vue发布一个更新的解决方案，以防有人遇到这种情况，并遇到与我相同的错误。
更新Vue 3：
在模板文件中，可以直接使用:srcObject.prop。有关常规HTML文件，请参见下面！
2019年最新情况：
<video :src-object.prop.camel="stream">第一个更改是使用v绑定到srcObject，下面是一个简短的示例：
<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把烤箱转换成骆驼箱，所以为了得到srcObject，我们做了相反的操作，得到了src-object.camel.结合.prop和v-bind，我们得到了上述语法。
https://stackoverflow.com/questions/45888111
复制相似问题
腾讯云开发者
