JQuery kullanarak HTML 5 videosunu oynatma / duraklatma

JQuery kullanarak HTML5 videoları kontrol etmeye çalışıyorum. Sekmeli arayüzde iki klipim var, toplamda altı sekme var, diğerleri sadece resimlere sahip. Sekmelerini tıklatıldığında video klipleri oynatmaya çalışıyorum ve diğerlerinden tıklandığında duruyorum.

Bu yapmak için basit bir şey olmalı ama işe almak için sabırsızlanıyorum, videoyu oynatmak için kullanıyorum kodu:

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

Video elemanının kontrol edebilmek için bir fonksiyonda gösterilmesi gerektiğini okudum ama bir örnek bulamıyorum. JS kullanarak çalışmasını mümkün:

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

Herhangi bir tavsiye harika olurdu. Teşekkürler

Çözümünüz sorunu burada göstermektedir - playbir jQuery işlevi değil, DOM öğesinin bir işlevidir. Bu nedenle bunu DOM öğesine çağırmanız gerekir. Bunun yerel DOM işlevleriyle nasıl yapılacağına dair bir örnek verirsiniz. JQuery eşdeğeri - bunu mevcut bir jQuery seçimine uyacak şekilde yapmak isterseniz - olurdu $('#videoId').get(0).play(). ( getyerel DOM öğesini jQuery seçiminden alır.)

Ben iş bu şekilde başardı:

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

Tüm HTML5 etiketlerim 'myHTMLvideo' sınıfına sahip

Yapabilirsin

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

Neden jQuery kullanmanız gerekiyor? Önerilen çözüm işe yarar ve muhtemelen bir jQuery nesnesi oluşturmaktan daha hızlıdır.

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

Birden fazla videoyu duraklatmak için bunun iyi çalıştığını gördüm:

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

Bu, oldukça kullanışlı bir tıklama işlevine yerleştirilebilir.

Yalnız günün cevabının bir uzantısı olarak,

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

Çağrılan get () veya eq () jQuery işlevi olmadığına dikkat edin. DOM'nin play () işlevini çağırmak için kullanılan dizisi. Akılda tutulması gereken bir kısayol.

Bunu beğendim:

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

Umarım yardımcı olur.

Bir videoyu süslemek için FancyBox ve jQuery kullanıyorum. Ona bir kimlik verin.

Belki de EN İYİ çözüm oynatmayı / duraklatmayı farklı bir şekilde değiştiremezdi - ama benim ve BT İŞLERİ için kolay! :)

İçinde

'

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

Kullanabileceğimiz kolay yöntemler bu

jquery düğmesi tıklama işlevi

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

Teşekkürler

Not olarak, çağırmaya çalışmadan önce tarayıcının video işlevini destekleyip desteklemediğini kontrol ettiğinizden emin olun:

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

Bu, video etiketini desteklemeyen tarayıcılarda JavaScript hatalarını önler.

Seçicileri kullanarak JQuery tarafından

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

ID kullanarak Javascript tarafından

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

VEYA

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

bunu kullan.. $('#video1').attr({'autoplay':'true'});

Ayrıca şu şekilde çalışmasını sağladım:

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

@loneSomeday güzelce açıkladı, burada oynatma / duraklatma işlevselliğini nasıl elde edeceğinize dair iyi bir fikir verebilecek bir çözüm

tıklandığında videoyu oynat / duraklat

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