BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
サイトに動画を埋め込むことってありますよね。
youtubeはiframeでの埋め込みをしますが、videoタグで埋め込む場合もあります。

しかし、こんなエラーがありました。
PCでvideoタグが正常に動くのにiphoneで動かない。。

解決方法は2つあります。

①videoタグに「playsinline」を追加する

autoplayとautoplay、muted属性をそれぞれ追加していて、かつ動画の音声も消しましょう。
「safari」だと音声を消していないと再生されないそうです。

それでも再生されない場合はこちら

②iphoneの「低電力モード」をオフにする

これが意外と見落としがちなんです。
デベロッパーツールでもAndroidでも確認できるのに、なぜかiphoneだけ再生されないことがありました。
autoplayとautoplay、muted属性をそれぞれ追加していて、かつ動画の音声も消しているのに…

もう一度言います「iphoneの低電力モードをオフにする」これで解決です!

おまけ

videoタグの属性

属性 効果
src 動画ファイルの指定
controls 操作パネルの表示
autoplay 動画の自動再生
loop 繰り返し再生
muted 無音再生
preload 動画をあらかじめ読み込む
poster 動画のヒントとなる画像を表示する
width 幅を指定する
height 高さを指定する
playsinline インライン再生の対応(safari)
onclick=”this.play();” android端末の対応