wake-up-neo.net

Abspielen / Anhalten von HTML 5-Videos mit JQuery

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 wiederzugeben, wenn auf die Registerkarte geklickt wird, und dann anzuhalten, wenn auf eine der anderen geklickt wird.

Dies muss einfach sein, aber ich kann es scheinbar nicht zum Laufen bringen. Der Code, mit dem ich das Video abspiele, 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

187
Barny83

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

327
lonesomeday

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'

53
Miguel Tavares

Du kannst tun

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

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();
20
sudo work

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.

19
Josh Holmes

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.

13
ozanmuyes

Ich mag dieses:

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

Ich hoffe es hilft.

10
user4227915

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>`
4
Alexander W

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

2
subindas pm

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.

1
Alex W

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();
1
user1570636
    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>
0
KEERTHAN K C
<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> 
0
Anusuya

Ich habe es auch so gemacht:

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

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

0
Antares500

@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

0
sheelpriy