javascript - 如何在 jQuery 上下文中使用视频 DOM 方法 load()

Question

我正在尝试使用 https://www.w3schools.com/tags/av_met_load.asp

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

我得到 jQuery.fn.load() is deprecated

另外，这个 vanilla JS 可以工作:

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

这是 HTML 上下文

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

什么是正确的方法？谢谢!

整个脚本是这样的:

$(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();
    });
});

这是包含解决方案的代码片段。

$('#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>

Answer 1

尝试使用这段代码，

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