I need to start downloading videos from the server on the page after the user scrolls down to this point. Video on the page are inserted forychem . Through the video tag

<?if($arSection["UF_VIDEOSLIDER"]):?> <section class="main-slider-video"> <?foreach ($arSection["UF_VIDEOSLIDER"] as $videoItem):?> <div class="item video"> <video class="slide-video slide-media" preload="metadata" playsinline autoplay muted loop> <source src="<?=$videoItem["path"]?>" type="video/mp4" /> </video> <h2 class="production-video__title"><?=$videoItem["title"]?></h2> <p class="production-video__note"><?=$videoItem["desc"]?></p> </div> <?endforeach;?> </section> <?endif;?>

I can not imagine how to start downloading video from the server after scrolling to a certain place. Any ideas ? Suggestions ?

  • js-th determine the position of the video element on the page. Then the handler hangs on the page scroll: when the scroll will fall under the position of the video element - launch the video vidEl.play() - carcinogen75
  • at least you need to remove autoplay - Grundy

1 answer 1

Like this:

 var vid = document.getElementById("myVideo"); var body = $("html, body"); $(window).scroll(function(){ var scroll = $(this).scrollTop(); var top_video = $("#myVideo").offset(); if(scroll >= top_video.top){ vid.play(); } }) 
 #myVideo { position: relative; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } .content { position: fixed; bottom: 0; left:0; right:0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; } p{ text-align:center } 
 <!DOCTYPE html> <html> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <body> <p>Листать вниз!</p> <div style="margin-top:2500px"></div> <video muted loop id="myVideo"> <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> </body> </html>

Update 0.0.1 (PHP and Ajax)

Always open to code refactoring suggestions :)

Video.php file:

 <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "test"; $id = ( isset($_POST["id"]) ) ? $_POST["id"] : $id = 1; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT * FROM video WHERE id = ".$id; $result = $conn->query($sql); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo $row["link"]; } } else { echo "0 results"; } $conn->close(); ?>

Index.html file:

 var scrolling = false; var body = $("html, body"); var myVideo1 = $("#myVideo1").offset().top; var myVideo2 = $("#myVideo2").offset().top; var myVideo3 = $("#myVideo3").offset().top; $(window).scroll(function(){ var scroll = $(this).scrollTop(); if(scroll >= myVideo1){ var div_video = $("#myVideo1"); } if(scroll >= myVideo2){ var div_video = $("#myVideo2"); } if(scroll >= myVideo3){ var div_video = $("#myVideo3"); } if (typeof div_video !== "undefined") { if (scroll >= $(div_video[0]).offset().top) { if (!scrolling){ $.ajax({ type: "post", url: "video.php", dataType: "text", data: {id : $(div_video[0]).data("id")}, success: function (response) { $(div_video[0]).html('<source src="'+response+'" type="video/mp4" >'); div_video[0].play(); } }) } scrolling = true; if( scroll >= $(div_video[0]).offset().top + $(div_video[0]).innerHeight()-100) { scrolling = false; } } } }); 
 *{ margin: 0; padding: 0 } body{ overflow-x: hidden; margin: 0; } .myVideo { position: relative; right: 0; bottom: 0; min-width: 100%; min-height: 100%; border-top: 1px solid red; } .content { position: fixed; bottom: 0; left:0; right:0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; } p{ text-align: center } 
 <!DOCTYPE html> <html> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <body> <p>Листать вниз!</p> <div style="margin-top:2500px"></div> <video loop class="myVideo" data-id="1" id="myVideo1"> Your browser does not support HTML5 video. </video> <video loop class="myVideo" data-id="2" id="myVideo2"> Your browser does not support HTML5 video. </video> <video loop class="myVideo" data-id="3" id="myVideo3"> Your browser does not support HTML5 video. </video> </body> </html>

Database structure:

enter image description here

  • A little bit of that. Suppose I have on page 3 video. When I refresh the page, these videos are immediately downloaded from the server, consuming the traffic. And I need that when I got to the video, it just started loading from the server - Goryyn
  • @Goryyn Won it like, got it. - daniel
  • Updated the answer, when scrolling to a certain block, the video from the database will be friends with the same id as in the data-id attribute, via ajax - Daniel