JQuery를 사용하여 HTML 5 동영상 재생/일시정지

JQuery를 사용하여 HTML 5 동영상 재생/일시정지

저는 JQuery를 이용하여 HTML5 동영상을 제어하려고 합니다.탭 인터페이스에 두 개의 클립이 있고, 탭은 총 6개이고, 나머지는 이미지만 있습니다.탭을 클릭하면 동영상이 재생되고 다른 동영상이 클릭되면 중지되도록 시도하고 있습니다.

이 작업은 간단한 작업임에 틀림없지만 작동이 되지 않는 것 같습니다. 동영상을 재생하는 데 사용하는 코드는 다음과 같습니다.

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

비디오 요소를 제어할 수 있는 기능에서 노출해야 한다는 것을 읽었지만 예시를 찾을 수 없습니다.JS를 사용하여 작동시킬 수 있습니다.

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

어떤 조언이든 좋습니다.감사해요.

당신의 솔루션은 여기서 문제를 보여줍니다.play는 jQuery 함수가 아니라 DOM 요소의 함수입니다.따라서 DOM 요소를 호출해야 합니다.네이티브 DOM 함수를 사용하여 이를 수행하는 방법에 대한 예를 제시합니다.기존의 jQuery 선택 항목에 적합하도록 하려면 jQuery와 동등한 jQuery 항목은 다음과 같습니다.$('#videoId').get(0).play(). (getjQuery 선택에서 기본 DOM 요소를 가져옵니다.)

할수있습니다

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

이것이 제가 어떻게 일을 할 수 있었던 방법입니다.

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

내 HTML5 태그는 모두 '내' 클래스를 가지고 있습니다.HTML 비디오'

왜 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']();
});

도움이 되길 바랍니다.

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

jquery 버튼 클릭 기능

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

감사해요.

저는 팬시박스와 jQuery를 이용해 동영상을 내장합니다.신분증 주세요.

아마도 최고의 솔루션은 재생/일시 정지를 다르게 전환할 수는 없을 것입니다. 하지만 저와 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>`

여기 @ToolmakerSteve에서 답을 찾았지만, 이 방법으로 미세 조정해야 했습니다.모두 일시 중지하려면

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

아니면 모든 것을 연주하기 위해.

$('video').each(function(index){
    $(this).get(0).play();
});

셀렉터를 사용하여 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');

아이디를 이용한 자바스크립트로

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

오어

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

이것을 사용합니다.$('#video1').attr({'autoplay':'true'});

참고 사항으로 브라우저가 비디오 기능을 지원하는지 확인한 후 실행하십시오.

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

그러면 비디오 태그를 지원하지 않는 브라우저에서 자바스크립트 오류를 방지할 수 있습니다.

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> 

저도 이렇게 해봤습니다.

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

@loneSomeday는 그것을 아름답게 설명했습니다. 여기에 재생/일시 정지 기능을 달성하는 방법에 대한 좋은 아이디어를 줄 수 있는 한 가지 해결책이 있습니다.

클릭시 동영상 재생/pause

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

언급URL : https://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery