javascript - 如何使用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

您可以在创建 img 元素时为其设置一个 id，(如果您在文档中有多个 img 标签)

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

然后，检查时间是否等于 90，方法与检查时间是否在 30 和 40 之间相同，并更改 src 如下所示。

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

In case if you want to delete the img element, since it has a parent (imageContext), you can do this,

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