로드 후 두 개의 HTML5 비디오를 함께 자동 재생하는 방법은 무엇입니까?

Charleshawk

두 개의 HTML5 동영상이 동시에 자동 재생되도록하려고합니다. 즉, 두 동영상이 모두로드 될 때까지 재생되지 않도록 할 수 있나요?

두 번째는 여전히 로딩 중입니다. 이해가 되길 바랍니다.

'onloadeddata'함수를 사용하여 둘 다로드되었는지 확인한 다음 동시에 둘 다 시작할 수 있습니다. 동기화가 정확히 얼마나 정확한지 브라우저와 JavaScript 엔진 구현의 자비에 있다고 생각하지만 빠른 테스트에서 이것은 밀리 초 동기화에 대해 걱정하지 않는 한 꽤 동기화 된 것처럼 보입니다.

예는 아래를 참조하십시오.

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");

var vid1Ready = false
var vid2Ready = false

vid1.onloadeddata = function() {
    if (vid2Ready == true) {
      vid1.play()
      vid2.play()
    } else {
      vid1Ready = true
    }
};

vid2.onloadeddata = function() {
    if (vid1Ready == true) {
      vid1.play()
      vid2.play()
    } else {
      vid2Ready = true
    }
};
<video id="MyVid1" width="320" height="176" controls preload="auto">
  <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
  Your browser does not support this video format
</video>

<video id="MyVid2" width="320" height="176" controls preload="auto">
  <source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Linux에서 동기화 된 방식으로 두 개 이상의 비디오를 나란히 재생하는 방법은 무엇입니까?

분류에서Dev

html5 비디오 위로 svg 요소를 이동하고 동시에 비디오 재생을 제어하는 방법은 무엇입니까?

분류에서Dev

HTML5 비디오와 함께 작동하도록 togglefullscreen을 얻는 방법은 무엇입니까?

분류에서Dev

배경 HTML5 비디오의 확대 / 축소 모드를 변경하는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 개체와 함께 작동하는 기본 클래스를 만드는 방법은 무엇입니까?

분류에서Dev

두 개의 부동 DockContents를 함께 도킹하는 방법은 무엇입니까?

분류에서Dev

ffmpeg : 두 개의 비디오를 임의의 매개 변수로 연결하는 방법은 무엇입니까?

분류에서Dev

하나가 끝난 후 두 번째 .mp4 비디오를 재생하는 방법은 무엇입니까?

분류에서Dev

테두리가있는 상자에 HTML5 캔버스를 만드는 방법은 무엇입니까?

분류에서Dev

HTML5의 오디오 : 다른 사운드 다음에 사운드를 재생하는 방법은 무엇입니까?

분류에서Dev

두 개의 루핑 비디오를 mplayer 및 upd와 동기화하는 방법은 무엇입니까?

분류에서Dev

랩톱 (ATI 및 Intel)에서 두 개의 비디오 카드를 관리하는 방법은 무엇입니까?

분류에서Dev

랩톱 (ATI 및 Intel)에서 두 개의 비디오 카드를 관리하는 방법은 무엇입니까?

분류에서Dev

랩톱 (ATI 및 Intel)에서 두 개의 비디오 카드를 관리하는 방법은 무엇입니까?

분류에서Dev

HTML5 비디오 자막을 텍스트로 직접 설정하는 방법은 무엇입니까?

분류에서Dev

ffmpeg를 사용하여 두 개의 서로 다른 비디오로 하나의 비디오를 오버레이하는 방법은 무엇입니까?

분류에서Dev

두 개 이상의 동일한 문자를 문자열로 인쇄하는 방법은 무엇입니까?

분류에서Dev

두 개체 개체를 함께 결합하는 방법은 무엇입니까?

분류에서Dev

Raspberry Pi의 스트리밍 비디오를 html로 포함하는 방법은 무엇입니까?

분류에서Dev

어셈블리어-입력 한 두 개의 숫자를 하나로 만드는 방법은 무엇입니까?

분류에서Dev

두 개의 다른 쿼리를 사용하여 자동 완성을 만드는 방법은 무엇입니까?

분류에서Dev

반대 부호로 두 개의 부동 소수점 숫자를 추가하는 방법은 무엇입니까?

분류에서Dev

C #에서 두 개의 콤보 상자를 동적으로 연결하는 방법은 무엇입니까?

분류에서Dev

qt에서 두 개의 매개 변수와 함께 qDebug ()를 사용하는 방법은 무엇입니까?

분류에서Dev

동일한 HTML 파일에서 두 개의 버튼에 대해 두 개의 개별 POST 메서드를 만드는 방법은 무엇입니까?

분류에서Dev

Firefox로 YouTube에서 HTML5 비디오를 비활성화하는 방법은 무엇입니까?

분류에서Dev

MFC에서 동시에 두 개의 활성 대화 상자를 만드는 방법은 무엇입니까?

분류에서Dev

LogisticDx를로드 한 후 플롯 함수의 기본 (그래픽 : :) 동작을 재설정하는 방법은 무엇입니까?

분류에서Dev

두 개의 정렬 된 열 (첫 번째 열의 경우 자동 너비)로 WPF ComboBox를 만드는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    Linux에서 동기화 된 방식으로 두 개 이상의 비디오를 나란히 재생하는 방법은 무엇입니까?

  2. 2

    html5 비디오 위로 svg 요소를 이동하고 동시에 비디오 재생을 제어하는 방법은 무엇입니까?

  3. 3

    HTML5 비디오와 함께 작동하도록 togglefullscreen을 얻는 방법은 무엇입니까?

  4. 4

    배경 HTML5 비디오의 확대 / 축소 모드를 변경하는 방법은 무엇입니까?

  5. 5

    두 개의 다른 개체와 함께 작동하는 기본 클래스를 만드는 방법은 무엇입니까?

  6. 6

    두 개의 부동 DockContents를 함께 도킹하는 방법은 무엇입니까?

  7. 7

    ffmpeg : 두 개의 비디오를 임의의 매개 변수로 연결하는 방법은 무엇입니까?

  8. 8

    하나가 끝난 후 두 번째 .mp4 비디오를 재생하는 방법은 무엇입니까?

  9. 9

    테두리가있는 상자에 HTML5 캔버스를 만드는 방법은 무엇입니까?

  10. 10

    HTML5의 오디오 : 다른 사운드 다음에 사운드를 재생하는 방법은 무엇입니까?

  11. 11

    두 개의 루핑 비디오를 mplayer 및 upd와 동기화하는 방법은 무엇입니까?

  12. 12

    랩톱 (ATI 및 Intel)에서 두 개의 비디오 카드를 관리하는 방법은 무엇입니까?

  13. 13

    랩톱 (ATI 및 Intel)에서 두 개의 비디오 카드를 관리하는 방법은 무엇입니까?

  14. 14

    랩톱 (ATI 및 Intel)에서 두 개의 비디오 카드를 관리하는 방법은 무엇입니까?

  15. 15

    HTML5 비디오 자막을 텍스트로 직접 설정하는 방법은 무엇입니까?

  16. 16

    ffmpeg를 사용하여 두 개의 서로 다른 비디오로 하나의 비디오를 오버레이하는 방법은 무엇입니까?

  17. 17

    두 개 이상의 동일한 문자를 문자열로 인쇄하는 방법은 무엇입니까?

  18. 18

    두 개체 개체를 함께 결합하는 방법은 무엇입니까?

  19. 19

    Raspberry Pi의 스트리밍 비디오를 html로 포함하는 방법은 무엇입니까?

  20. 20

    어셈블리어-입력 한 두 개의 숫자를 하나로 만드는 방법은 무엇입니까?

  21. 21

    두 개의 다른 쿼리를 사용하여 자동 완성을 만드는 방법은 무엇입니까?

  22. 22

    반대 부호로 두 개의 부동 소수점 숫자를 추가하는 방법은 무엇입니까?

  23. 23

    C #에서 두 개의 콤보 상자를 동적으로 연결하는 방법은 무엇입니까?

  24. 24

    qt에서 두 개의 매개 변수와 함께 qDebug ()를 사용하는 방법은 무엇입니까?

  25. 25

    동일한 HTML 파일에서 두 개의 버튼에 대해 두 개의 개별 POST 메서드를 만드는 방법은 무엇입니까?

  26. 26

    Firefox로 YouTube에서 HTML5 비디오를 비활성화하는 방법은 무엇입니까?

  27. 27

    MFC에서 동시에 두 개의 활성 대화 상자를 만드는 방법은 무엇입니까?

  28. 28

    LogisticDx를로드 한 후 플롯 함수의 기본 (그래픽 : :) 동작을 재설정하는 방법은 무엇입니까?

  29. 29

    두 개의 정렬 된 열 (첫 번째 열의 경우 자동 너비)로 WPF ComboBox를 만드는 방법은 무엇입니까?

뜨겁다태그

보관