Odtwórz / wstrzymaj wideo HTML 5 za pomocą JQuery


206

Próbuję kontrolować filmy HTML5 za pomocą JQuery. Mam dwa klipy w interfejsie z zakładkami, w sumie jest sześć zakładek, pozostałe mają tylko obrazy. Próbuję sprawić, aby klipy wideo były odtwarzane po kliknięciu ich karty, a następnie zatrzymywały się po kliknięciu dowolnego z pozostałych.

To musi być prosta rzecz, ale wydaje się, że nie mogę jej uruchomić, kod, którego używam do odtwarzania wideo to:

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

Czytałem, że element wideo musi być odsłonięty w funkcji, aby móc go kontrolować, ale nie mogę znaleźć przykładu. Jestem w stanie sprawić, że będzie działać za pomocą JS:

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

Każda rada byłaby świetna. Dzięki

Odpowiedzi:


356

Twoje rozwiązanie pokazuje problem tutaj - playnie jest funkcją jQuery, ale funkcją elementu DOM. Dlatego musisz wywołać go w elemencie DOM. Podajesz przykład, jak to zrobić za pomocą natywnych funkcji DOM. Odpowiednikiem jQuery - jeśli chcesz to zrobić, aby dopasować się do istniejącego wyboru jQuery - będzie $('#videoId').get(0).play(). ( getpobiera natywny element DOM z wyboru jQuery).


5
To świetnie, działa idealnie, naprawdę dzięki. Dobrze też zrozumieć DOM.
Barny83

1
Używanie JQuery do sterowania wideo w ten sposób wydaje się powodować problemy z odtwarzaniem na iPhonie. Mam element wideo na karcie, jquery to ujawnia, ale kliknięcie strzałki rozpoczęcia wideo nie powoduje rozpoczęcia klipu. Kiedy usuwam wiersz $ ('# videoId'). Get (0) .play (), nie ma problemu. Jak najlepiej to obejść? Myślałem, że mogę usunąć plik js z warunkową instrukcją dla systemu iOS - wideo i tak nie uruchomi się automatycznie na urządzeniach z systemem iOS, więc chętnie to zrobię - czy jest prostsze rozwiązanie? Każda pomoc bardzo doceniana.
Barny83

Jak mogę wstrzymać wszystkie elementy <video> na stronie?
prismspecs

5
@russellsayshi - nie, odtwarza tylko JEDEN film; prismspecs poprosił o WSZYSTKIE filmy. Prawidłowa składnia: $('video').each(this.play());grać wszystkie; $('video').each(this.pause());zatrzymać wszystko. each()to funkcja jQuery, do której przekazana jest funkcja javascript, która jest stosowana do każdego elementu. Ponieważ każdy element jest obsługiwany, thisreprezentuje ten element.
ToolmakerSteve

11
Jeśli chcesz tylko pierwszy element, możesz uprościć, zastępując .get(0)go [0]. Tak $('video')[0].play();lub dla konkretnego identyfikatora $('#videoId')[0].play();.
ToolmakerSteve

56

Oto jak udało mi się sprawić, aby działało:

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

Wszystkie moje tagi HTML5 mają klasę „myHTMLvideo”


7
Zauważ, że nie ma potrzeby owijania w jQuery, abyś mógł zaoszczędzić ten narzut, zastępując linię trójskładnikową następującym:this.paused ? this.play() : this.pause();
Pete Watts

56

Możesz to zrobić

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

2
Możesz nawet przełączać: $ („video”). Trigger ($ („video”). Prop („paused”)? ”Play”: „pause”);
Darío Pm

21

Dlaczego musisz korzystać z jQuery? Proponowane rozwiązanie działa i prawdopodobnie jest szybsze niż konstruowanie obiektu jQuery.

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

Sprawdź rozwiązanie samotnego dnia, jeśli nalegasz na implementację jQuery (także dla wyjaśnienia, dlaczego nie możesz po prostu wywołać playobiektu jQuery).
praca sudo

Myślałem, że użyję kodu w innym jQuery i prawdopodobnie to zrobię, ale w tej chwili po prostu używam tego wiersza, więc myślę, że można to zrobić z kodem, który miałem ... także nie byłem pewien gdyby to była dobra praktyka mieszania. W każdym razie dziękuję za radę.
Barny83

2
Jeśli już instancja obiektu jQuery za movie1pośrednictwem $('movie1')innych działań jQuery, to jest w porządku; Jeśli jednak robisz to tylko w tym jednym miejscu, zauważysz pewną utratę wydajności. Może to nie być wystarczająco zauważalne, ale lubię dużo optymalizować.
praca sudo

@sudowork - poważnie? omawiasz spadek wydajności podczas rozpoczynania odtwarzania wideo? Jeśli twoje urządzenie jest wystarczająco szybkie, aby odtwarzać wideo, jest wystarczająco szybkie, aby wykonać całą akcję jQuery bez zauważenia przez użytkownika.
ToolmakerSteve

19

W przypadku wstrzymywania wielu filmów stwierdziłem, że działa to dobrze:

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

Można to włączyć w funkcję kliknięcia, która jest całkiem przydatna.


4
Możesz zrobić to samo: $ („video”). Each (function () {this.pause ()});
Marcel M.

1
$ (this) -> tworzysz obiekt jquery z „tego” obiektu. get (0) -> odzyskujesz oryginalny obiekt „this” z obiektu jquery ... this === $ (this) .get (0)
Blackfire

14

Jako rozszerzenie odpowiedzi samotnego dnia możesz także użyć

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

Zauważ, że nie ma wywołanej funkcji jQuery get () lub eq (). Tablica DOM używana do wywoływania funkcji play (). To skrót, o którym należy pamiętać.


12

Podoba mi się ten:

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

Mam nadzieję, że to pomoże.


4

Używam FancyBox i jQuery do osadzania wideo. Podaj identyfikator.

Być może nie NAJLEPSZE rozwiązanie może przełączać odtwarzanie / pauzę w inny sposób - ale łatwe dla mnie i TO DZIAŁA! :)

w

`

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

3

To proste metody, których możemy użyć

na przycisk kliknięcia jquery

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

Dzięki


1

Dla przypomnienia sprawdź, czy przeglądarka obsługuje funkcję wideo, zanim spróbujesz ją wywołać:

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

Zapobiegnie to błędom JavaScript w przeglądarkach, które nie obsługują tagu wideo.


1

Przez JQuery za pomocą selektorów

$("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');

Przez Javascript przy użyciu identyfikatora

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

LUB

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

0

Użyj tego.. $('#video1').attr({'autoplay':'true'});


2
„Staram się, aby klipy wideo były odtwarzane po kliknięciu ich zakładki” - dlatego potrzebna jest obsługa sterowana zdarzeniami.
davidenke

0

Sprawiłem, że działało to tak:

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


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> 

Proszę dodać wyjaśnienie do swojej odpowiedzi
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>

Cześć, witamy w Stack Overflow. Odpowiadając na pytanie, które ma już wiele odpowiedzi, pamiętaj o dodaniu dodatkowego wyjaśnienia, dlaczego udzielana odpowiedź jest merytoryczna, a nie po prostu odzwierciedleniem tego, co zostało już sprawdzone przez oryginalny plakat. Jest to szczególnie ważne w odpowiedziach „tylko kodowych”, takich jak ta, którą podałeś.
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> 


Rozwiązanie w twojej odpowiedzi wydaje się nie działać
Cray
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.