Воспроизвести / приостановить видео HTML 5 с помощью JQuery

Question

Я пытаюсь контролировать HTML5-видео с помощью JQuery.У меня есть два клипа в интерфейсе с вкладками, всего шесть вкладок, на других просто есть изображения.Я пытаюсь заставить воспроизводиться видеоклипы при нажатии на их вкладку, а затем останавливаться при нажатии любой из других.

Это должно быть простым делом, но я не могу заставить его работать,код, который я использую для воспроизведения видео:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

Я прочитал, что элемент видео должен быть доступен в функции, чтобы иметь возможность управлять им, но не могу найти пример.Я могу заставить его работать, используя JS:

document.getElementById('movie1').play();

Любой совет будет отличным.Спасибо

Answer 1

Как примечание, убедитесь, что вы проверяете, поддерживает ли браузер функцию видео, прежде чем пытаться вызвать ее:

if($('#movie1')[0].play)
    $('#movie1')[0].play();

Это предотвратит ошибки JavaScript в браузерах, которые не поддерживают тег видео.

Answer 2

    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>

Answer 3

<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById('vid').play(); });
</script> 

Answer 4

@ loneSomeday объяснил это прекрасно, вот одно решение, которое также может дать вам хорошее представление о том, как добиться функциональности воспроизведения / паузы

воспроизведение / пауза видео при нажатии

Answer 5

Я тоже заставил это работать так:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});

Answer 6

используйте это .. $('#video1').attr({'autoplay':'true'});