Html 5-video afspelen/pauzeren met JQuery

Ik probeer HTML5-video’s te beheren met JQuery. Ik heb twee clips in een interface met tabbladen, er zijn in totaal zes tabbladen, de andere hebben alleen afbeeldingen. Ik probeer de videoclips af te spelen wanneer op hun tabblad wordt geklikt en vervolgens te stoppen wanneer op een van de andere wordt geklikt.

Dit moet eenvoudig zijn om te doen, maar ik krijg het niet werkend, de code die ik gebruik om de video af te spelen is:

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

Ik heb gelezen dat het video-element in een functie moet worden weergegeven om het te kunnen bedienen, maar kan geen voorbeeld vinden. Ik kan het laten werken met JS:

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

Enig advies zou geweldig zijn. Bedankt

Antwoord 1, autoriteit 100%

Uw oplossing toont het probleem hier — playis geen jQuery-functie maar een functie van het DOM-element. Je moet het daarom het DOM-element aanroepen. Je geeft een voorbeeld van hoe je dit kunt doen met de native DOM-functies. Het jQuery-equivalent — als u dit wilt doen om in een bestaande jQuery-selectie te passen — zou $('#videoId').get(0).play()zijn. (gethaalt het native DOM-element uit de jQuery-selectie.)

Antwoord 2, autoriteit 21%

U kunt doen

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

Antwoord 3, autoriteit 15%

Zo heb ik het voor elkaar gekregen:

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

Al mijn HTML5-tags hebben de klasse ‘myHTMLvideo’

Antwoord 4, autoriteit 6%

Waarom moet je jQuery gebruiken? Uw voorgestelde oplossing werkt en is waarschijnlijk sneller dan het maken van een jQuery-object.

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

Antwoord 5, autoriteit 6%

Voor het pauzeren van meerdere video’s heb ik ontdekt dat dit goed werkt:

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

Dit kan in een klikfunctie worden gezet, wat best handig is.

Antwoord 6, autoriteit 4%

Als uitbreiding van het antwoord van lonesomeday kun je ook

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

Merk op dat er geen get() of eq() jQuery-functie wordt aangeroepen. De array van DOM die wordt gebruikt om de functie play() aan te roepen. Het is een snelkoppeling om in gedachten te houden.

Antwoord 7, autoriteit 3%

Ik vind deze leuk:

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

Hopelijk helpt het.

Antwoord 8

Ik gebruik FancyBox en jQuery om een video in te sluiten. Geef het een ID.

Misschien is het niet de BESTE oplossing om afspelen/pauzeren op een andere manier in te schakelen, maar voor mij is het gemakkelijk en HET WERKT! 🙂

In de

`

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

Antwoord 9

Dit is de eenvoudige methoden die we kunnen gebruiken

op jQuery-knop Klik op Functie

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

bedankt

Antwoord 10

door jQuery met selectors

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

door javascript met behulp van ID

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

of

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

Antwoord 11

Net als een notitie, zorg ervoor dat u controleert of de browser de videofunctie ondersteunt voordat u het probeert aan te roepen:

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

die JavaScript-fouten voor browsers voorkomen die het videotag niet ondersteunen.

Antwoord 12

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 

<video id="myVideo" width="320" height="176">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="https://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> 

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

$('video').each(function(index){
    $(this).get(0).play();
});

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

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