<訂正しました。>JavascriptのplaybakcRateの値を変数に入れて行いたい。

実現したいこと

JavaScriptでの動画の再生速度を変更するため、playbackRateプロパティーを使っています。

JavaScript
1
2videoElement.playbackRate = 1.0;

などとすると、正しく再生速度が変わるのですが、

Javascript
1
2val math = 1.1
3videoElement.playbackRate = math;
4

などとすると再生速度が変わりません。
値を変数に入れて使いたいのです。
どうしたらいいでしょうか。
わかる方がおりましたら教えてください。
なお、実際のコードはこちらです。

Html
1
2<html>
3<head>
4
5</head>
6<body>
7
8<article>
9<h1>JavaScriptレシピ</h1>
10<video type="video/mp4" src="http://www.htmq.com/html5/sample/sample.mp4" controls></video>
11<button id="btn_slow">スロー</button>
12<button id="btn_normal">通常</button>
13<button id="btn_fast">早送り</button>
14<button id="btn_veryfast">もっと早送り</button>
15</article>
16<script>
17alert("でばぐ");
18var pen = 0;
19var orange;
20var time;
21
22/*window.onload = function ok(){
23//計算始めと同時にタイマーを取得
24time = setInterval("box()",1);
25};
26
27//計算していく。
28function box(){
29pen += 0.01;
30console.log(pen);
31if(pen >= 1){
32clearInterval(time);
33}
34}*/
35//=========================================================
36window.addEventListener('DOMContentLoaded', function(){
37
38const videoElement = document.querySelector("video");
39const btn_slow = document.getElementById("btn_slow");
40const btn_normal = document.getElementById("btn_normal");
41const btn_fast = document.getElementById("btn_fast");
42const btn_veryfast = document.getElementById("btn_veryfast");
43
44btn_slow.addEventListener("click", (e) => {
45alert("でばでばぐ");
46window.onload = function ok(){
47//計算始めと同時にタイマーを取得
48time = setInterval("box()",1000);
49};
50
51//計算していく。
52function box(){
53pen += 0.1;
54console.log(pen);
55alert(pen);
56if(pen >= 4){
57clearInterval(time);
58}
59}
60videoElement.playbackRate = pen;
61alert("でばでバディ")
62});
63
64btn_normal.addEventListener("click", (e) => {
65videoElement.playbackRate = 1.0;
66});
67
68btn_fast.addEventListener("click", (e) => {
69videoElement.playbackRate = 2.0;
70});
71
72btn_veryfast.addEventListener("click", (e) => {
73videoElement.playbackRate = 3.0;
74});
75});
76alert("でばぐ")
77</script>
78</body>
79</html>
80

質問の仕方が悪い場合はコメント欄から教えてください。訂正させていただきます。

int32_t

2021/06/07 02:06

そのJavaScriptコードを実行したときに、ブラウザの開発者ツールのコンソールに何かエラーが出ませんか?

mg_ss

2021/06/07 02:10

出ていませんでした。

int32_t

2021/06/07 02:13

では、問題を再現できる完全なHTML+JavaScriptのコードを開示してください。

mg_ss

2021/06/07 02:26

<html> <head> </head> <body> <article> <h1>JavaScriptレシピ</h1> <video type="video/mp4" src="http://www.htmq.com/html5/sample/sample.mp4" controls></video> <button id="btn_slow">スロー</button> <button id="btn_normal">通常</button> <button id="btn_fast">早送り</button> <button id="btn_veryfast">もっと早送り</button> </article> <script> var pen = 0; var orange; var time; window.onload = function ok(){ //計算始めと同時にタイマーを取得 time = setInterval("box()",1); }; //計算していく。 function box(){ pen += 0.01; console.log(pen); if(pen >= 1){ clearInterval(time); } } //========================================================= window.addEventListener('DOMContentLoaded', function(){ const videoElement = document.querySelector("video"); const btn_slow = document.getElementById("btn_slow"); const btn_normal = document.getElementById("btn_normal"); const btn_fast = document.getElementById("btn_fast"); const btn_veryfast = document.getElementById("btn_veryfast"); btn_slow.addEventListener("click", (e) => { videoElement.playbackRate = pen; }); btn_normal.addEventListener("click", (e) => { videoElement.playbackRate = 1.0; }); btn_fast.addEventListener("click", (e) => { videoElement.playbackRate = 2.0; }); btn_veryfast.addEventListener("click", (e) => { videoElement.playbackRate = 3.0; }); }); </script> </body> </html> です。

int32_t

2021/06/07 02:42

HTMLコードを質問文に入れてください。このHTMLで、どういう操作をしたときに、どういう動作をするはずが、実際はどうなってしまうのでしょうか?

Lhankor_Mhy

2021/06/07 07:12

問題が再現しませんでした。ご提示のコードを試してみましたところ、「スロー」を押すと、document.querySelector("video").playbackRate が 0 となっており、 videoElement.playbackRate = pen; が動作していることを確認できました。

dameo

2021/06/07 23:46

質問の目的とは直接関係ありませんが、まずいろいろ問題があります。遠回りとお思いかもしれませんが、無関係ではないので、1つずつ見ていきます。 ■スローボタンのclickイベントハンドラ中でのloadイベントハンドラ登録 btn_slow.addEventListener("click", (e) => { alert("でばでばぐ"); window.onload = function ok() { //計算始めと同時にタイマーを取得 time = setInterval("box()", 1000); }; これですね。クリックイベントが発生するということは表示が全部終わった後なので、loadイベントはもう発生しません。つまりこのタイミングでのwindow.onload=は何の意味もないということです。意図を勝手に推測すると、loadイベントを待つ必要はなさそうなので、 btn_slow.addEventListener("click", (e) => { alert("でばでばぐ"); //計算始めと同時にタイマーを取得 time = setInterval("box()", 1000); でいいのではないでしょうか？ ■setInterval("box()", 1000) この構文のsetIntervalだと"box()"は実行時に解釈され、この関数内に存在してるわけではありません。なので、この関数にあるboxは見つかりません。別の構文を使って、この関数内のboxを見つけましょう。 setInterval(box, 1000) ■box関数内のpenをその上のブロックから参照している function box() { pen += 0.1; console.log(pen); alert(pen); if (pen >= 4) { clearInterval(time); } } videoElement.playbackRate = pen; 残念ながらboxの実行タイミングでvideoElement.playbackRate = penをしないと1秒ごとに速度を変更することが出来ません。box関数内でも設定しちゃいましょう。 function box() { pen += 0.1; console.log(pen); alert(pen); if (pen >= 4) { clearInterval(time); } videoElement.playbackRate = pen; } videoElement.playbackRate = pen; 全体的にまだJavaScriptに不慣れな感じなので、もっと優しいところから始めた方がいいかもしれません。以上を踏まえて、分からないところを質問するようにして頂けると幸いです。

mg_ss

2021/06/08 22:30

ありがとうございます。もともとやっていたのがphpなので、そのギャップに戸惑っているところです… もう少し考えてみます。