Question

我有两个视频，一个较小的视频和一个较大的视频，我想根据经过的时间更改屏幕上较小视频的位置。第二个更大的视频将保持不动。

例如，我想要完成以下工作：在视频中经过0-5秒后，将较小的视频放在大视频的右下角（重叠）。在5-10秒后，将其移动到较大视频的右上角。在10-15秒，将其移动到更大的视频等的中心

目前，视频根本没有移动。我不知道如何按照我想要的方式移动它。代码如下：

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>
    <style>
    </style>
</head>
<body>
    <div>
        <video class="video" id="v1" width="700" height="700" autoplay>
            <source src="mov_aaa.mp4" type="video/mp4">
        </video>
    </div>
    <div id="d2">
        <video class="video" id="v2" width="400" height="400" autoplay>
            <source src="mov_bbb.mp4" type="video/mp4">         
        </video> 
    </div>

    <script>
    var myVid = document.getElementById("v2");
    var myDiv = document.getElementById("d2");

    function myFunc() {
        var timeAt = myVid.currentTime;  
        if (timeAt > 5 && timeAt <= 30) {
            myDiv.style.left = "50px";
            myDiv.style.top = "50px";
        } else if (timeAt > 30 && timeAt <= 60){
            myDiv.style.left = "150px";
            myDiv.style.top = "150px";
        } else if (timeAt > 60 && timeAt <= 90){
            myDiv.style.left = "250px";
            myDiv.style.top = "250px";
        }
    }

    myVid.addEventListener("timeupdate", myFunc);
    </script>
</body>
</html>

感谢您的帮助。

根据视频时间将浏览器窗口上的视频移至不同位置

0 个答案: