エンジニアじゃないんだけど有識者に質問したくて

**仕様書無しさん** · 2023/05/26(金) 11:47:03.79

今WordPressを使ってサイトを作っていて、そのサイトでHTMLのvideo要素を使って動画を埋め込んでるんですが、動画があるページへの初回アクセス時その動画貼ってるところが背景真っ黒の再生ボタンに斜線が入ってるみたいになってちゃんと表示されないんです。リロードするとなぜか正しく表示されるんですが、、、
2度目以降正しく表示されるってことはHTMLの記述自体には問題はないのかなと思ってるんですが、如何せん知識がなくて原因を想定することもできず困っています。

ざっくりした情報で申し訳ないのですが、丸2日ここで詰まってて自力ではどうにもならなそうなのでご意見いただきたいです。

**仕様書無しさん** · 2023/05/26(金) 12:39:19.09

優秀なプログラマさんが現れるまでしばらくお待ちください

**仕様書無しさん** · 2023/05/26(金) 12:45:15.99

はい笑
お気遣いありがとうございます

**仕様書無しさん** · 2023/05/26(金) 12:49:10.32

>>1
WordPressで動画を埋め込んだ際に、初回アクセス時に背景が真っ黒の再生ボタンに斜線が表示される問題が発生しているようですね。その後のリロードでは正しく表示されるとのことです。
この問題は、ブラウザのキャッシュに関連している可能性があります。初回アクセス時にブラウザは動画のデータをまだキャッシュしていないため、正しく表示されずにデフォルトの再生ボタンが表示されるのかもしれません。

以下にいくつかの解決策を提案します：

キャッシュの無効化: WordPressのキャッシュプラグインやサーバーのキャッシュ設定が問題の原因となっている可能性があります。一時的にキャッシュを無効にしてみてください。または、別のブラウザやプライベートモードでのアクセスを試してみてください。もし問題が解決されれば、キャッシュの設定を見直す必要があるかもしれません。

JavaScriptの遅延読み込み: 動画を埋め込む部分をJavaScriptで遅延読み込みする方法も試してみる価値があります。これにより、ページが完全に読み込まれてから動画が表示されるため、正しく表示される可能性が高くなります。

テーマやプラグインの競合: 他のテーマやプラグインとの競合が原因で問題が発生している場合もあります。一時的にすべてのプラグインを無効化し、デフォルトのテーマに切り替えてみてください。もし正常に表示されれば、問題の原因はプラグインやテーマにある可能性があります。

コンテンツデリバリーネットワーク (CDN) の利用: もしまだ試していなければ、コンテンツデリバリーネットワーク (CDN) を使用してみてください。CDNは、動画やその他のコンテンツを高速に配信するためのネットワークです。CDNを使用することで、動画の読み込みがスムーズになる可能性があります。

上記のいずれかの方法を試してみてください。また、WordPressのバージョンや使用しているテーマやプラグインの詳細な情報を提供すると、より具体的なサポートができるかもしれません。

**仕様書無しさん** · 2023/05/26(金) 13:22:14.28

コメントありがとうございます。
＞WordPressのバージョンや使用しているテーマやプラグインの詳細な情報を提供すると、より具体的なサポートができるかもしれません。
失礼しました。WordPressバージョンは6.2.2　テーマはcocoonを使用しています。
有効化されているプラグインは以下です。
・CoBlocks（ページ作成の時に使えるコンテンツブロック追加）
・Favorites（サイトの各ページをお気に入り登録してサイト内でリストできる機能追加）
・Flexible Table Block（表作成ブロックの追加）
・Regenerate Thumbnails（サムネイルを一括で再生成できるプラグイン）
。Site Kit by Google
・Slide Anything - Responsive Content / HTML Slider and Carousel（カルーセルスライダーを作るためのプラグイン）

キャッシュの無効化
→MacでSafari、Google Chromeから、iPhoneでSafari、Google Chrome、Googleアプリからそれぞれアクセスを試し、それぞれ初回アクセス時はやはり同じ現象が起きました。
なのでキャッシュが関係しているのかなとは薄々思いつつ、対処法が全くわからないという状態でした。
WordPressやサーバーのキャッシュ設定というのはどこから確認できるものなのでしょうか、、質問ばかりですみません

JavaScriptの遅延読み込み
→遅延して読み込ませるということができればと思っていたのですがやはりjavascriptが必要ですよね。
もしお手数でなければWordPressのどこにどんなカスタマイズをすればjavascriptによる遅延読み込みができるか教えていただけないでしょうか、、、、
HTMLのvideoにpreload="none"やpreload="metadata"を追記することは試したのですが効果はありませんでした。

テーマやプラグインの競合
→テーマの変更やプラグインの無効化を試しましたが効果がありませんでした。

コンテンツデリバリーネットワーク (CDN) の利用
→cloud flareみたいなものでしょうか。一度使用を検討して調べていたのですが無料だとキャッシュルールが3つまでしか作れなくて不便だとか書かれているのをみて、それがどれだけ不便なのか判断もできず導入しませんでしたが、入れてみます。

**仕様書無しさん** · 2023/05/26(金) 13:46:47.28

安価つけ忘れてしまったので再度
>>4
コメントありがとうございます。
＞WordPressのバージョンや使用しているテーマやプラグインの詳細な情報を提供すると、より具体的なサポートができるかもしれません。
失礼しました。WordPressバージョンは6.2.2　テーマはcocoonを使用しています。
有効化されているプラグインは以下です。
・CoBlocks（ページ作成の時に使えるコンテンツブロック追加）
・Favorites（サイトの各ページをお気に入り登録してサイト内でリストできる機能追加）
・Flexible Table Block（表作成ブロックの追加）
・Regenerate Thumbnails（サムネイルを一括で再生成できるプラグイン）
。Site Kit by Google
・Slide Anything - Responsive Content / HTML Slider and Carousel（カルーセルスライダーを作るためのプラグイン）

キャッシュの無効化
→MacでSafari、Google Chromeから、iPhoneでSafari、Google Chrome、Googleアプリからそれぞれアクセスを試し、それぞれ初回アクセス時はやはり同じ現象が起きました。
なのでキャッシュが関係しているのかなとは薄々思いつつ、対処法が全くわからないという状態でした。
WordPressやサーバーのキャッシュ設定というのはどこから確認できるものなのでしょうか、、質問ばかりですみません

JavaScriptの遅延読み込み
→遅延して読み込ませるということができればと思っていたのですがやはりjavascriptが必要ですよね。
もしお手数でなければWordPressのどこにどんなカスタマイズをすればjavascriptによる遅延読み込みができるか教えていただけないでしょうか、、、、
HTMLのvideoにpreload="none"やpreload="metadata"を追記することは試したのですが効果はありませんでした。

テーマやプラグインの競合
→テーマの変更やプラグインの無効化を試しましたが効果がありませんでした。

コンテンツデリバリーネットワーク (CDN) の利用
→cloud flareみたいなものでしょうか。一度使用を検討して調べていたのですが無料だとキャッシュルールが3つまでしか作れなくて不便だとか書かれているのをみて、それがどれだけ不便なのか判断もできず導入しませんでしたが、入れてみます。

**仕様書無しさん** · 2023/05/26(金) 14:44:46.02

動画の形式とサイズも書いたほうがいいと思う。
要は最初のhtmlが落ちてきてブラウザがレンダリングしてる段階ではまだ動画が落ちてきてないから表示されてないってだけでは？
自分はそういう目的で使ったことないけど、video.jsみたいなライブラリを介して表示したら遅延読み込みとかはよしなにやってくれるんじゃないのかな。

**仕様書無しさん** · 2023/05/26(金) 15:27:23.07

>>7
失礼しました。形式はmp4なんですがサイズは動画によってバラバラで、、、1280×720が多いですね。
javascriptの知識が皆無なんでググったんですが
https://dezanari.com/videojs/#:~:text=Video.js%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%AF,%E3%81%A4%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%A0%E3%81%91%E3%81%A7%E3%81%99%E3%80%82
これって今記述してあるHTMLの<video>タグの部分に.video-jsクラスを追記するだけじゃ使えないですよね？
その前に書いてある下準備のような工程をこなさないとですよね。この「Video.jsをCDNで読み込み」というのはどういう行為を指してるんでしょうか。
そのままだろと言われるような質問かもしれないんですが、、

**仕様書無しさん** · 2023/05/28(日) 22:17:30.77

スレを立てたものです。
CDNの利用や、サーバキャッシュのプラグイン等試してはいますが現状改善されない状態です。
何か想定される原因や解決方法があれば教えていただきたいです。よろしくお願いいたします。

**仕様書無しさん** · 2023/05/29(月) 03:06:27.74

ファイルの場所の指定のあとに#t=0.1をつける、もしくはサムネイル画像をjpgとかで用意してthumbnail属性で指定する
type="video/mp4"属性をつける
10キロバイトとかの一瞬で読み込める動画ファイルで表示できるか試してみる

**仕様書無しさん** · 2023/05/29(月) 10:01:38.96

>>10
ファイル指定の後に#t=0.1とつけたところ解決しました！
ありがとうございます！！

**仕様書無しさん** · 2023/07/10(月) 05:21:48.98

( ￣з￣)y-｡o○ ｹﾞﾎ((＞o＜;))ｹﾞﾎ ○o｡―y(￣ε￣ )

**仕様書無しさん** · 2024/03/29(金) 14:18:58.61

健康診断があったなぁ

**仕様書無しさん** · 2024/03/29(金) 16:11:40.61

ヒロキのこと知らないから

**仕様書無しさん** · 2024/03/29(金) 16:14:32.68

>>6

しかし

ダイエットは