0

привет есть разметка

  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <video class="video">
            <source src="1.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
          </video>
        </div>
        <div class="col-md-12">
          <button class="play-pause-btn">PLAY</button>
          <button class="stop-btn">STOP</button>
          <progress id="progressBar" min="0" max="100" value="0"></progress>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/userjs.js"></script>
  </body>
</html>

Пытаюсь сделать простой HTML5 плеер с использование не большого количества JS Вот код JS

$(".play-pause-btn").click(function() {
    var media = $(".video");
    if ($(".video").paused) 
    {
        this.innerHTML = "Play";
        media.play();
    }
    else
    {
        this.innerHTML = "Pause";
        $(".video").pause();
    }
});

Проблема в том что видео не воспроизводится.Надпись на кнопке меняется но видео как было так и стоит на месте. Кто нить в курсе в чем прикол.Может не верный метод но в гуголе такие методы говорят использовать.

2
  • делал при нажатии доп переменную var media = $(".video"); и писал media.play(); и делал на прямую $(".video").play(); все одинаково
    – Саске
    27 дек 2016 в 17:28
  • Это ничего не изменит. Смотрите мой ответ
    – Yuri
    27 дек 2016 в 17:38

1 ответ 1

2

Дело в том, что все функции управления плеером - это не функции Jquery, это прямые функции JavaScript. При использовании JS функций к Jquery нужно указывать ID элемента. Надеюсь ты что-то понял :) Короче попробуй вот так:

$(function() {
    $(".play-pause-btn").click(function() {
    var media = $(".video")[0];
    if(media.paused){
        $(this).html('PAUSE');
      media.play();
    }else{
        $(this).html('PLAY');
      media.pause();
    }
    });
});

Вот рабочий пример: jsfiddle-ks7aqd01

3
  • все также осталось(
    – Саске
    27 дек 2016 в 18:08
  • @Санитариум, сейчас проверю, подождите пару минут
    – Yuri
    27 дек 2016 в 18:11
  • @Санитариум, смотрите, я изменил ответ и добавил рабочий пример к ответу
    – Yuri
    27 дек 2016 в 18:25

Ваш ответ

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

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