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

时间:2017-12-01 10:09:32

标签: javascript jquery html5-video

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

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

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

此外,这个香草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>

1 个答案:

答案 0 :(得分:1)

尝试使用此代码,

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