加藤祐介ブログ

HTMLのvideoタグで貼った動画のサムネイルがSafariで表示されない問題を解決

記事投稿日: 2024年9月25日（水）

最終更新日: 2024年9月25日（水）

目次

はじめに

HTMLのvideoタグで貼った動画のサムネイルがSafariで表示されない問題を解決します。

Safariでサムネイルが表示されない問題

Chromeだと動画のサムネイルは表示されるのですが、Safariだと表示されませんでした。

サムネイルを表示するための設定方法

動画ファイルのパスを指定するときに、開始地点の秒数も指定するとSafariでもサムネイルが表示されるようになりました。 下記のようにt=0.1と指定すると開始時間を0.1に設定できます。 

src="sample.mp4#t=0.1"

おわりに

HTML上で貼った動画のサムネイルをSafariでも表示できるようになりました。

お知らせ

過去のお知らせ

シリーズ記事一覧

各シリーズの記事を下記にまとめてあります。

我が家のインコ「れもん＆ぽぽ＆ぐぐ」の日記 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記16 : れもんが本に掲載されたり、愛鳥祭に行ったりなど 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記15 : 落花生、新聞紙、れもんとぐぐの邂逅 インコの飼い方と注意点（2024年版） 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記14 : 大人に近づくれもんと遊ぶ余裕が出てきたぐぐ 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記13 : 生後4ヶ月を迎えたれもんと我が家に慣れてきたぐぐ 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記12 : ぽぽが亡くなりました、そしてぐぐがやってきました インコ仲間「れもん&ぽぽ」の日記11 : ズグロシロハラインコのぽぽ、我が家へ セキセイインコ「れもん」の日記10 : 生後100日のれもん、ついに喋る セキセイインコ「れもん」の日記9 : 換羽期のれもん セキセイインコ「れもん」の日記8 : 病院へ挑戦！ セキセイインコ「れもん」の日記7 : 外出用ゲージにチャレンジ！ セキセイインコ「れもん」の日記6 : 新宿ことり博に行ってきました！ セキセイインコ「れもん」の日記5 : 3週間経って順調に成長している模様 セキセイインコ「れもん」の日記4 : 鳥フェス千葉2024に行ってきました！ セキセイインコ「れもん」の日記3 : 2週間経って我が家にも慣れてきた模様 セキセイインコ「れもん」の日記：第2回 セキセイインコの「れもん」が我が家にやってきました！
AlpacaHackで始めるCTF入門 AlpacaHackで始めるCTF入門6：AlpacaHack Round 4 - Simple Flag Checkerに挑戦 AlpacaHackで始めるCTF入門5：AlpacaHack Round 3 - qrimeに挑戦 AlpacaHackで始めるCTF入門4：AlpacaHack Round 2 - Simple Loginに挑戦 AlpacaHackで始めるCTF入門3：初めてのCTFに参加 AlpacaHackで始めるCTF入門2：DreamhackでCTF入門 AlpacaHackで始めるCTF入門1：初めてのCTF
シェル芸 第66回シェル芸勉強会メモ 第64回シェル芸勉強会メモ ChatGPTでシェル芸勉強会の問題が解きたい シェル芸botで遊びたい（Bash）
ROS 2 改訂新版『ROS 2ではじめよう』を読了&メモ書き ROS 2 Jazzy公式チュートリアル02: ROS 2のノードとトピックについて ROS 2 Jazzy公式チュートリアル01: ROS 2 Jazzyのインストールから動作確認まで ROS 2 Humble 公式チュートリアル 02: ROS 2 のノード関係のコマンド ROS 2 Humble 公式チュートリアル 01: 環境構築から turtlesim まで
読書日記 改訂新版『ROS 2ではじめよう』を読了&メモ書き
映画日記 映画日記『ラストマイル』感想【ネタバレあり】
料理日記 料理日記：豆腐春巻き 料理日記：鶏肉とナスのほりにし炒め 料理日記：卵焼き 料理日記：鶏肉の照り焼き&小松菜のおひたし 料理日記：納豆蕎麦 料理日記：ローストビーフ 料理日記：バターガーリックチキン
その他 HTMLのvideoタグで貼った動画のサムネイルがSafariで表示されない問題を解決 WSL2上のUbuntuのVimで矩形選択するための設定 JR東日本公式のお忘れ物チャットにお世話になった話 HTMLとCSSで画像のスライドショーを作成 GitHub Actionsでサーバ上のブログを自動更新 『Omega Crafter』プレイ日記: チュートリアル編 自作ブログ大改造計画 Windows と Ubuntu のデュアルブート HTML数式表示テスト 自作ブログ開始

加藤祐介ブログの著作物はCC BY-NC-ND 4.0で公開されています。
加藤祐介ブログのソフトウェアはApache License 2.0で公開されています。
About License: GitHub - YusukeKatoBlog/LICENSE
© 2023 YusukeKato All Rights Reserved.