Блог

Главная - Вопросы по программированию - Как прекратить воспроизведение видео, когда пользователь нажимает на другой элемент в javascript

Как прекратить воспроизведение видео, когда пользователь нажимает на другой элемент в javascript

#javascript #html #jquery #css

Вопрос:

На одной странице моего сайта есть 3 (li.tab-btn). А класс (li.tab-содержимое) отображает содержимое (li.tab-btn), которым является фильм. Я хочу остановить отображение видео одновременно с удалением этого события из класса (li.tab — btn) (.active) и щелчком по предыдущему или следующему (li.tab — btn).

Я хочу, чтобы, когда (li.tab — btn) прошел (активный) класс, показывалось только соответствующее видео, а остальные видео были приостановлены

Пожалуйста, помогите мне выполнить эту работу. Если у вас есть предложения по решению этой проблемы, спасибо, что дали мне знать. Заранее благодарю вас за сотрудничество.

 function tabs(evt, videoName) {
   var tabContent = document.getElementsByClassName("tab-content");
   var tabBtn = document.getElementsByClassName("tab-btn");
   var i;
   for (i = 0; i < tabContent.length; i  ) {
        tabContent[i].style.display = "none";
   }
   for (i = 0; i < tabBtn.length; i  ) {
        tabBtn[i].className = tabBtn[i].className.replace(" active", "");
    }
    document.getElementById(videoName).style.display = "block";
        evt.currentTarget.className  = " active";
    }
        
        
        
        
 //this code pause all the videos except the current
window.addEventListener('load', function(event){
   document.querySelectorAll(".inlineVideo").forEach((el) => {
       el.onplay = function(e){
          document.querySelectorAll(".inlineVideo").forEach((el1) => {
            if(el === el1)
               el1.play();
            else
                el1.pause();
             });
         }
    });
}); 
 .film--desktop .film--image{
    border:2px solid red;
}

.film--desktop ul.film--cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row: auto;
    list-style: none;
}
.film--desktop ul.film--cards li{
border:2px solid blue;
text-align: center;
}

.film--desktop .film--show--inner{
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.film--desktop .tab-content{
    display: none;
}

.film--desktop .tab-content .video{
    margin-bottom: 24px;
} 
 <div class="film--desktop">
     <div class="film--image">
          <ul class="film--cards">
              <li class="film--card tab-btn" onclick="tabs(event,'item-1')">
                   <div class="film--card--image"  style="background-image: url(img/GoodSpace_Stories_Brian-Greg_Draft03.Still005.jpg);">
                         <div class="film--card--overlay">
                              <h4>G amp; B</h4>
                              <img src="img/icons/arrow-graphic.png" alt="">
                         </div>
                     </div>
                </li>
                <li class="film--card tab-btn" onclick="tabs(event,'item-2')">
                    <div class="film--card--image"  style="background-image: url(img/GoodSpace_Stories_Margaret_Draft03.Still004.jpg);">
                          <div class="film--card--overlay">
                               <h4>M amp; D</h4>
                                <img src="img/icons/arrow-graphic.png" alt="">
                           </div>                                
                      </div>
                  </li>
                  <li class="film--card tab-btn" onclick="tabs(event,'item-3')">
                       <div class="film--card--image"  style="background-image: url(img/GoodSpace_Stories_Kar-Lai-Terry_Draft04_Still007.jpg);">
                            <div class="film--card--overlay">
                                 <h4>K amp; T</h4>
                                 <img src="img/icons/arrow-graphic.png" alt="">
                             </div>
                         </div>
                    </li>                    
               </ul>                    
          </div>

                <div class="film--show setting">
                    <div class="film--show--inner content">
                        <div id="item-1" class="tab-content">
                            <div class="video">
                                <video class="inlineVideo" width="100%" height="auto" controls>
                                    <source src="video/GoodSpace_Stories_Brian-Greg_Low-1.mov" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>                            
                        </div>

                        <div id="item-2" class="tab-content">
                            <div class="video">
                                <video class="inlineVideo" width="100%" height="auto" controls >
                                    <source src="video/GoodSpace_Stories_Margaret_Low-1.mov" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>                            
                        </div>

                        <div id="item-3" class="tab-content">
                            <div class="video">
                                <video class="inlineVideo" width="100%" height="auto" controls>
                                    <source src="video/GoodSpace_Stories_Kar-Lai-Terry_Low-1.mov" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>                           
                        </div>
                    </div>
                </div>
            </div>
Метки: ,