Phát / tạm dừng video HTML 5 bằng JQuery

Tôi đang cố gắng kiểm soát video HTML5 bằng JQuery. Tôi có hai clip trong một giao diện theo thẻ, có tổng cộng sáu tab, các tab khác chỉ có hình ảnh. Tôi đang cố gắng làm cho các video clip phát khi tab của chúng được nhấp và sau đó dừng khi bất kỳ video nào khác được nhấp.

Đây phải là một điều đơn giản để làm nhưng tôi dường như không thể làm cho nó hoạt động, mã tôi đang sử dụng để phát video là:

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

Tôi đã đọc được rằng phần tử video cần được hiển thị trong một chức năng để có thể kiểm soát nó nhưng không thể tìm thấy một ví dụ. Tôi có thể làm cho nó hoạt động bằng cách sử dụng JS:

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

Bất cứ lời khuyên nào cũng tuyệt vời cả. Cảm ơn

Giải pháp của bạn cho thấy vấn đề ở đây - playkhông phải là hàm jQuery mà là hàm của phần tử DOM. Do đó, bạn cần gọi nó theo phần tử DOM. Bạn đưa ra một ví dụ về cách thực hiện điều này với các hàm DOM gốc. Tương đương với jQuery - nếu bạn muốn làm điều này để phù hợp với lựa chọn jQuery hiện có - sẽ là $('#videoId').get(0).play(). ( getlấy phần tử DOM gốc từ lựa chọn jQuery.)

Đây là cách tôi quản lý để làm cho nó hoạt động:

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

Tất cả các thẻ HTML5 của tôi đều có lớp 'myHTMLvideo'

Bạn có thể làm

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

Tại sao bạn cần sử dụng jQuery? Giải pháp đề xuất của bạn hoạt động và có thể nhanh hơn việc xây dựng một đối tượng jQuery.

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

Để tạm dừng nhiều video tôi đã thấy rằng điều này hoạt động độc đáo:

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

Điều này có thể được đưa vào một chức năng nhấp chuột khá tiện dụng.

Là một phần mở rộng của câu trả lời của lonesomeday, bạn cũng có thể sử dụng

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

Lưu ý rằng không có hàm get () hoặc eq () được gọi. Mảng DOM được sử dụng để gọi hàm play (). Đó là một lối tắt để ghi nhớ.

Tôi thích cái này:

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

Hy vọng nó giúp.

Tôi sử dụng FancyBox và jQuery để nhúng video. Cung cấp cho nó một ID.

Có lẽ không phải là giải pháp TỐT NHẤT có thể chuyển đổi chơi / tạm dừng khác nhau - nhưng dễ dàng cho tôi và CÔNG TRÌNH CNTT! :)

bên trong

`

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

Đây là phương pháp dễ dàng chúng ta có thể sử dụng

trên chức năng bấm nút jquery

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

Cảm ơn

Cũng như một ghi chú, đảm bảo bạn kiểm tra xem trình duyệt có hỗ trợ chức năng video hay không, trước khi bạn thử gọi nó:

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

Điều đó sẽ ngăn lỗi JavaScript trên các trình duyệt không hỗ trợ thẻ video.

Bằng cách sử dụng bộ chọn của JQuery

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

Bằng Javascript sử dụng ID

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

HOẶC LÀ

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

dùng cái này.. $('#video1').attr({'autoplay':'true'});

Tôi cũng làm cho nó hoạt động như thế này:

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

@loneSomeday giải thích rất hay, đây là một giải pháp có thể cung cấp cho bạn ý tưởng hay về cách đạt được chức năng phát / tạm dừng

phát / tạm dừng video khi nhấp

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