スマホでもプレイヤーを開くことなく、ページをロードしたらすぐに埋め込み動画を再生したい

Question

http://www.pandora.net/ja-jp/collections/winter
このサイトの下にある動画のように、スマホで見てもプレイヤーを起動させることなく、ページをロードしたらその場で再生させるにはどうしたら良いでしょうか？
私が書いたコードは以下のような感じです。

<video poster="画像" class="video" width="1070" id="video" preload="">
 <source src="動画.mp4">
 <source src="動画.webm">
</video>

var v = $('#video');
$(window).on('load', function(){
  v.play();
});

Answer 1

videoのmobileでの自動再生はさくっとわからないのですいません。

videoのinline再生に関してはwebkit-playsinline playsinlineを指定するとIOSでは可能です。

<video id="video" class="video" webkit-playsinline playsinline loop>
  <source src="./video.webm" type="video/webm">
  <source src="./video.mp4" type="video/mp4">
  <p>動画を再生できる環境ではありません。</p>
</video>

という感じです。

ただ、 webkit-playsinline playsinline はiOS用の属性なのでAndroidでは他の対応が必要の可能性もあります。

多分一番良い方法は従来の背景動画再生系と同じようにmobileではgifアニメにするのが一番いいかもしれないです。
また、javascriptのcanvasを使ってvideoタグのcurrentTimeを変化させそれを描画していく方法もありますがちょっとむずかしいかもしれません。。。

Comments

[退会済みユーザー]

currentTimeで調べてみたらできました！
そんな方法があったんですね。。。ありがとうございます。