アドセンス,アフィリエイト,ブログ,在宅ワーク

※本ブログはアフィリエイト広告を利用しています。
------------------------    

---

 

メディアにmp4の動画を取り込み、WordPressに埋め込んだら動画に再生速度のボタンが出なかったので、調べて対応してみました。

ちょっと不格好ですが無事に表示されたので、記録しておきます。

WordPressに埋め込んだ動画に再生速度のボタンを付ける方法

結論から言うと以下の手順で記述することでうまく行きました。

1. まず、javascript.jsファイルの内容を以下のコードに置き換えます：

document.addEventListener('DOMContentLoaded', function() {
// WordPressのすべてのvideoタグを取得
const videos = document.querySelectorAll('video');

videos.forEach(video => {
// 動画にカスタムコントロールを追加
const speedControlContainer = document.createElement('div');
speedControlContainer.className = 'speed-control-container';
speedControlContainer.style.position = 'absolute';
speedControlContainer.style.bottom = '10px';
speedControlContainer.style.right = '10px';
speedControlContainer.style.zIndex = '10';
speedControlContainer.style.background = 'rgba(0, 0, 0, 0.5)';
speedControlContainer.style.padding = '5px';
speedControlContainer.style.borderRadius = '5px';
speedControlContainer.innerHTML = `
<button class="speed-button" data-speed="0.5">0.5x</button>
<button class="speed-button" data-speed="1">1x</button>
<button class="speed-button" data-speed="1.5">1.5x</button>
<button class="speed-button" data-speed="2">2x</button>
`;

// 動画の親要素にカスタムコントロールを追加
video.parentNode.style.position = 'relative';
video.parentNode.appendChild(speedControlContainer);

// 各ボタンにクリックイベントを設定
speedControlContainer.querySelectorAll('.speed-button').forEach(button => {
button.addEventListener('click', (e) => {
const speed = parseFloat(e.target.getAttribute('data-speed'));
video.playbackRate = speed; // 再生速度を設定

// ボタンのスタイルをリセットしてから選択したボタンを強調表示
speedControlContainer.querySelectorAll('.speed-button').forEach(btn => btn.style.background = '');
e.target.style.background = 'rgba(255, 255, 255, 0.3)';
});
});
});
});

 

２，CSSスタイルを追加して、ボタンがきれいに表示されるようにします。次のCSSコードをテーマのCSSファイル、またはカスタムCSSのセクションに追加してください。

.speed-control-container .speed-button {
color: #fff;
background: transparent;
border: none;
font-size: 14px;
cursor: pointer;
margin: 0 3px;
}
.speed-control-container .speed-button:hover {
background: rgba(255, 255, 255, 0.3);
}

 

このようにすることでうまく行きました。

どうやってやり方を確認したか

私はコードに関する知識が殆ど無いため、チャットGPTに以下のように聞いてみました。

以下の埋込動画に再生速度を変えるボタンをつけたい。functions.phpにコードを追加して、サイト内のすべての動画に適用するには？

［video width＝"800" height＝"450" mp4＝"動画のURL.mp4"］[/video]

 

 

埋め込み動画のURLは記事内に動画を埋め込んだあとに表示されたURLをそのままコピペしました。

すると最初に書いたように丁寧に教えてくれましたよ。

コードが間違いだときちんと表示されないので、必ずChatGPTに確認して出てきたコードを貼り付けてくださいね。上手く行かないときは

「◯◯がうまく行きません。どうすればいいですか？」

と聞くとしっかり教えてくれますよ。

わからないことはAIに聞くと便利ですね。