动态创建<video>元素 - 自动播放无法正常工作</video>

时间:2014-04-12 20:38:45

标签: javascript jquery html html5 webrtc

我尝试为Web-RTC应用程序动态创建元素,并且在创建后播放视频时遇到问题。我的应用程序可以正常使用静态视频元素,所以我很确定我添加它的方式有问题。

这是用于创建元素的代码

 function handleRemoteStreamAdded(event) {
    console.log('Remote stream added.');
    //remoteVideo.src = window.URL.createObjectURL(event.stream);
    console.log('Dynamically creating video');
    var remoteVideo = document.createElement("video");
    remoteVideo.autoPlay = true;
    remoteVideo.src = window.URL.createObjectURL(event.stream);
    remoteStream = event.stream;
    $('#videos').append(remoteVideo);
    console.log('Creation complete!');
}

执行此代码后,我可以看到通过检查Chrome中的页面在HTML中创建了视频元素

<div id="videos">        
    <video id="localVideo" autoplay="" muted="" src="blob:http%3A//localhost/87efdb40-e69d-4455-903a-308d217e73aa"></video>
    <video src="blob:http%3A//localhost/090f0ef2-5b17-44dd-9d54-411a3a893137"></video></div>
</div>

此时,我可以在屏幕上看到看似冻结的视频元素,这让我相信视频未设置为播放。

任何想法都将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:3)

remoteVideo.autoPlay应为remoteVideo.autoplay - 区分大小写。