WordPressでJavaScriptが動きません。

Question

WordPressで作成した独自のWebサイトで動画を倍速再生させたいです。
動画は自分のサーバーにある動画です。（You Tubeとかの埋め込みではない）

JavaScriptのファイルは以下の通りで、サーバーの適当な場所に保存しました。

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 = 1.5;
        video.defaultPlaybackRate = 1.5;
    }, false);

    btn[2].addEventListener('click', () => {
        video.playbackRate = 2.0;
        video.defaultPlaybackRate = 2.0;
    }, false);
}

次に、以下のコードを投稿ページに書くことで、速度変更ボタンを表示しています。

    <output id="res">
        <video src='********.mp4' width='500' height='300' controls loop></video>
        <form>
            <input type="button" value="1倍速">
            <input type="button" value="1.5倍速">
            <input type="button" value="2倍速">
        </form>
    </output>

ここまではできたのですが、最後にJavaScriptのファイルを読み込むコードをどこに書いても倍速再生ができません。

    <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="******/video_speed.js"></script>

このコードをhead内に書けばよいらしいのですが、うまくいきません。
Insert Headers and Footersというプラグインを使ったり、ググった通りにFunction.phpやheader.phpにかいたりしたのですが、できませんでした。
ローカル環境では倍速再生できました。

Comments

[CHERRY]

質問が途中で切れているようなので編集して保存しなおしていただけないでしょうか？

また、できませんだけでは状況が分かりませんので、どのような状態なのかを具体的に記載していただけないでしょうか？

また、Webブラウザのデベロッパーツールには、何かメッセージが、表示されていたりしないでしょうか？

Answer 1

流石に

    const btn = document.getElementsByTagName("input");
    const video = document.getElementsByTagName("video")[0];

はいらないもの拾ってきそうですね
というか管理バーにinputいますからね

処理対象の要素にはちゃんとクラスなりIDつけて
JSではそれを使って取得するようにして
いらないもの拾わないようにしましょう

バニラでやるならquerySelectorAllでいいんじゃないでしょうか

window.onload = () => {

これもダメです、他のJSとかが動く可能性のあるところで
安易にwindow.onload直上書きとか乱暴なことしちゃダメです

addEventListenerでやりましょう
イベントはDOMContentLoadedあたりでいいんじゃないでしょうかね

Comments

[退会済みユーザー]

回答ありがとうございます。初心者には専門用語が多くてよくわかりませんが、調べながらやってみます！