Abspielen / Anhalten von HTML 5-Videos mit JQuery

So habe ich es geschafft, dass es funktioniert:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

Alle meine HTML5-Tags haben die Klasse 'myHTMLvideo'

Du kannst tun

$('video').trigger('play');
$('video').trigger('pause');

Warum müssen Sie jQuery verwenden? Ihre vorgeschlagene Lösung funktioniert und ist wahrscheinlich schneller als das Erstellen eines jQuery-Objekts.

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

Beim Pausieren mehrerer Videos habe ich festgestellt, dass dies gut funktioniert:

$("video").each(function(){
    $(this).get(0).pause();
});

Dies kann in eine Klickfunktion umgewandelt werden, was sehr praktisch ist.

Als Erweiterung der Antwort von Lonesomeday können Sie auch verwenden

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

Beachten Sie, dass die Funktion get () oder eq () jQuery nicht aufgerufen wird. Das Array von DOM, mit dem die Funktion play () aufgerufen wird. Es ist eine Abkürzung, die man sich merken sollte.

Ich mag dieses:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

Ich hoffe es hilft.

Ich verwende FancyBox in jQuery, um ein Video einzubetten. Gib ihm einen Ausweis.

Vielleicht könnte nicht die BESTE Lösung die Wiedergabe/Pause anders umschalten - aber für mich ist es einfach und ES FUNKTIONIERT! :)

In dem

`

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById('current_video_playing').value

    if (e.which == 32) {

        if (document.getElementById('current_video_status').value == 'playing') {

            document.getElementById(theVideo).pause();

            document.getElementById('current_video_status').value = 'paused'

        } else {

            document.getElementById('current_video_status').value = 'playing'

            document.getElementById(theVideo).play();

        }

    }

});

</script>`

Dies ist die einfache Methode, die wir anwenden können

auf die Schaltfläche klicken Funktion

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

Vielen Dank

Stellen Sie lediglich als Hinweis sicher, dass der Browser die Videofunktion unterstützt, bevor Sie versuchen, sie aufzurufen:

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

Dadurch werden JavaScript-Fehler in Browsern verhindert, die das Video-Tag nicht unterstützen.

Durch JQuery mit Selektoren

$("video_selector").trigger('play');  
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');

Durch Javascript mit ID

video_ID.play();  video_ID.pause();

OR

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();

    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>

<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> 

Ich habe es auch so gemacht:

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

benutze das .. $('#video1').attr({'autoplay':'true'});

@loneSomeday hat es wunderschön erklärt, hier eine Lösung, die Ihnen vielleicht auch eine gute Idee gibt, wie Sie die Wiedergabe-/Pausenfunktion erreichen können

Wiedergabe/Pause des Videos bei Klick