【エラー解決】videoタグのposter属性に指定したサムネイル画像が表示されない時の解決方法

videoタグを使ってmp4動画を埋め込む際、videoタグのposter属性を使用してサムネイル画像を設定す

さて、通常であれば上記でお伝えした通りposter属性を指定するだけでサムネイル画像を指定することが出来ますが、ブラウザや端末、環境によっては表示されないことがありました。この現象に遭遇した際、表示されなかったのはMacbook ProのSafariでした。ただし、全てのMacbook ProのSafariでこの現象が起こったわけでは無いのでどのような時にposter属性が反映されないかは分かりませんでした。

このように動画ファイルの末尾に #t=0.001 と指定します。

JavaScriptで動画を最初から再生する

START

videoタグの controls属性は削除します。多分JavaScriptで再生ボタンを押したことを検知できると思いますが、ちょっとやり方が分かりませんでした。そのため自分で再生ボタンを作ります。

function videostart()

id=”start-btn”をクリックした際、ユーザー定義関数videostartが処理されるよう onclick="videostart()" と記述します。

video.currentTime = 0; video.play();

videoタグに関する関連記事

【エラー解決】WEBサイトに埋め込んだ動画が自動再生されない時の解決方法 WEBサイトのメインビジュアルを動画にしているサイトは多くあります。自分でも同様にメインビジュアルを動画にして設置した際 […]

PICK UP!

【コピペOK】WEBデザインで使えるシンプルなボタンデザイン18選 RELEASE:2024.06.13 【アニメーション】スクロールに合わせて画像を表示するCSSサンプルコード10選 RELEASE:2024.06.11 【コピペOK】ボタンにホバーした時のCSSアニメーション15選 RELEASE:2024.06.09 【コピペOK】画像にホバーした時のCSSアニメーション20選 RELEASE:2024.06.08 【コピペOK】WEBサイトでよく使う見出しデザイン RELEASE:2023.11.22

ADD

NEW RELEASE

【JS不要！】CSSだけでスムーススクロールを実装する方法 RELEASE:2025.04.24 【WordPress】非公開記事のタイトルに付く「非公開:」を消す方法 RELEASE:2025.04.19 【WordPress】特定のカテゴリを除外して前の記事・次の記事のリンクURLを取得する方法 RELEASE:2025.04.18 【CSS】テキストのグラデーションをアニメーションさせる方法 RELEASE:2025.04.15 【Swiper】マスク効果で切り替えるアニメーションの実装方法 RELEASE:2025.04.14 【Basic認証】特定のディレクトリのみ認証を除外する方法・別の認証を設定する方法 RELEASE:2025.04.13 【Contact Form 7】送信先メールアドレスを複数設定する方法 RELEASE:2025.04.12 【PHP】日本語ファイルも対応！pathinfo()でファイル名を取得する方法 RELEASE:2024.08.25 【HTML／CSS】画像の一部分だけにモザイクをかける方法 RELEASE:2024.08.24 【HTML／CSS】レスポンシブ！PCとスマホで違う画像に切り替えて表示する方法 RELEASE:2024.08.23 【WordPress】プラグイン不要！カスタム投稿で「先頭に固定表示」する方法 RELEASE:2024.08.22 【HTML／CSS】aタグの中でaタグを使いたい時のコーディング方法 RELEASE:2024.08.21 【Contact Form 7】チェックボックスのデザインを変更する方法 RELEASE:2024.08.20 【CSS】斜めの背景やリンクを設定する方法 RELEASE:2024.08.19 【WordPress】ログイン環境だけテーマを切り替えるプラグイン「Theme Switcha」 RELEASE:2024.08.18

ADD

RANKING

【PHPエラー】Warning: Undefined array key…の解決方法 RELEASE:2024.02.09 【Smart Custom Fields】SCFの使い方・出力方法 RELEASE:2022.08.01 【PHPエラー】Warning: Undefined variableの解決方法 RELEASE:2023.10.31 【PHPエラー】Parse error: syntax error, unexpectedの解決方法 RELEASE:2024.02.18 【テクニック】CSSでもっと見るボタンを実装する方法 RELEASE:2022.12.25 【PHPエラー】Warning: Array to string conversion inの解決方法 RELEASE:2024.02.20 【コピペ】CSSで矢印を作る方法／サンプルコード RELEASE:2024.02.10 【バリデーション】電話番号｜フォームの入力形式チェックを実装する方法 RELEASE:2023.10.25 【コピペOK】画像にホバーした時のCSSアニメーション20選 RELEASE:2024.06.08 【テクニック】aタグのリンクを無効にする方法 RELEASE:2024.01.16 【テクニック】電話番号に自動でリンク設定される機能を無効にする方法 RELEASE:2023.12.23 【Contact Form 7】選択項目ごとにメール送信先を変更する方法 RELEASE:2023.11.08 【PHPエラー】Fatal error: Call to undefined functionの解決方法 RELEASE:2023.11.03 【2024年版】YouTube動画再生後の関連動画を非表示にする方法 RELEASE:2024.02.22 【アニメーション】スクロールに合わせて画像を表示するCSSサンプルコード10選 RELEASE:2024.06.11

ADD

フリーランス・SOHO｜WEB 制作一筋丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN