Ich verwende videojs, um eine Website zum Abspielen von Videos zu erstellen und einige Bilder zu einem bestimmten Zeitpunkt des abgespielten Videos auf der Seite einzufügen. Ich habe den folgenden Code verwendet, um die aktuelle Uhrzeit abzurufen und ein Bild in "imageContext" div einzufügen.

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

Was ist, wenn ich ein anderes Bild auf der Seite anzeigen möchte, wenn sich die Zeit beispielsweise auf die 90. Sekunde ändert? Oder gibt es eine Möglichkeit, das Bild auf der Seite mit Javascript zu löschen? Vielen Dank!

Um klar zu sein, habe ich versucht zu setzen

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

Unter sonst funktioniert es nicht

4
Demonedge 21 Aug. 2015 im 17:01

4 Antworten

Beste Antwort

Sie können beim Erstellen ein id auf das img -Element setzen (falls das Dokument mehrere img -Tags enthält).

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

Überprüfen Sie dann, ob die Zeit gleich 90 ist, genauso wie Sie prüfen, ob sie zwischen 30 und 40 liegt, und ändern Sie die src davon wie unten.

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

Für den Fall, dass Sie das Element img löschen möchten, da es ein übergeordnetes Element hat (imageContext), Sie können dies tun,

var el = document.getElementById('myImg');
el.parentNode.removeChild(el);
5
arunatebel 21 Aug. 2015 im 14:14

Sie können versuchen, Bildspeicherorte zu erstellen und anzuordnen.

var imageArray = new Array();

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

Setzen Sie dann im nächsten Intervall einfach das Bildattribut auf den Quellcode eines Bildes im Array oder hängen Sie einfach das gesamte Bild an.

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

Hoffentlich hilft das. Ich habe ein wenig Hilfe von dieser anderen Frage und Antwort zum Stapelüberlauf verwendet: Erstellen eines Arrays von Bildobjekten

0
Community 23 Mai 2017 im 10:26

Sie können diesen Code verwenden:

document.getElementById("image").src="/PATH/To/Image/file.jpg";
1
pguetschow 21 Aug. 2015 im 14:17

Ich denke, alles was Sie brauchen ist Folgendes:

document.getElementById("myImg").src = //whatever
0
Manu 21 Aug. 2015 im 14:09