HTML 5-Video mit JQuery abspielen / anhalten

Ich versuche, HTML5-Videos mit JQuery zu steuern. Ich habe zwei Clips in einer Oberfläche mit Registerkarten, es gibt insgesamt sechs Registerkarten, die anderen haben nur Bilder. Ich versuche, die Videoclips abzuspielen, wenn auf die Registerkarte geklickt wird, und dann anzuhalten, wenn auf eine der anderen geklickt wird.

Dies muss eine einfache Sache sein, aber ich kann es nicht zum Laufen bringen. Der Code, den ich zum Abspielen des Videos verwende, lautet:

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

Ich habe gelesen, dass das Videoelement in einer Funktion belichtet werden muss, um es steuern zu können, aber kein Beispiel finden kann. Ich kann es mit JS zum Laufen bringen:

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

Jeder Rat wäre toll. Vielen Dank

Ihre Lösung zeigt das Problem hier - playist keine jQuery-Funktion, sondern eine Funktion des DOM-Elements. Sie müssen es daher für das DOM-Element aufrufen. Sie geben ein Beispiel dafür, wie dies mit den nativen DOM-Funktionen gemacht wird. Das jQuery-Äquivalent - wenn Sie dies tun möchten, um es in eine vorhandene jQuery-Auswahl einzufügen - wäre $('#videoId').get(0).play(). ( getRuft das native DOM-Element aus der jQuery-Auswahl ab.)

So habe ich es geschafft:

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 Anhalten mehrerer Videos habe ich festgestellt, dass dies gut funktioniert:

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

Dies kann in eine Klickfunktion gebracht werden, die sehr praktisch ist.

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

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

Beachten Sie, dass keine jQuery-Funktion get () oder eq () aufgerufen wird. Das Array von DOM dient zum Aufrufen der Funktion play (). Es ist eine Abkürzung zu beachten.

Ich mag dieses:

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

Ich hoffe es hilft.

Ich benutze FancyBox und jQuery, um ein Video einzubetten. Gib ihm einen Ausweis.

Vielleicht könnte nicht die BESTE Lösung das Abspielen / Anhalten anders umschalten - aber einfach für mich 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 sind die einfachen Methoden, die wir verwenden können

Klicken Sie auf die Schaltfläche jquery

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

Vielen Dank

Stellen Sie als Hinweis sicher, dass Sie überprüfen, ob 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.

Von 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');

Mit Javascript unter Verwendung der ID

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

ODER

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

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

Ich habe es auch so gemacht:

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

@loneSomeday hat es wunderschön erklärt, hier eine Lösung, die Ihnen auch eine gute Vorstellung davon geben kann, wie Sie die Wiedergabe- / Pausenfunktionalität erreichen können

Wiedergabe / Pause des Videos beim Klicken

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

    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>