как изменить фоновое видео в соответствии с условием на веб-странице

#javascript #html #css

#javascript #HTML #css

Вопрос:

ребята, я начал изучать html, css и Java script, но я столкнулся с проблемой, которую я не могу решить, я перепробовал много решений, но ничего не работает, ваша помощь будет оценена html:

 var l;
function timer(){
    var d = new Date();
    var time_hour = d.getHours();
    var time_min = d.getMinutes();
    var time_sec = d.getSeconds();
    l = time_hour;
    document.querySelector("#hour").innerHTML = time_hour   ":";
    document.querySelector("#min").innerHTML = time_min   ":";
    document.querySelector("#sec").innerHTML = time_sec ;
    var t = setTimeout(function(){ timer() }, 500);
    }
function checking(){
    if (l>=0){
            document.querySelector(".video").setAttribute("src","videos/5.mp4");
    }
        } 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Clock</title>
</head>
<body onload="timer(); checking()" > 
    <video autoplay muted loop id="myVideo" >
        <source src="" type="video/mp4" class="video" >
      </video>
    <div class="cont">
        <h2 class="made-by">Made By Muaaz Bin Sarfraz</h2>
    </div>
       <ul class="entry">
           <li id="hour"></li>
           <li id="min"></li>
           <li id="sec"></li>
       </ul>
       
    <script src="script.js"></script>
    
</body>
</html> 

Комментарии:

1. Что вы пробовали? Что в этом плохого? Есть сообщение об ошибке?

2. да, проблема была решена, я не включал тег src внутри тега video, который вызывал проблему

3. Тогда, пожалуйста, добавьте ответ для новичков.

4. да, я опубликовал mate, я немного новичок в мире программирования, поэтому я изучаю использование stackoverflow

Ответ №1:

да, моя проблема решена, я добавлял атрибут src в исходный тег вместо тега video, который вызывал проблему `

 <video autoplay muted loop id="myVideo"  >
        <source type="video/mp4" class="video"  >
      </video> 

 javascript:

    var l;
function timer(){
    var d = new Date();
    var time_hour = d.getHours();
    var time_min = d.getMinutes();
    var time_sec = d.getSeconds();
    l = time_hour;
    document.querySelector("#hour").innerHTML = time_hour   ":";
    document.querySelector("#min").innerHTML = time_min   ":";
    document.querySelector("#sec").innerHTML = time_sec ;
    var t = setTimeout(function(){ timer() }, 500);
    }
function checking(){
    if ((l>=0)amp;amp;(l<=5)){
        document.querySelector("#myVideo").setAttribute("src","videos/5.mp4");
    }
    else if((l>=6)amp;amp;(l<=9)){
        document.querySelector("#myVideo").setAttribute("src","videos/1.mp4");
    }
    else if((l>=9)amp;amp;(l<=12)){
        document.querySelector("#myVideo").setAttribute("src","videos/2.mp4");
    }
    else if((l>=13)amp;amp;(l<=17)){
        document.querySelector("#myVideo").setAttribute("src","videos/3.mp4");
    }
    else if((l>=18)amp;amp;(l<=20)){
        document.querySelector("#myVideo").setAttribute("src","videos/4.mp4");
    }
  else if((l>=21)amp;amp;(l<=23)){
    document.querySelector("#myVideo").setAttribute("src","videos/5.mp4");
}
}