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 Antworten
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
imglöschen möchten, da es ein übergeordnetes Element hat (imageContext), Sie können dies tun,var el = document.getElementById('myImg'); el.parentNode.removeChild(el);
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
Sie können diesen Code verwenden:
document.getElementById("image").src="/PATH/To/Image/file.jpg";
Ich denke, alles was Sie brauchen ist Folgendes:
document.getElementById("myImg").src = //whatever