Dynamically created <video> element - Autoplay not working

Question

I'm trying to dynamically create a element for a Web-RTC application and I'm having trouble with the video playing after being created. My app works correctly with a static video element so I'm pretty sure there is something wrong with the way I'm adding it.

This is the code used to create the element

 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!');
}

After this code is executed, I can see that the video element has been created in the HTML by inspecting the page in Chrome

<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>

At this point, I can see what appears to be a frozen video element on my screen, which leads me to believe the video is not set to play.

Any thoughts would be appreciated. Thanks!

Answer 1

remoteVideo.autoPlay should be remoteVideo.autoplay - it is case sensitive.