Putar / jeda video HTML 5 menggunakan JQuery


206

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

Jawaban:


356

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


5
Itu hebat, bekerja dengan sempurna, terima kasih memang. Baik untuk memahami DOM dengan lebih baik juga.
Barny83

1
Menggunakan JQuery untuk mengontrol video dengan cara ini tampaknya menyebabkan masalah dengan pemutaran di iPhone. Saya memiliki elemen video di tab, jquery mengungkapkan ini, tetapi kemudian mengklik panah mulai video tidak memulai klip. Ketika saya menghapus baris $ ('# videoId'). Get (0) .play () tidak ada masalah. Apa cara terbaik untuk mengatasi ini? Saya berpikir saya bisa menghapus js dengan pernyataan opsional untuk iOS - video tidak akan autostart untuk perangkat iOS, jadi dengan senang hati akan melakukan ini - atau ada solusi yang lebih sederhana? Setiap bantuan sangat dihargai.
Barny83

Bagaimana saya bisa membuat ini menjeda semua elemen <video> pada halaman?
prismspec

5
@russellsayshi - tidak, itu hanya akan memutar SATU video; prismspec meminta SEMUA video. Sintaks yang benar: $('video').each(this.play());untuk memainkan semua; $('video').each(this.pause());untuk menjeda semua. each()adalah fungsi jQuery, yang dilewatkan ke dalamnya adalah fungsi javascript, yang diterapkan ke setiap elemen. Karena setiap elemen ditangani, thismewakili elemen itu.
ToolmakerSteve

11
Jika hanya menginginkan elemen pertama, dapat disederhanakan dengan mengganti .get(0)dengan [0]. Jadi $('video')[0].play();atau untuk id tertentu $('#videoId')[0].play();.
ToolmakerSteve

56

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'


7
Perhatikan bahwa tidak perlu membungkus jQuery sehingga Anda dapat menyimpan overhead itu dengan mengganti baris ternary dengan ini:this.paused ? this.play() : this.pause();
Pete Watts

56

Anda dapat melakukan

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

2
Anda bahkan dapat beralih: $ ('video'). Trigger ($ ('video'). Prop ('dijeda')? 'Play': 'pause');
Darío Pm

21

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

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

Lihat solusi lonesomeday jika Anda bersikeras pada implementasi jQuery (juga untuk penjelasan mengapa Anda tidak bisa memanggil playobjek jQuery).
sudo kerja

Saya berpikir saya akan menggunakan kode dalam jQuery lain, dan mungkin akan melakukannya, tetapi karena berdiri saya hanya menggunakan baris itu jadi saya kira itu bisa dilakukan dengan kode yang saya miliki ... juga saya tidak yakin apakah itu praktik yang baik untuk mencampur. Terima kasih atas sarannya.
Barny83

2
Jika Anda sudah instantiated objek jQuery untuk movie1melalui $('movie1')untuk tindakan jQuery lainnya, maka itu baik-baik saja; Namun, jika Anda melakukannya hanya di satu tempat ini, Anda akan menemukan beberapa kehilangan kinerja. Ini mungkin tidak cukup terlihat, tetapi saya suka mengoptimalkan banyak.
kerja sudo

@sudowork - serius? Anda mendiskusikan kerugian kinerja saat memulai pemutaran video? Jika perangkat Anda cukup cepat untuk memutar video, itu cukup cepat untuk melakukan tindakan jQuery tanpa memperhatikan pengguna.
ToolmakerSteve

19

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.


4
Anda dapat melakukan hal yang sama seperti: $ ("video"). Masing-masing (function () {this.pause ()});
Marcel M.

1
$ (ini) -> Anda membuat objek jquery dari objek "ini". dapatkan (0) -> Anda mendapatkan kembali objek "this" asli dari objek jquery ... this === $ (this) .get (0)
Blackfire

14

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.


12

Saya suka yang ini:

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

Semoga ini bisa membantu.


4

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

3

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


1

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.


1

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();

0

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


2
"Saya mencoba membuat klip video diputar ketika tab mereka diklik" - sehingga penanganan acara yang terkontrol diperlukan.
davidenke

0

Saya juga membuatnya bekerja seperti ini:

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

Tolong tambahkan beberapa penjelasan untuk jawaban Anda
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>

Hai, selamat datang di Stack Overflow. Saat menjawab pertanyaan yang sudah memiliki banyak jawaban, pastikan untuk menambahkan beberapa wawasan tambahan mengapa jawaban yang Anda berikan bersifat substantif dan tidak hanya menggemakan apa yang sudah diperiksa oleh poster asli. Ini sangat penting dalam jawaban "hanya kode" seperti yang Anda berikan.
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> 


Solusi dalam jawaban Anda tampaknya tidak berhasil
Cray
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.