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

해결법

1.귀하의 솔루션을 보여줍니다 여기에 문제 - 놀이는 jQuery를 기능하지만, DOM 요소의 기능이 아니다. 그러므로 당신은 DOM 요소에 호출 할 필요가있다. 당신은 기본 DOM 기능이이 작업을 수행하는 방법의 예를 제공합니다. 기존의 jQuery 선택과에 맞게이 작업을 수행하기를 원한다면 - - JQuery와 상응 ( '# videoId가') $ 될 수 (0) .play ()를.. (GET은 jQuery를 선택에서 기본 DOM 요소를 가져옵니다.)

귀하의 솔루션을 보여줍니다 여기에 문제 - 놀이는 jQuery를 기능하지만, DOM 요소의 기능이 아니다. 그러므로 당신은 DOM 요소에 호출 할 필요가있다. 당신은 기본 DOM 기능이이 작업을 수행하는 방법의 예를 제공합니다. 기존의 jQuery 선택과에 맞게이 작업을 수행하기를 원한다면 - - JQuery와 상응 ( '# videoId가') $ 될 수 (0) .play ()를.. (GET은 jQuery를 선택에서 기본 DOM 요소를 가져옵니다.)

2.넌 할 수있어

넌 할 수있어

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

3.나는 그것을 작동하도록 관리하는 방법입니다 :

나는 그것을 작동하도록 관리하는 방법입니다 :
```
jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});
```
내 모든 HTML5 태그는 클래스의 myHTMLvideo '을 가지고
4.왜 jQuery를 사용해야합니까? 귀하의 제안 솔루션 작품, 그것은 아마 빨리 jQuery를 개체를 구성하는 것보다입니다.

왜 jQuery를 사용해야합니까? 귀하의 제안 솔루션 작품, 그것은 아마 빨리 jQuery를 개체를 구성하는 것보다입니다.
```
document.getElementById('videoId').play();
```
5.여러 개의 동영상을 일시 정지를 들어 나는 이것이 잘 작동 것을 발견했다 :

여러 개의 동영상을 일시 정지를 들어 나는 이것이 잘 작동 것을 발견했다 :
```
$("video").each(function(){
    $(this).get(0).pause();
});
```
이것은 매우 편리 클릭 기능에 투입 될 수있다.
6.lonesomeday의 대답의 확장으로, 당신은 또한 사용할 수 있습니다

lonesomeday의 대답의 확장으로, 당신은 또한 사용할 수 있습니다
```
$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});
```
공지 사항이라 더 GET () 또는 EQ () jQuery를 기능이 없다는 것을. DOM의 배열 재생 () 함수를 호출하는 데 사용됩니다. 그것은 염두에 두어야 바로 가기입니다.

7.난이게 좋아:

난이게 좋아:

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

희망이 도움이.

8.비디오를 포함에 내가 jQuery를에 FancyBox를 사용합니다. 그에게 ID를 부여합니다.

비디오를 포함에 내가 jQuery를에 FancyBox를 사용합니다. 그에게 ID를 부여합니다.

아마도하지 않는 가장 좋은 방법은 / 재생 전환 할 수 다르게 일시 정지 -하지만 쉽게 나를 위해 그리고 그것을 작동합니다! :)

에서

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

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

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

JQuery와 버튼 클릭 기능에
```
$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}
```
감사
10.이것을 사용 .. . $ ( '#의 비디오 1') ATTR ({ '자동 재생': '진정한'});

이것을 사용 .. . $ ( '#의 비디오 1') ATTR ({ '자동 재생': '진정한'});
11.그냥 참고로, 브라우저가 비디오 기능을 지원하는 경우 당신이 그것을 호출을 시도하기 전에 확인해야합니다 :

그냥 참고로, 브라우저가 비디오 기능을 지원하는 경우 당신이 그것을 호출을 시도하기 전에 확인해야합니다 :
```
if($('#movie1')[0].play)
    $('#movie1')[0].play();
```
즉, 비디오 태그를 지원하지 않는 브라우저에서 자바 스크립트 오류를 방지 할 수 있습니다.

12.나는 또한이 같은 일을했다 :

나는 또한이 같은 일을했다 :

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

13.하여 JQuery와는 선택기를 사용하여

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

14.@loneSomeday은 아름답게, 여기에 하나 개의 솔루션 또한 당신에게 재생 / 일시 정지 기능을 달성하기 위해 얼마나 좋은 아이디어를 줄 수있는 설명

@loneSomeday은 아름답게, 여기에 하나 개의 솔루션 또한 당신에게 재생 / 일시 정지 기능을 달성하기 위해 얼마나 좋은 아이디어를 줄 수있는 설명

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

15.

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

16.

    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>

17.VAR VID = document.getElementById를 ( "myVideo를"); playVid 함수 () { () vid.play; } pauseVid 함수 () { vid.pause (); } <동영상 ID = "myVideo를"폭 = "320"높이 = "176"> <소스 SRC = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"TYPE = "비디오 / MP4"> <소스 SRC = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg"TYPE = "비디오 / OGG"> 브라우저가 HTML5 비디오를 지원하지 않습니다. <버튼의 onclick = "playVid ()"TYPE = "버튼"> 비디오 재생 <버튼의 onclick = "pauseVid ()"TYPE = "버튼"> 로
비디오 일시

VAR VID = document.getElementById를 ( "myVideo를"); playVid 함수 () { () vid.play; } pauseVid 함수 () { vid.pause (); } <동영상 ID = "myVideo를"폭 = "320"높이 = "176"> <소스 SRC = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"TYPE = "비디오 / MP4"> <소스 SRC = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg"TYPE = "비디오 / OGG"> 브라우저가 HTML5 비디오를 지원하지 않습니다. <버튼의 onclick = "playVid ()"TYPE = "버튼"> 비디오 재생 <버튼의 onclick = "pauseVid ()"TYPE = "버튼"> 로
비디오 일시
18.여기에 대답 @ToolmakerSteve 찾을 수 있지만, 미세 조정이 방법에 있었다 : 모두를 일시 정지하려면

여기에 대답 @ToolmakerSteve 찾을 수 있지만, 미세 조정이 방법에 있었다 : 모두를 일시 정지하려면
```
$('video').each(function(index){
    $(this).get(0).pause();
});
```
또는 모든 재생
```
$('video').each(function(index){
    $(this).get(0).play();
});
```
19.당신은 기본적인 HTML 플레이어를 사용할 수 있습니다 또는 당신은 당신의 자신의 주문을 할 수 있습니다. 그냥 말. 당신은 당신이 ... https://codepen.io/search/pens?q=video+player를 참조를 통해 여부를 스크롤 할 수 있습니다합니다. 그것은 당신에게하는 것입니다.

당신은 기본적인 HTML 플레이어를 사용할 수 있습니다 또는 당신은 당신의 자신의 주문을 할 수 있습니다. 그냥 말. 당신은 당신이 ... https://codepen.io/search/pens?q=video+player를 참조를 통해 여부를 스크롤 할 수 있습니다합니다. 그것은 당신에게하는 것입니다.

from https://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] n 번째의 jQuery 요소를 얻는 방법 (0)	2020.10.17
[JQUERY] jQuery를 가진 요소의 ID 변경 (0)	2020.10.17
[JQUERY] jQuery를 사용하여 비동기 Ajax 요청을 병렬 (0)	2020.10.17
[JQUERY] 어떻게 Internet Explorer에서 캐싱에서 jQuery를 Ajax 요청을 방지하기 위해? (0)	2020.10.17
[JQUERY] jQuery로 키보드 단축키 (0)	2020.10.17

복붙노트

[JQUERY] jQuery를 사용하여 재생 / 일시 정지 HTML 5 비디오

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

해결법

2.넌 할 수있어

3.나는 그것을 작동하도록 관리하는 방법입니다 :

4.왜 jQuery를 사용해야합니까? 귀하의 제안 솔루션 작품, 그것은 아마 빨리 jQuery를 개체를 구성하는 것보다입니다.

5.여러 개의 동영상을 일시 정지를 들어 나는 이것이 잘 작동 것을 발견했다 :

6.lonesomeday의 대답의 확장으로, 당신은 또한 사용할 수 있습니다

7.난이게 좋아:

8.비디오를 포함에 내가 jQuery를에 FancyBox를 사용합니다. 그에게 ID를 부여합니다.

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

10.이것을 사용 .. . $ ( '#의 비디오 1') ATTR ({ '자동 재생': '진정한'});

11.그냥 참고로, 브라우저가 비디오 기능을 지원하는 경우 당신이 그것을 호출을 시도하기 전에 확인해야합니다 :

12.나는 또한이 같은 일을했다 :

13.하여 JQuery와는 선택기를 사용하여

14.@loneSomeday은 아름답게, 여기에 하나 개의 솔루션 또한 당신에게 재생 / 일시 정지 기능을 달성하기 위해 얼마나 좋은 아이디어를 줄 수있는 설명

15.

16.

18.여기에 대답 @ToolmakerSteve 찾을 수 있지만, 미세 조정이 방법에 있었다 : 모두를 일시 정지하려면

'JQUERY' 카테고리의 다른 글

티스토리툴바