Putar / jeda video HTML 5 menggunakan JQuery

Saya mencoba mengontrol video HTML5 menggunakan JQuery. Saya memiliki dua klip di antarmuka tab, ada total enam tab, yang lain hanya memiliki gambar. Saya mencoba untuk membuat klip video diputar ketika tab mereka diklik dan kemudian berhenti ketika yang lain diklik.

Ini harus menjadi hal yang sederhana untuk dilakukan tetapi saya tidak bisa membuatnya berfungsi, kode yang saya gunakan untuk memutar video adalah:

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

Saya telah membaca bahwa elemen video perlu diekspos dalam suatu fungsi untuk dapat mengendalikannya tetapi tidak dapat menemukan contoh. Saya dapat membuatnya bekerja menggunakan JS:

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

Nasihat apa pun akan bagus. Terima kasih

Solusi Anda menunjukkan masalah di sini - playbukan fungsi jQuery tetapi fungsi elemen DOM. Karena itu Anda perlu menyebutnya pada elemen DOM. Anda memberikan contoh bagaimana melakukan ini dengan fungsi DOM asli. Setara jQuery - jika Anda ingin melakukan ini agar sesuai dengan pilihan jQuery yang ada - akan menjadi $('#videoId').get(0).play(). ( getmendapatkan elemen DOM asli dari pilihan jQuery.)

Beginilah cara saya membuatnya berfungsi:

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

Semua tag HTML5 saya memiliki kelas 'myHTMLvideo'

Anda dapat melakukan

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

Mengapa Anda perlu menggunakan jQuery? Solusi yang Anda usulkan berfungsi, dan mungkin lebih cepat daripada membangun objek jQuery.

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

Untuk menjeda beberapa video, saya menemukan bahwa ini berfungsi dengan baik:

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

Ini bisa dimasukkan ke dalam fungsi klik yang cukup berguna.

Sebagai perpanjangan dari jawaban lonesomeday, Anda juga dapat menggunakan

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

Perhatikan bahwa tidak ada fungsi jQuery get () atau eq () dipanggil. Array DOM digunakan untuk memanggil fungsi play (). Ini jalan pintas yang perlu diingat.

Saya suka yang ini:

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

Semoga ini bisa membantu.

Saya menggunakan FancyBox dan jQuery untuk menyematkan video. Berikan ID.

Mungkin bukan solusi TERBAIK yang bisa beralih bermain / jeda berbeda - tetapi mudah bagi saya dan IT BEKERJA! :)

Dalam

`

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

Ini adalah metode mudah yang bisa kita gunakan

pada fungsi klik tombol jquery

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

Terima kasih

Sama seperti catatan, pastikan Anda memeriksa apakah browser mendukung fungsi video, sebelum Anda mencoba menjalankannya:

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

Itu akan mencegah kesalahan JavaScript pada browser yang tidak mendukung tag video.

Oleh JQuery menggunakan penyeleksi

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

Dengan Javascript menggunakan ID

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

ATAU

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

Gunakan ini.. $('#video1').attr({'autoplay':'true'});

Saya juga membuatnya bekerja seperti ini:

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

@loneSomeday menjelaskannya dengan indah, di sini satu solusi yang mungkin juga memberi Anda ide bagus bagaimana mencapai fungsi play / pause

putar / jeda video saat klik

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