Загрузка видео по требованию

197

12 февраля 2019, 21:50

Мне необходимо начинать загрузку видео с сервера на странице после того как пользователь доскролит до этого места. Видео на страницу вставляются форычем . Через тег video

<?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;?>

Не могу представить как начинать загрузку видео с сервера после скрола до определнного места. Есть идеи ? Предложения ?

Answer 1

Вот так:

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)

Всегда открыты для предложений рефакторинга кода :)

Файл video.php:

<?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:

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>

Структура базы данных: