javascript - Issue with video tag . poster is not visible after video call ends -

initially poster visible before video call start after video call ends able see black background in place of poster in video container.

below html tag have used purpose.

<div id="videosmall">      <video id="videoinput" autoplay width="240px" height="180px" poster="img/webrtc.png"></video> </div> 

i have tried reset "videoinput" div code

var tag = $("#videoinput").clone(); $("#videoinput").replacewith(tag); 

this code works , brings poster image issue when performing video call again without refreshing page .. poster not vanishing in order show video .

you can adding ended eventlistener video element, , call video load() again.

here working example: codepen

html:

<video id="video" width="320" height="240" controls poster="http://www.w3schools.com/images/w3html5.gif">    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">   <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">   browser not support video tag. </video> 

javascript / jquery:

var video= $('#video')[0];  var videonew= $('#video');         videonew.on('ended',function(){     video.load();      });