JQuery를 사용하여 HTML 5 비디오 재생 / 일시 정지

JQuery를 사용하여 HTML5 비디오를 제어하려고합니다. 탭 인터페이스에 두 개의 클립이 있고 총 6 개의 탭이 있으며 다른 클립에는 이미지가 있습니다. 탭을 클릭하면 비디오 클립이 재생되도록하고 다른 클립을 클릭하면 중지하려고합니다.

이것은해야 할 간단한 일이지만 비디오를 재생하는 데 사용하는 코드는 다음과 같습니다.

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

나는 비디오 요소가 그것을 제어 할 수있는 기능으로 노출되어야하지만 예제를 찾을 수 없다는 것을 읽었습니다. JS를 사용하여 작동시킬 수 있습니다.

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

어떤 조언도 좋을 것입니다. 감사

귀하의 솔루션은 여기에 문제를 보여줍니다 play.jQuery 함수가 아니라 DOM 요소의 함수입니다. 따라서 DOM 요소를 호출해야합니다. 기본 DOM 함수를 사용하여이를 수행하는 방법에 대한 예를 제공합니다. 기존 jQuery 선택에 적합하도록 jQuery와 동등한 기능을 수행 할 수 있습니다 $('#videoId').get(0).play(). ( getjQuery 선택에서 기본 DOM 요소를 가져옵니다.)

이것이 내가 작동하게하는 방법입니다.

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

모든 HTML5 태그에는 'myHTMLvideo'클래스가 있습니다.

넌 할 수있어

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

왜 jQuery를 사용해야합니까? 제안 된 솔루션이 작동하며 jQuery 객체를 생성하는 것보다 빠릅니다.

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

여러 비디오를 일시 중지 한 결과 이것이 잘 작동한다는 것을 알았습니다.

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

이것은 매우 편리한 클릭 기능에 넣을 수 있습니다.

외로움에 대한 답변의 연장선으로

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

get () 또는 eq () jQuery 함수가 호출되지 않습니다. play () 함수를 호출하는 데 사용되는 DOM의 배열. 명심해야 할 지름길입니다.

난이게 좋아:

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

도움이 되길 바랍니다.

FancyBox와 jQuery를 사용하여 비디오를 임베드했습니다. ID를 알려주십시오.

아마도 BEST 솔루션이 재생 / 일시 중지를 다르게 토글 할 수는 없지만 나와 나와 IT가 쉽게 일할 수 있습니다! :)

에서

`

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

이것은 우리가 사용할 수있는 쉬운 방법입니다

jquery 버튼 클릭 기능

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

감사

참고로, 호출하기 전에 브라우저가 비디오 기능을 지원하는지 확인하십시오.

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

그러면 비디오 태그를 지원하지 않는 브라우저에서 JavaScript 오류가 발생하지 않습니다.

선택기를 사용하는 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');

ID를 사용하는 자바 스크립트로

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

또는

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

이것을 사용하십시오 .. $('#video1').attr({'autoplay':'true'});

또한 다음과 같이 작동하게했습니다.

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

@loneSomeday는 아름답게 설명했습니다. 여기에서 재생 / 일시 중지 기능을 얻는 방법에 대한 좋은 아이디어를 줄 수있는 솔루션

클릭시 비디오 재생 / 일시 정지

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