Блог

Главная - Вопросы по программированию - Можно ли изменить этот код Youtube для принудительного автозапуска?

Можно ли изменить этот код Youtube для принудительного автозапуска?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Вот карусель Youtube с кодом, который я хочу использовать, но я хочу, чтобы видео автоматически воспроизводились так, как они это делают на Youtube, но в этом примере вы должны щелкнуть по ним. Я уверен, что здесь есть кто-то, кто, вероятно, может это сделать. Многие люди хотят что-то подобное. Я хочу поделиться этим со многими людьми, потому что они сами не знают, как это закодировать.

Вот код

 /*JS FOR SCROLLING THE ROW OF THUMBNAILS*/ 
$(document).ready(function () {
  $('.vid-item').each(function(index){
    $(this).on('click', function(){
      var current_index = index 1;
      $('.vid-item .thumb').removeClass('active');
      $('.vid-item:nth-child(' current_index ') .thumb').addClass('active');
    });
  });
});  
 body {
  			margin: 30px;
  			padding: 0;
  			background: #ddd;
  			font-family: Arial, Helvetica, sans-serif;
  		}

  		.title {
  			width: 100%;
  			max-width: 854px;
  			margin: 0 auto;
  		}

  		.caption {
  			width: 100%;
  			max-width: 854px;
  			margin: 0 auto;
  			padding: 20px 0;
  		}

  		.vid-main-wrapper {
  			width: 100%;
  			max-width: 1100px;
  			min-width: 440px;
  			background: #fff;
  			margin: 0 auto;
  		}


  		/*  VIDEO PLAYER CONTAINER
 		############################### */
  		.vid-container {
		    position: relative;
		    padding-bottom: 52%;
		    padding-top: 30px; 
		    height: 0; 
        width:70%;
        float:left;
		}
		 
		.vid-container iframe,
		.vid-container object,
		.vid-container embed {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    min-height: 360px;
		}


		/*  VIDEOS PLAYLIST 
 		############################### */
		.vid-list-container {
			width: 30%;
      height:360px;
			overflow: hidden;
      float:right;
		}

    .vid-list-container:hover, .vid-list-container:focus {
       overflow-y: auto;
     }

		ol#vid-list {
      margin:0;
      padding:0;
      background: #222;
		}

    ol#vid-list li {
		  list-style: none;
    }

    ol#vid-list li a {
      text-decoration: none;
      background-color: #222;
      height:55px;
      display:block;
      padding:10px;
    }

    ol#vid-list li a:hover {
      background-color:#666666
    }

		.vid-thumb {
      float:left;
			margin-right: 8px;
		}

    .active-vid { 
      background:#3A3A3A;
    }

		#vid-list .desc {
			color: #CACACA;
			font-size: 13px;
			margin-top:5px;
		}


		@media (max-width: 624px) {
			body {
				margin: 15px;
			}
			.caption {
				margin-top: 40px;
			}
			.vid-list-container {
				padding-bottom: 20px;
			}

		}  
 <div class="vid-main-wrapper clearfix">

  		    <!-- THE YOUTUBE PLAYER -->
      <div class="vid-container">
          <iframe id="vid_frame" src="https://www.youtube.com/embed/cOSEOYi9JS4?rel=0amp;showinfo=0amp;autohide=1" frameborder="0" width="560" height="315"></iframe>
      </div>

      <!-- THE PLAYLIST -->
      <div class="vid-list-container">
            <ol id="vid-list">
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/cOSEOYi9JS4?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/cOSEOYi9JS4/default.jpg" /></span>
                  <div class="desc">WeatherBeater™ Product Video</div>
                </a>
              </li>
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/9P7mEf4bilg?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/9P7mEf4bilg/default.jpg" /></span>
                  <div class="desc">X-act Contour® Product Video</div>
                </a>
              </li>
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/KHxNpXovl58?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/KHxNpXovl58/default.jpg" /></span>
                  <div class="desc">GearBox® Product Video</div>
                </a>
              </li>
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/D_a2UBGsePQ?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/D_a2UBGsePQ/default.jpg" /></span>
                  <div class="desc">Mud Guards Product Video</div>
                </a>
              </li>
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/vYoh2IgoBXg?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/vYoh2IgoBXg/default.jpg" /></span>
                  <div class="desc">Wheel Well Guards Product Video</div>
                </a>
              </li>
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/RTHI_uGyfTM?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/RTHI_uGyfTM/default.jpg" /></span>
                  <div class="desc">Cargo Liner Product Video</div>
                </a>
              </li>
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/EvTjAjLNphE?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/EvTjAjLNphE/default.jpg" /></span>
                  <div class="desc">Husky Liners Products</div>
                </a>
              </li>
              <li>
                <a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/-Qpc79oaJQg?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1'">
                  <span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/-Qpc79oaJQg/default.jpg" /></span>
                  <div class="desc">Custom Molded Mud Guards</div>
                </a>
              </li>
              
            </ul>
       </div>

  	
</div>

Ответ №1:

Ваш код содержит lazy load метод, позволяющий избежать ужасающего времени загрузки страницы. Если вы не загружаете видео после того, как DOM было загружено, ваша страница будет загружаться чрезвычайно медленно, поскольку она ожидает загрузки видео. Кроме того, если мобильные пользователи (которые не подключены к Wi-Fi) посещают ваш сайт, они будут использовать довольно много ресурсов своего пакета данных / планов.

При этом ответом было бы заменить ваши img элементы на iframe element. После этого вы можете добавить ?autoplay=1 параметр в конец URL-адреса YouTube. URL-адреса вашего YouTube уже содержат этот параметр, поэтому в идеале вам следует заменить свои a ( anchor ) теги следующим кодом:

 <a href="javascript:void();">
  <iframe id="vid_frame" src="https://youtube.com/embed/vYoh2IgoBXg?autoplay=1amp;rel=0amp;showinfo=0amp;autohide=1" frameborder="0" width="560" height="315"></iframe>
  <div class="desc">Wheel Well Guards Product Video</div>
</a>

Где src property из iframe элемента должны быть заменены на видео YouTube по вашему выбору. Вы также можете изменить свойства height и width .

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

1. Стефан Р. Ну, ваш код запускает автозапуск видео, о чем я и просил, но теперь все они воспроизводятся одновременно. Есть ли способ заставить их автоматически воспроизводиться только по одному за раз и только в том случае, если ни один из них еще не воспроизводится? Пока у вас все отлично получалось, и я ценю, что вы уделили этому свое время.

2. @Superfast Всегда пожалуйста. Я сомневаюсь, что это возможно без appending iframes DOM каждые несколько секунд с помощью setTimeout функции в JavaScript . Однако это означало бы, что видео с YouTube не будут видны до того, как они будут appended загружены на DOM . Для этого вы могли бы использовать часть логики изображений-заполнителей видео YouTube в вашем исходном коде. В конечном итоге это будет означать, что IMG элемент будет заменен iframe элементом через JavaScript

3. Таким образом, тогда возможно, чтобы он функционировал так же, как и на Youtube. Итак, что я понял из того, что вы здесь говорите, так это то, что для каждого видео потребуются два iframe с дополнительным javascript, это правильно? Если это правильно, можете ли вы показать пример того, как это могло бы работать? Я знаю, что прошу многого, но я не могу закодировать что-то подобное, программисты — это другая порода людей, и я не был рожден в этой породе. лол

4. Я немного запутался, чего вы пытаетесь достичь. Взгляните на этот jsFiddle . Единственное, что я изменил на данный момент, это autoplay=1amp;mute=1 параметр в первом видео (строка 5). Если вы нажмете на видео, оно будет автоматически воспроизведено. Или вы хотите, чтобы все миниатюры впоследствии воспроизводились автоматически?

5. @Stefen R: Да, я хочу, чтобы все они впоследствии автоматически воспроизводились, как это делается в примере, расположенном здесь, giorgio003.github.io/Youtube-TV/demos/responsive.html Вот страница с другими демонстрациями проигрывателей в стиле Youtube Carousel github.com/Giorgio003/Youtube-TV#demos Я не могу понять, как перенести код на мою веб-страницу. В его инструкциях, похоже, отсутствует много шагов. Возможно, вам повезет больше, если вы разберетесь, как заставить вещи работать на личной странице.