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元素，因为它有父元素（imageContext），你可以这样做，
var el = document.getElementById('myImg');
el.parentNode.removeChild(el);

Answer 2

您可以使用此代码：

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

Answer 3

我认为你需要的只是：

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

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？

4 个答案: