Question

Why doesn't image show on load, but shows on refresh?

除了多个视频文件外，我的问题与上面的问题类似。在Chrome上，除非刷新后才会显示视频。在Safari上，它们看起来很好。根据另一个答案，我假设这与异步加载的文件有关，并且可以通过在我的jquery中正确使用onload来修复，但我不熟悉如何做到这一点。

HTML

   <html>
    <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/hinukan/style.css">
    </head>
    <body>
        <div id = "container">
            <div id="box1" class = "box">
                <div id="video1" class="video"> <video poster loop muted playsinline controls><source src=assets/portrait.mp4></video></div>
                <div id="text1" class="text"><p>mytext</p></div>
            </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/hinukan/javascript.js"></script>
</html>

JAVASCRIPT

 if ($(".video").css("max-width") == "850px" ){
        $(".box").children(".text").click(function() {
            $(this).toggleClass("ttoggle");
            $(this).siblings(".video").toggleClass("vtoggle");
        });
         $('video').click(function(){
             this[this.paused ? 'play' : 'pause']();
         });
    }
    else {
        $(".box").children(".video").click(function () {
            if (!$(this).hasClass("vtoggle")) {
                $(this).siblings(".text").toggleClass("ttoggle");
                $(this).toggleClass("vtoggle");
            }
        });
        $(".box").children(".text").click(function() {
             if ($(this).hasClass("ttoggle")) {
                $(this).siblings(".video").toggleClass("vtoggle");
                $(this).toggleClass("ttoggle");
             }
        });
        $(".video").hover(function () {
            $(this).siblings(".text").addClass("tselect");
            $(this).children("video")[0].play();
        }, function () {
            var el = $(this).children("video")[0];
            el.pause();
            $(this).siblings(".text").removeClass("tselect");
        });
    }

适用于多个<video>的onload（）

0 个答案: