HTML5でビデオの再生速度を変更するにはどうすればよいですか?w3schoolでビデオタグの属性を確認しましたが、それに近づくことができませんでした。助けていただければ幸いです。
9 に答える
このサイトによると、これはDOMを介してアクセスできる属性playbackRate
と属性でサポートされています。defaultPlaybackRate
例:
/* 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以降、Edge12以降で機能します。
入力するだけ
document.querySelector('video').playbackRate = 1.25;
最新のブラウザのJSコンソールで。
(YouTubeでビデオを再生しながらChromeでテストされていますが、どこでも機能するはずです。特にオンライントレーニングビデオの高速化に役立ちます)。
これらを「ブックマークレット」(URLの代わりにJavaScriptコードを含むブックマーク)としてブラウザに追加したい場合は、これらのブラウザのブックマーク名とURLを使用して、次の各ブックマークをブラウザの上部に追加してください。以下の各ブックマークの「URL」部分をコピーするときは、複数行のコードブロック全体、新しい行、およびすべてを、ブラウザのブックマーク作成ツールの「URL」フィールドにコピーします。
名前: 0.5x
URL:
javascript:
document.querySelector('video').playbackRate = 0.5;
名前: 1.0x
URL:
javascript:
document.querySelector('video').playbackRate = 1.0;
名前: 1.5x
URL:
javascript:
document.querySelector('video').playbackRate = 1.5;
名前: 2.0x
URL:
javascript:
document.querySelector('video').playbackRate = 2.0;
これが私の再生速度のブックマークレットのすべてです:
次に示すように、上記のすべての再生速度のブックマークレットなどを1.00x
、ブックマークバーにある名前のフォルダーに追加しました。
参照:
- JeremyVisserによる主な回答
- ここに私のGitHubの要点からコピー:https ://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
- GitHubでの支援など、他のブックマークレットもここで入手できます。
次のコードを使用できます。
var vid = document.getElementById("video1");
function slowPlaySpeed() {
vid.playbackRate = 0.5;
}
function normalPlaySpeed() {
vid.playbackRate = 1;
}
function fastPlaySpeed() {
vid.playbackRate = 2;
}
私はビデオ速度のためにもっと微調整されたアプローチを持っていることを好みます。コマンドでビデオの速度を上げたり下げたりできるのが好きです。したがって、私はこれを使用します:
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を押すと遅くなります。
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;`
それはあなたのビデオ/オーディオの速度を半分の速度に落とします。
再生速度
オーディオ/ビデオの現在の再生速度を示します。
値の例:
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