как по клику добавить autoplay для тега video?

155

22 февраля 2018, 15:56

Есть блок с тегом видео, в котором через скрипт меняется src.

<div id="videoWRP" class="video-container"> 
 
      <video id="MainFrame" src="video.mp4" preload controls playsinline autobuffer></video> 
      <br> 
      <button class='play'>Play/pause</button> 
 
      <div class="btnWRP"> 
        <button id="btn_1" class="btn">Сценарий 1</button> 
        <button id="btn_2" class="btn">Сценарий 2</button> 
        <button id="btn_3" class="btn">Сценарий 3</button> 
      </div> 
 
    </div>

скрипт подмены src:

$('#btn_1').on('click', function() {
    $('#MainFrame')[0].src= 'video1.mp4';
});
$('#btn_2').on('click', function() {
    $('#MainFrame')[0].src= 'video2.mp4';
});
$('#btn_3').on('click', function() {
    $('#MainFrame')[0].src= 'video3.mp4';
});

Вопрос, как по клику добавить autoplay для тега video?

Answer 1

Ну, для начала просто пропишите в каждой функции для кнопок что-то типа

$('#MainFrame')[0].play();

Чтобы получилось вроде

$('#btn_1').on('click', function() { 
    $('#MainFrame')[0].src= 'video1.mp4'; 
    $('#MainFrame')[0].play(); 
}); 
 
$('#btn_2').on('click', function() { 
    $('#MainFrame')[0].src= 'video2.mp4'; 
    $('#MainFrame')[0].play(); 
}); 
 
$('#btn_3').on('click', function() { 
    $('#MainFrame')[0].src= 'video3.mp4'; 
    $('#MainFrame')[0].play(); 
});

Но, Вам надо будет доработать кнопку "Play/Pause" Дальше гуглите "работа с аудио и видеопотоками javascript"

Answer 2

Так после выбора сценария будет навешиваться атрибут autoplay на видео, не могу правда понять какая польза в такой задаче.

$('#btn_1').on('click', function() { 
  $('#MainFrame')[0].src = 'video1.mp4'; 
}); 
 
$('#btn_2').on('click', function() { 
  $('#MainFrame')[0].src = 'video2.mp4'; 
}); 
 
$('#btn_3').on('click', function() { 
  $('#MainFrame')[0].src = 'video3.mp4'; 
}); 
$('.btn').click(function() { 
  $('#MainFrame').prop('autoplay', true); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="videoWRP" class="video-container"> 
 
  <video id="MainFrame" src="video.mp4" preload controls playsinline autobuffer></video> 
  <br> 
  <button class='play'>Play/pause</button> 
 
  <div class="btnWRP"> 
    <button id="btn_1" class="btn">Сценарий 1</button> 
    <button id="btn_2" class="btn">Сценарий 2</button> 
    <button id="btn_3" class="btn">Сценарий 3</button> 
  </div> 
 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

прелоадер на аккордион

Есть аккордион внутри которого есть 2 slick slider-а, который инициализируется в момент клика по аккордиону, что занимает определенное время, нужно...

254

javascript