Wie Video DOM Methode load() in jQuery Kontext verwenden

Ich versuche https://www.w3schools.com/tags/av_met_load.asp Wie Video DOM Methode load() in jQuery Kontext verwenden

$('.activ').mouseover(function(){ 
    $("#videologo2").load(); 
});

zu verwenden und ich jQuery.fn.load() is deprecated

Auch diese Vanille JS funktioniert:

$('.activ').mouseover(function(){ 
    document.getElementById("videologo2").load(); 
});

Dies ist der HTML-Kontext

<div id="solapa" class="close"> 
    <div class="logo"> 
    <video id="videologo2" autoplay loop muted> 
     <source class="webm_src" src="ruido.webmsd.webm" type="video/webm"> 
     <source class="ogg_src" src="ruido.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"'> 
    </video> 
    </div> 
</div>

Was ist der richtige Weg? Vielen Dank!

Das gesamte Skript ist dies:

$(document).ready(function(){ 
    $('.activ').mouseover(function(){ 
     $(".webm_src").src = mrg_var.templateDirectoryUri+"/dist/images/video/actividades.webmsd.webm"; 
     $(".ogg_src").src = mrg_var.templateDirectoryUri+"/dist/images/video/actividades.oggtheora.ogv"; 
     $("#videologo2").load(); 
    }); 
});

Dies ist die snipet mit der Lösung.

$('#button-1-js').click(function(){ 
 
console.log('button-1-js'); 
 
      document.getElementById("mp4_src").src = "http://stage.margenesdelarte.org/app/themes/mrg/dist/images/video/actividades.mp4.mp4"; 
 
      document.getElementById("webm_src").src = "http://stage.margenesdelarte.org/app/themes/mrg/dist/images/video/actividades.webmsd.webm"; 
 
      document.getElementById("ogg_src").src = "http://stage.margenesdelarte.orgapp/themes/mrg/dist/images/video/actividades.oggtheora.ogv"; 
 
      // document.getElementById("videologo").load(); 
 
      $("#videologo").get(0).load(); 
 
}); 
 

 
$('#button-2-js').click(function(){ 
 
console.log('button-2-js'); 
 
      document.getElementById("mp4_src").src = "http://stage.margenesdelarte.org/app/themes/mrg/dist/images/video/convoca.mp4.mp4"; 
 
      document.getElementById("webm_src").src = "http://stage.margenesdelarte.org/app/themes/mrg/dist/images/video/convoca.webmsd.webm"; 
 
      document.getElementById("ogg_src").src = "http://stage.margenesdelarte.orgapp/themes/mrg/dist/images/video/convoca.oggtheora.ogv"; 
 
      // document.getElementById("videologo").load(); 
 
      $("#videologo").get(0).load(); 
 
});

video { 
 
vertical-align: top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<video id="videologo" autoplay loop muted> 
 
     <source id="mp4_src" src="http://stage.margenesdelarte.org/app/themes/mrg/dist/images/video/ruido.mp4.mp4" type="video/mp4"> 
 
     <source id="webm_src" src="http://stage.margenesdelarte.org/app/themes/mrg/dist/images/video/ruido.webmsd.webm" type="video/webm"> 
 
     <source id="ogg_src" src="http://stage.margenesdelarte.org/app/themes/mrg/dist/images/video/ruido.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"'> 
 
</video> 
 

 
<button id="button-1-js" type="button">Video 1</button> 
 
<button id="button-2-js" type="button">Video 2</button>

Quelle

2017-12-01 aitor

Ihre Ebene JS Beispiel fein gearbeitet haben sollte, wie es die richtige Methode aufrufen (im Gegensatz zu Ihrem jQuery gegenüber, die ein auszulösen versucht 'load' Ereignis auf dem Video). Kannst du mehr darüber erklären, was dieser Code tun soll? Beachten Sie, dass der Aufruf von 'load()' keine Auswirkungen auf die Benutzeroberfläche hat. Eventuell musst du 'play()' danach aufrufen, wenn du das willst –

Ja, danke. Ich versuche, die Videoquelle beim Mouseover eines Elements zu ändern. Ich habe die neuen Quellen der Einfachheit halber weggelassen, aber ich werde die Frage bearbeiten, um alle Skripte einzubinden. – aitor

Nur FYI, @RoryMcCrossan Sie hatten Recht. Plain JS arbeitete. Video ändert sich nicht, aber es liegt an einem anderen Problem, möglicherweise im Zusammenhang mit dem Dateipfad. – aitor

versuchen, diesen Code verwenden,

$('.activ').mouseover(function(){ 
    $("#videologo2").get(0).load(); 
});

Quelle

2017-12-01 11:44:51

Versuchte es, ohne Erfolg. Nichts passiert, wenn ich $ ("# videologo2") aktiviere ("load") – aitor

eigentlich..schnelle Lösung für jetzt können Sie JavaScript statt jquery..document.getElementById ("videologo2") verwenden. Load(); und $ (". webm_src") .attr ('src', 'movie.mp4'); –

Antwort bereits aktualisieren, jquery verwenden, nur ".get (0)" verwenden –

Wie Video DOM Methode load() in jQuery Kontext verwenden

Antwort

Verwandte Themen