Wordpressのプラグインで、動画倍速ってないんですね。
これを元に開発しようかな。
動画（音声）を倍速にする機能（ボタンクリック）
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="main.js"></script>
</head>
<body>
<output id="res">
<video src='/Users/matsumurashun/Downloads/pu-tyan.mp4' width='500' height='300' controls loop></video>
<form>
<input type="button" value="1倍速">
<input type="button" value="2倍速">
<input type="button" value="3倍速">
</form>
</output>
</body>
</html>
main.js
window.onload = () => {
const btn = document.getElementsByTagName("input");
const video = document.getElementsByTagName("video")[0];
btn[0].addEventListener('click', () => {
video.playbackRate = 1.0;
video.defaultPlaybackRate = 1.0;
}, false);
btn[1].addEventListener('click', () => {
video.playbackRate = 2.0;
video.defaultPlaybackRate = 2.0;
}, false);
btn[2].addEventListener('click', () => {
video.playbackRate = 3.0;
video.defaultPlaybackRate = 3.0;
}, false);
}
動画（音声）を倍速にする機能（プルダウン選択）
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="main.js"></script>
</head>
<body>
<output id="res">
<video src='/Users/matsumurashun/Downloads/pu-tyan.mp4' width='500' height='300' controls loop></video>
<form>
<select>
<option value="1">1倍速</option>
<option value="2">2倍速</option>
<option value="3">3倍速</option>
</select>
</form>
</output>
</body>
</html>
main.js
window.onload = () => {
const selector = document.getElementsByTagName("select")[0];
selector.addEventListener('change', (it) => {
video.playbackRate = setRate(it.target.value);
});
const setRate = (val) => {
return Number(val);
}
}
playbackRate:再生速度の倍率
Number:Numberオブジェクトで、引数に入れれば文字列を数値に変換してくれる