HTML 5-Video mit JQuery abspielen / anhalten

206

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

Barny83
quelle

Antworten:

356

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

einsamer Tag
quelle
5
Das ist großartig, funktioniert perfekt, danke in der Tat. Gut, das DOM auch besser zu verstehen.
Barny83
1
Die Verwendung von JQuery zur Steuerung von Videos auf diese Weise scheint Probleme bei der Wiedergabe auf dem iPhone zu verursachen. Ich habe das Videoelement in einer Registerkarte, die Abfrage zeigt dies, aber wenn Sie dann auf den Videostartpfeil klicken, wird der Clip nicht gestartet. Wenn ich die Zeile $ ('# videoId'). Get (0) .play () entferne, gibt es kein Problem. Was ist der beste Weg, um dies zu umgehen? Ich dachte, ich könnte das js mit einer bedingten Anweisung für iOS entfernen - das Video wird für iOS-Geräte sowieso nicht automatisch gestartet, würde dies gerne tun - oder gibt es eine einfachere Lösung? Jede Hilfe sehr geschätzt.
Barny83
Wie kann ich dafür sorgen, dass alle <video> -Elemente auf einer Seite angehalten werden?
Prismspecs
5
@russellsayshi - nein, das wird nur EIN Video abspielen; prismspecs fragte nach ALLEN Videos. Richtige Syntax: $('video').each(this.play());um alle zu spielen; $('video').each(this.pause());alles pausieren. each()ist eine jQuery-Funktion, an die eine Javascript-Funktion übergeben wird, die auf jedes Element angewendet wird. Stellt dieses Element dar, thiswenn jedes Element behandelt wird .
ToolmakerSteve
11
Wenn nur das erste Element mag, kann durch den Austausch vereinfachen .get(0)mit [0]. Also $('video')[0].play();oder für eine bestimmte ID $('#videoId')[0].play();.
ToolmakerSteve
56

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

Miguel Tavares
quelle
7
Beachten Sie, dass Sie jQuery nicht umbrechen müssen, damit Sie diesen Overhead sparen können, indem Sie die ternäre Zeile durch folgende ersetzen:this.paused ? this.play() : this.pause();
Pete Watts
56

Du kannst tun

$('video').trigger('play');
$('video').trigger('pause');
Wunder
quelle
2
Sie können sogar umschalten: $ ('Video'). Trigger ($ ('Video'). Prop ('pausiert')? 'Play': 'pause');
Darío Pm
21

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();
Sudo Arbeit
quelle
Schauen Sie sich die Lösung von lonesomeday an, wenn Sie auf einer jQuery-Implementierung bestehen (auch um zu erklären, warum Sie nicht einfach playein jQuery-Objekt aufrufen können ).
Sudo Arbeit
Ich dachte, ich würde den Code in anderen jQuery verwenden und werde dies wahrscheinlich tun, aber so wie es aussieht, verwende ich nur diese Zeile, also denke ich, dass dies mit dem Code hätte geschehen können, den ich hatte ... auch ich war mir nicht sicher wenn das eine gute Praxis wäre, um zu mischen. Trotzdem danke für den Rat.
Barny83
2
Wenn Sie bereits ein jQuery-Objekt für movie1durch $('movie1')für andere jQuery-Aktionen instanziiert haben , ist dies in Ordnung. Wenn Sie dies jedoch nur an diesem einen Ort tun, werden Sie einen Leistungsverlust feststellen. Es mag nicht auffällig genug sein, aber ich mag es sehr zu optimieren.
Sudo Arbeit
@sudowork - im Ernst? Sie sprechen über Leistungsverlust beim Starten eines Videos? Wenn Ihr Gerät schnell genug ist, um Videos abzuspielen, ist es schnell genug, um eine Reihe von jQuery-Aktionen auszuführen, ohne dass der Benutzer dies bemerkt.
ToolmakerSteve
19

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.

Josh Holmes
quelle
4
Sie können das Gleiche wie folgt tun: $ ("video"). Each (function () {this.pause ()});
Marcel M.
1
$ (this) -> Sie erstellen ein Abfrageobjekt aus "diesem" Objekt. get (0) -> Sie erhalten das ursprüngliche "this" -Objekt von jquery object zurück ... this === $ (this) .get (0)
Blackfire
14

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.

Ozanmuyes
quelle
12

Ich mag dieses:

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

Ich hoffe es hilft.


quelle
4

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>`
Alexander W.
quelle
3

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

subindas pm
quelle
1

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.

Alex W.
quelle
1

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();
Riyaz Hameed
quelle
0

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

Antares500
quelle
2
"Ich versuche, die Videoclips abzuspielen, wenn auf die Registerkarte geklickt wird" - daher ist eine ereignisgesteuerte Behandlung erforderlich.
Davidenke
0

Ich habe es auch so gemacht:

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

@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

sheelpriy
quelle
0
<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> 
Anusuya
quelle
Bitte fügen Sie eine Erklärung zu Ihrer Antwort hinzu
Sahil Mittal
0
    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>
KEERTHAN SHETTY
quelle
Hallo, willkommen bei Stack Overflow. Wenn Sie eine Frage beantworten, die bereits viele Antworten enthält, geben Sie bitte einen zusätzlichen Einblick, warum die von Ihnen bereitgestellte Antwort inhaltlich ist und nicht nur das wiedergibt, was bereits vom Originalplakat überprüft wurde. Dies ist besonders wichtig bei "Nur-Code" -Antworten wie der von Ihnen angegebenen.
chb
-1

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 
<video id="myVideo" width="320" height="176">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

prajeesh webandcrafts
quelle
Die Lösung in Ihrer Antwort scheint nicht zu funktionieren
Cray