html - How to change image src in a div with javascript? - Stack Overflow

admin管理员组

文章数量:1287791

I am using videojs to build a website to play videos and insert some images to the page at certain time point of the video being played. I used the code below to get the current time and insert an image in "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>

What if I want to show another image on the page when the time changes to, say, the 90th second? Or is there any way to delete the image on the page using javascript? Thanks!

To be clear, I have tried to put

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

under else, it doesn't work

I am using videojs to build a website to play videos and insert some images to the page at certain time point of the video being played. I used the code below to get the current time and insert an image in "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>

What if I want to show another image on the page when the time changes to, say, the 90th second? Or is there any way to delete the image on the page using javascript? Thanks!

To be clear, I have tried to put

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

under else, it doesn't work

• javascript
• html
• css
• video.js

Share Improve this question Follow edited Aug 21, 2015 at 15:08 Demonedge asked Aug 21, 2015 at 14:01 DemonedgeDemonedge 1,42344 gold badges2121 silver badges3535 bronze badges 7

• 4 Then just do another img.src = 'url' when time is 90 – Patrick Evans Commented Aug 21, 2015 at 14:04
• possible duplicate of Programmatically change the src of an img tag – Maytham Fahmi Commented Aug 21, 2015 at 14:09
• Just a style note: It is generally remended that only constructor functions be named starting with a capital letter. – BCDeWitt Commented Aug 21, 2015 at 14:10
• What's up with using a path on your filesystem ("/Applications/MAMP/htdocs/shqc.jpg") as your image src? Are you not serving this off of a local server? – Josiah Keller Commented Aug 21, 2015 at 14:16
• no, another img.src = 'url' doesn't work – Demonedge Commented Aug 21, 2015 at 15:09

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 5

You can set an id to the img element when you create it, (In case if you have multiple img tags inside the document)

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

Then, check whether time equals 90 the same way you check whether it is between 30 and 40 and change the src of it like below.

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

You can use this code:

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

I think all you need is this:

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

You could try creating and array of images locations.

var imageArray = new Array();

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

Then at the next interval just set the image attribute to the src of a picture in the array or just append the whole image.

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

Hope that helps. I used a little help from this other stack overflow question and answer: Creating an array of image objects

本文标签： htmlHow to change image src in a div with javascriptStack Overflow