i have 2 videos, smaller 1 , bigger one, , want change position of smaller video on screen based on time elapsed. second, bigger video stay immobile.
for example, want accomplish along lines of: @ 0-5 seconds elapsed in video, make smaller video located @ lower right corner of big video (overlapping). @ 5-10 seconds elapsed, move upper right corner of bigger video. @ 10-15 seconds, move center of bigger video, etc.
right now, video isn't moving @ all. i'm not sure how make move way want to. code below:
<!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> thanks help.
Comments
Post a Comment