HTML5에서 비디오 재생 속도를 변경하는 방법

HTML5에서 비디오 재생 속도를 변경하는 방법

HTML5에서 비디오 재생 속도를 변경하는 방법? w3school에서 비디오 태그의 속성을 확인했지만 접근할 수 없었습니다.

이 사이트에 따르면 이 기능은playbackRate그리고.defaultPlaybackRateDOM 경유로 액세스 할 수 있습니다.예:

/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();

/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;

위의 내용은 Chrome 43+, Firefox 20+, IE 9+, Edge 12+에서 작동합니다.

그냥 입력해 주세요.

document.querySelector('video').playbackRate = 1.25;

최신 브라우저의 JS 콘솔에 있습니다.

(YouTube에서 동영상을 재생하는 동안 Chrome에서 테스트되었지만 어디에서나 작동해야 합니다. 특히 온라인 트레이닝 비디오를 빠르게 재생하는 데 유용합니다.)

브라우저에 "bookmarklet"(URL 대신 JavaScript 코드를 포함하는 북마크)로 추가하려면 이러한 브라우저 북마크 이름과 URL을 사용하고 다음 북마크를 브라우저 상단에 추가하십시오.아래 각 북마크의 "URL" 부분을 복사할 때는 브라우저의 북마크 작성 도구의 "URL" 필드에 여러 줄 코드 블록 전체, 새 줄 등을 복사하십시오.

이름: 0.5배
URL:

javascript:

document.querySelector('video').playbackRate = 0.5;

이름: 1.0x
URL:

javascript:

document.querySelector('video').playbackRate = 1.0;

이름 : 1.5배
URL:

javascript:

document.querySelector('video').playbackRate = 1.5;

이름: 2.0x
URL:

javascript:

document.querySelector('video').playbackRate = 2.0;

재생 속도 북마클릿은 다음과 같습니다.

위의 모든 재생 속도 북마크렛 등을 다음 폴더에 추가했습니다.1.00x다음과 같이 북마크바에 표시됩니다.

참고 자료:

1. Jeremy Visser의 주요 답변은
2. 제 GitHub의 요지에서 복사한 것입니다.https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
   1. GitHub에서의 지원 등 다른 북마크렛도 이쪽에서 입수할 수 있습니다.

비디오 속도에 대해 보다 세밀하게 조정된 접근 방식을 선호합니다.명령어 비디오의 속도를 높이고 속도를 늦출 수 있는 것이 마음에 듭니다.저는 이렇게 씁니다.

window.addEventListener("keypress", function(e) {
  if(e.key==="d") document.getElementsByTagName("video")[0].playbackRate += .1; else if(e.key==="s") document.getElementsByTagName("video")[0].playbackRate -= .1;
}, false);

속도를 높이려면 d를 누르고 속도를 줄이려면 s를 누릅니다.

다음 코드를 사용할 수 있습니다.

var vid = document.getElementById("video1");

function slowPlaySpeed() { 
    vid.playbackRate = 0.5;
} 

function normalPlaySpeed() { 
    vid.playbackRate = 1;
} 

function fastPlaySpeed() { 
    vid.playbackRate = 2;
}

Chrome에서 새 북마크 만들기

예를 들어 속도 선택기와 같은 임의 이름을 입력한 다음 URL에 다음 코드를 입력하십시오.

javascript:

var speed = prompt("Please enter speed", "1");
document.querySelector('video').playbackRate = speed,void(0);

이 북마크를 클릭하면 팝업창이 뜨고 비디오 속도를 입력할 수 있습니다.

javascript:document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 0.1;

여기에 아무 숫자나 입력할 수 있습니다. 멀리 가지 마세요.그래서 컴퓨터가 너무 복잡해지지 않게.

비디오/비디오 ID가 다음과 같습니다.myVideo다음 간단한 JS 코드를 입력하는 것만으로 원하는 작업을 수행하기 위해 JavaScript를 사용할 수 있습니다.

var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;`

That will decrease the speed of your video/audio to it's half speed.

재생 속도

오디오/비디오의 현재 재생 속도를 나타냅니다.

값의 예:

1.0 is normal speed

0.5 is half speed (slower)

2.0 is double speed (faster)

-1.0 is backwards, normal speed

-0.5 is backwards, half speed

출처 : w3schools.com

Firefox에는 마우스 오른쪽 버튼을 클릭하면 속도 제어 상황에 맞는 메뉴가 있습니다.

를 클릭합니다.

브라우저의 javascript 콘솔에 다음 명령을 입력합니다.

document.querySelector('video').playbackRate = 2.0;

다음과 같이 오른쪽 클릭 메뉴에서 inspect 옵션을 선택하면 얻을 수 있습니다.

솔루션

1. event 돔 dom domonloadstart="this.playbackRate = 1.5;"

  <video
    onloadstart="this.playbackRate = 1.5;"
    controls
    src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>

2. video.volume = 0.5;

  <video
    id="custom-video"
    controls
    src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>

const video = document.querySelector('#custom-video');

if(video) {
  video.playbackRate = 1.5;
}

데모

https://codepen.io/xgqfrms/pen/bGLOrjM

언제든지 사용할 수 있습니다.

var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;

언급URL : https://stackoverflow.com/questions/3027707/how-to-change-the-playing-speed-of-videos-in-html5