如何用javascript更改div中的图像src？

Question

我正在使用videojs建立一个网站来播放视频,并在播放视频的特定时间点将一些图像插入到页面中.我使用下面的代码获取当前时间并在"imageContext"div中插入图像.

<script type="text/javascript">
    var myPlayer = document.getElementById("example_video_1");
    var added = false;
    var ShowAds=function(){
        var time = myPlayer.currentTime;
        var img = document.createElement('IMG');
        div = document.getElementById("imageContext");
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.display = 'inline-block';

        if(time > 30 && time <= 40 && !added){
            //img.onload = function(){
            div.appendChild(img);
            added = true;

            img.setAttribute("src",'/Applications/MAMP/htdocs/shqc.jpg');

            img.style.width = '100%';
            img.style.height = 'auto';
        }else if(time > 70){
            //change to another image in the same position
        }

    }
    myPlayer.addEventListener('timeupdate',ShowAds,false);
</script>

如果我想在时间变为第90秒时在页面上显示另一个图像怎么办？或者有没有办法使用javascript删除页面上的图像？谢谢!

要清楚,我试图把

img.setAttribute("src",'/Applications/MAMP/htdocs/yy.jpeg');

在其他情况下,它不起作用

Answer 1

您可以设置id为img元素,当你创建它,(万一如果你有多个img文件内标签)

img.setAttribute('id', 'myImg');

然后,检查时间是否等于90检查它是否在30和之间的相同方式,40并在src下面更改它.

if(time == 90 ){
    document.getElementById("myImg").src="/Applications/MAMP/htdocs/your_image.jpg";
}

如果你想删除img元素,因为它有一个parent(imageContext),你可以这样做,

var el = document.getElementById('myImg');
el.parentNode.removeChild(el);