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

Barny83
źródło

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

samotny dzień
źródło
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”

Miguel Tavares
źródło
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');
cud
źródło
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();
praca sudo
źródło
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.

Josh Holmes
źródło
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ć.

ozanmuyes
źródło
12

Podoba mi się ten:

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

Mam nadzieję, że to pomoże.


źródło
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>`
Alexander W.
źródło
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

subindas pm
źródło
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.

Alex W.
źródło
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();
Riyaz Hameed
źródło
0

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

Antares500
źródło
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();
});
Jasper Chang
źródło
0

@loneSomeday pięknie to wyjaśnił, tutaj jedno rozwiązanie, które może również dać ci dobry pomysł, jak osiągnąć funkcjonalność odtwarzania / pauzy

odtwarzanie / pauza wideo po kliknięciu

Sheelpriy
źródło
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
źródło
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>
KEERTHAN SHETTY
źródło
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> 

prajeesh webandcrafts
źródło
Rozwiązanie w twojej odpowiedzi wydaje się nie działać
Cray