HTML5 Тег <video> JavaScript

613

29 декабря 2016, 09:33

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

  </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();
    }
});

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

Answer 1

Дело в том, что все функции управления плеером - это не функции 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