Help us understand the problem. What is going on with this article?

はたして iPhone は iOS 10 なら動画を自動再生できるのか

More than 3 years have passed since last update.

結論から言えば可能になりました。
ただし、無音に限る。

Video要素で自動再生する

iOS10 Mobile Safariにおけるビデオの自動再生
↑すでに記事があったのでこちらでファイナルアンサーです。

一応自分も検証用にデモを用意したのでリンクだけ貼っておきます。
http://s.codepen.io/haribote/debug/qaVoav
※【大容量注意報】 携帯電話回線での閲覧は通信容量を消費するのでご注意ください!!

実装コード例

CodePen - video auto play より一部抜粋

<video src="path/to/video.mp4" width="1280" height="720" autoplay muted playsinline></video>

自動再生させるには autoplay, muted, playsinline の3つの属性を設定することが必要です。

YouTubeも自動再生できませんか…?

YouTubeのIFrame API を利用することで可能です!

こちらも検証用にデモを用意したのでリンク貼ります。
http://s.codepen.io/haribote/debug/NRwYXv
※【大容量注意報】 携帯電話回線での閲覧は通信容量を消費するのでご注意ください!!

実装コード例

CodePen - youtube auto play より一部抜粋

const scriptEl = document.createElement('script');
const headEl   = document.querySelector('head');

scriptEl.src = "https://www.youtube.com/iframe_api";
headEl.appendChild(scriptEl);

function onYouTubeIframeAPIReady() {
  const player = new YT.Player('video', {
    videoId: 'YE7VzlLtp-4',
    width: '1280',
    height: '720',
    playerVars: {
      playsinline: 1,
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  const player = event.target;

  player.mute();
  player.playVideo();
}

YT.Playerインスタンスを作るときに { playerVars: { playsinline: 1 } } を設定し、onReadyハンドラで mute() してから playVideo() すれば自動再生します!

できるからといってやって良いとは限らない

PCサイトでよく見る、トップページの背景に動画を再生させておくようなものをスマホ向けに作ろうと思うと、これまでは大量の画像を用意してパラパラ漫画の要領でcanvasに描き出す方式が一般的でした。
動作環境として iOS 9 が切れるようになったら(およそ1年後?)、そのような実装は必要なくなるかもしれません。
しかし動画にしてもパラパラ漫画にしても大容量のデータを必要とすることには変わりなく、通信容量制限のある携帯電話回線での閲覧を考えると安易な採用は控えるべきでしょう。
回線種別などを取得することのできるNetwork Information APIが多くのブラウザに実装されれば、「携帯電話回線では自動再生しない」などの振り分けも簡単なのですが…。
ということでスマホ向けに動画の自動再生(っぽいもの含め)を実装するなら用法・用量を守って正しく使ってね(←これが言いたかった)!

haribote
池袋 >>>>> (越えられない壁) >>>>> 渋谷 お察しください 😇 株式会社まぼろしというWeb制作会社でいろんな案件のJSを書いています。 http://maboroshi.biz/ <br>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした