スマフォでクリックイベント以外で動画を音あり再生させる（ように見せる）方法

結論

playbackRate を適切に使う

前提（および謝罪）

必ずクリックイベントは必要です（オイっ！）。
ただし音声動画を再生させたいタイミングとクリックのタイミングを 多少 ズレすことができます。

ユースケース

ガチャ的な演出で

1. スタートボタンを押す（ここではまだ音声動画を再生させたくない）
2. Canvasとかでなにかしら演出を描画
3. 最後に音声付き動画で〆る

方法

1. videoタグで動画を配置（playsinline属性をつける）
2. canplaythrough イベントを購読
3. load関数を発火（preload属性だとiOS系で canplaythrough までいかないため）
4. canplaythrough のコールバックが呼ばれたらスタートボタンを表示
5. スタートボタンの click イベントが呼ばれたら、そのスタック範囲内で video の playbackRate を 0.1 、 volume を 0 に設定し、 play 関数を発火する
6. 演出中
7. 演出が終わったら video の playbackRate と volume を 1 に戻す

以上で、あたかも演出終了後に音声動画が自動再生したかのように見せられます。

注意点

• 用意する動画の頭に 演出時間 × 0.1秒 の余白が必要
  • クリックと同時（演出と同時）に動画の再生自体は始まっているので、例えば演出が10秒ある場合、上記のステップ７で音あり再生が始まるのは動画の1秒目からになります。
• playbackRate を 0.1 より小さくするとブラウザによってエラーが起きるので最小値は0.1（だと思う）。
• IE11とかでは playbackRate が動きませんが、IE11だったら動画再生がクリックイベントのスタック内である必要はないので「スマフォはplaybackRate、PCは普通に任意のタイミングでplay」とする