如何用 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');

else下不行

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

Answer 2

我想你只需要这个：

document.getElementById("myImg").src = //whatever

Answer 3

您可以使用此代码：

document.getElementById("image").src="/PATH/To/Image/file.jpg";

Answer 4

您可以尝试创建图像位置数组。

var imageArray = new Array();

imageArray[0]= {
 image01: new Image(),
 image01.src: "my-image-01.png",
 imageCaption: "An image caption"
};

然后在下一个时间间隔将图像属性设置为数组中图片的 src 或附加整个图像。

if(time > 90 && time <= 100 && !added){
        div.appendChild(img);
        added = true;

        img.setAttribute("src",imageArray[0].src);

        img.style.width = '100%';
        img.style.height = 'auto';

希望对您有所帮助。我使用了其他堆栈溢出问题和答案的一些帮助： Creating an array of image objects

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

How to change image src in a div with javascript?

html

javascript

css

video.js