0

Есть блок с тегом видео, в котором через скрипт меняется 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';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>

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

1
  • По какому клику должен навешиваться автоплей? Когда-то должен сниматься?
    – yolosora
    21 фев 2018 в 17:02

2 ответа 2

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();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>

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

1
  • Пробовал нечто подобное, но коряво - не заработало, поэтому заморочился с autoplay. Ваш вариант хороший.
    – Gargool
    21 фев 2018 в 18:41
1

Так после выбора сценария будет навешиваться атрибут 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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.