1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

macOSのSafariでautoplayのvideoタグに再生ボタンが出てしまう件

Last updated at Posted at 2024-10-31

最近あまりウェブやってなかったのですが、質問されたので調べました。

現象

論より証拠
https://tom-gs.com/demo/video/

<video
  id="js-movieBgEmbed"
  class="movie"
  src="mov_hts-samp009.mp4"
  width="800"
  muted loop autoplay playsinline
>
</video>

動画
https://www.home-movie.biz/free_movie.html

macos_safari_lowpowermode_01.png

原因

原因としては、低電力モードのmasOSのSafariだからです。
自分が確認したのはmacOSだったのですが、iOSでも出るっぽいです。

そうは言っても他サイトでは再生できているのでは?
なにか再生させる方法があるのでは?
と思って調べて見ました。

結論から言うと低電力モードのmacOSのSafariで、autoplayのvideoタグを再生させる方法はなく、再生ボタンが出てしまうのは仕方がないようです。

例えばアニメ怪獣8号のウェブサイトなどを見てもらうとわかると思います。
再生ボタンが出ていて、クリックできなくなっていると思います。
サイトによってはレイアウトの都合で再生ボタンが押せなくなっていることがあるみたいです。
ほとんどそうなのではないかと思います。
映画やアニメのサイトに多いと思います。

解決方法

解決方法はありません。
onloadイベントにフックして、JavaScriptで再生させようとしてもSafariがエラーを吐きます。
まぁ低電力モードで、電池が減るようなことができてしまっては元も子もない、ということなんでしょう。

ちなみにそれと気づかず報告されことがあるので、説明して納得してもらうしかないのかなと。

さらにこれはSafariだけで発生します。
Chrome、Firefox、Vivaldi、Edgeは動画が再生されてました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?