埋め込んだvideoタグがスマホのみ表示/再生されない時の対処法

WEB

今回は、videoタグを使ってWEBサイトのヘッダー下のメインビジュアル部分などに動画を埋め込んだ時にPCではしっかり表示して再生されるがスマホで見ると全く表示と再生がされない場合の対処法について紹介します。
(実際のWEB制作案件であった実例です。)

<video autoplay="" loop="" muted="" poster="images/exsample.jpg">
                        <source src="images/exsample.mp4" type="video/mp4">
                        <source src="images/exsample.mp4" type="video/webm">
                    </video>

今回記述した内容は上記のコードです。videoタグに「autoplay」「loop」と入れてmp4動画を埋め込みました。ループ再生と自動再生の動画をヘッダー下に埋め込んでいます。
この記述だとPC時には表示されて、スマホ時には表示されませんでした。

PC時
スマホ時

動画のサイズが大きすぎるからだと思い圧縮してみたがダメでした。コーデックに原因があるとか言う記事とかもありますが、私はWEB専門なので動画の事は詳しく無いのでとりあえず無視。わかる範囲で動画の書き込み方を変えてみたけどダメ。一周回って、そもそも記述の仕方が違うんじゃ無いかと色々と調べていたら、どうやら属性タグが足りてないからだったみたいです。

playsinline=””」と言う属性を追加したらスマホ時でも表示されました。(下記の様に)

<video autoplay="" loop="" muted="" playsinline="" poster="images/exsample.jpg">
                        <source src="images/exsample.mp4" type="video/mp4">
                        <source src="images/exsample.mp4" type="video/webm">
                    </video>

ひとまず、良かった。。。

ただ、動画の縦横比が維持されたままスマホに表示されるため上下のmargin、paddingが見えてきてしまいました。

動画は表示された。

この辺りは、メディアクエリ毎にスタイルを切り替える様にする事と、PC用動画とスマホ用動画を用意して振り分ける。そしてスマホ時に読み込む動画をスマホの画面幅に対して最適化しました。

そしたら下記の様に綺麗に表示され、しっかり再生されました。

最終的に上記の記述でしっかり表示はされたのですが、確認中にも何度か表示されなかった時がありました。その主な原因は下記の様な簡単な理由でした。

  • キャッシュが残っている。(スマホのキャッシュの消し方は少しややこしかった。)
  • 省電力モードになっていた。(このモードだと動画は再生されないらしい。)

スマホのキャッシュの消し方はこちら


以上が「埋め込んだvideoタグがスマホのみ表示/再生されない時の対処法」でした。

WEB制作で動画を埋め込む際は色々と注意しなくてはいけない点があります。
ここは私は苦手な部分なのでこれから学んでいきますが、とりあえずplaysinlineの属性は結構大事だと理解しました。

基本的に動画を埋め込むサイトの場合は、スマホ時の場合は画像に置き換えるのが常套手段かと思いますが、どうしても動画を埋め込みたい場合にこの様な時状態になったら試してみて下さい。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

WEB
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました