エンジニアじゃないんだけど有識者に質問したくて (15ﾚｽ)
上下前次1-新
1(1): 2023/05/26(金)11:47 AAS
今WordPressを使ってサイトを作っていて、そのサイトでHTMLのvideo要素を使って動画を埋め込んでるんですが、動画があるページへの初回アクセス時その動画貼ってるところが背景真っ黒の再生ボタンに斜線が入ってるみたいになってちゃんと表示されないんです。リロードするとなぜか正しく表示されるんですが、、、
2度目以降正しく表示されるってことはHTMLの記述自体には問題はないのかなと思ってるんですが、如何せん知識がなくて原因を想定することもできず困っています。
ざっくりした情報で申し訳ないのですが、丸2日ここで詰まってて自力ではどうにもならなそうなのでご意見いただきたいです。
2: 2023/05/26(金)12:39 AAS
優秀なプログラマさんが現れるまでしばらくお待ちください
3: 2023/05/26(金)12:45 AAS
はい笑
お気遣いありがとうございます
4(1): 2023/05/26(金)12:49 AAS
>>1
WordPressで動画を埋め込んだ際に、初回アクセス時に背景が真っ黒の再生ボタンに斜線が表示される問題が発生しているようですね。その後のリロードでは正しく表示されるとのことです。
この問題は、ブラウザのキャッシュに関連している可能性があります。初回アクセス時にブラウザは動画のデータをまだキャッシュしていないため、正しく表示されずにデフォルトの再生ボタンが表示されるのかもしれません。
以下にいくつかの解決策を提案します：
キャッシュの無効化: WordPressのキャッシュプラグインやサーバーのキャッシュ設定が問題の原因となっている可能性があります。一時的にキャッシュを無効にしてみてください。または、別のブラウザやプライベートモードでのアクセスを試してみてください。もし問題が解決されれば、キャッシュの設定を見直す必要があるかもしれません。
JavaScriptの遅延読み込み: 動画を埋め込む部分をJavaScriptで遅延読み込みする方法も試してみる価値があります。これにより、ページが完全に読み込まれてから動画が表示されるため、正しく表示される可能性が高くなります。
テーマやプラグインの競合: 他のテーマやプラグインとの競合が原因で問題が発生している場合もあります。一時的にすべてのプラグインを無効化し、デフォルトのテーマに切り替えてみてください。もし正常に表示されれば、問題の原因はプラグインやテーマにある可能性があります。
コンテンツデリバリーネットワーク (CDN) の利用: もしまだ試していなければ、コンテンツデリバリーネットワーク (CDN) を使用してみてください。CDNは、動画やその他のコンテンツを高速に配信するためのネットワークです。CDNを使用することで、動画の読み込みがスムーズになる可能性があります。
上記のいずれかの方法を試してみてください。また、WordPressのバージョンや使用しているテーマやプラグインの詳細な情報を提供すると、より具体的なサポートができるかもしれません。
5: 2023/05/26(金)13:22 AAS
コメントありがとうございます。
＞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つまでしか作れなくて不便だとか書かれているのをみて、それがどれだけ不便なのか判断もできず導入しませんでしたが、入れてみます。
6(1): 2023/05/26(金)13:46 AAS
安価つけ忘れてしまったので再度
>>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つまでしか作れなくて不便だとか書かれているのをみて、それがどれだけ不便なのか判断もできず導入しませんでしたが、入れてみます。
上下前次1-新書関写板覧索設栞歴
あと 9 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.004s