Question

我已经在jQuery中编写了一些行来在mouseover上创建视频元素并将其删除并将其替换为使用的图像创建鼠标悬停

JS档案

        <script>
        $(document).ready(function(){

            var org = $("img.post-featured-image").attr("src");

            $("div.posters").mouseover(function(){
                $("#loader").css("display","block");        
                setTimeout(function(){
                    $("#loader").css("display","none");$(".posters").css("background","none");
                    var src= $("span.vid").attr("data-video");
                    var toast='<video src="/test.MP4" loop autoplay></video>';
                    $("img.post-featured-image").before(toast);
                },5000);
            });
            $("div.posters").mouseout(function(){
                $("video").attr("src","");
                $("video").remove();
                $(".posters").css("background","url:('"+org+"')");
                $("#loader").css("display","none");
            });
            $("video").remove();
            setTimeout(function(){$(".posters").css("background-image",'url("'+org+'")');},3000);

        });
        </script>

HTML

    <div class="posters" style="background:url('http://localhost/testing.jpg');width:640px;height:360px;">
    <a class="responsive-featured-image" href="http://localhost/kawarazaki-ke-no-ichizoku-2-episode-4-hentai-stream-and-download/" title="Kawarazaki-ke no Ichizoku 2 Episode 4" style="height:360px;width:640px;" >
        <div style="padding:24% 46%;">
            <div class="sk-cube-grid" id="loader" style="display:none;">
      <div class="sk-cube sk-cube1"></div>
      <div class="sk-cube sk-cube2"></div>
      <div class="sk-cube sk-cube3"></div>
      <div class="sk-cube sk-cube4"></div>
      <div class="sk-cube sk-cube5"></div>
      <div class="sk-cube sk-cube6"></div>
      <div class="sk-cube sk-cube7"></div
      <div class="sk-cube sk-cube8"></div>
      <div class="sk-cube sk-cube9"></div>
            </div>
                    <img class="post-featured-image" alt=""  itemprop="url" src="http://localhost/wp-content/uploads/2017/07/kawarazaki-ke-no-ichizoku-2-episode-4.jpg" style="display:none;" />
                </a>
        </div>
        <span class="vid" data-video="http://localhost/test.MP4"></span>

仍然无法得到解决方案。我想要这样的东西。首先，图像预加载然后显示主图像。之后在鼠标悬停或鼠标悬停时，它会为视频创建一个简短的预加载器，然后使用自动播放创建视频元素，并在没有控件的情况下循环。一旦鼠标离开div.element，视频就会被销毁代码，主图像会返回。您可以看到缩略图上的视频预览不足。像youtube和所有。简单。

那么代码有什么问题？

jQuery视频鼠标悬停元素

0 个答案: