指定時間後に動画を再生させたい

Question

メインビジュアルの動画につきまして、jsでvideoを再生させるようにしています。
これを例えばページを開いて5秒後に再生を開始させるということをしたい場合、どのように記述すればよろしいでしょうか？
setTimeoutで記述してもそもそも書き方がおかしいのかうまくいかず、、
ご回答の程、よろしくお願いいたします。

<video id="video" autoplay muted loop>
      <source src="img/mv.mp4" class="playVideo" id="playVideo">
</video>

var log = function(){
    document.getElementById("video").play();
  };
  
  setTimeout(log, 5000);

Comments

[sousuke]

『setTimeoutで記述してもそもそも書き方がおかしいのかうまくいかず』
記述したそれを書いてください。

[退会済みユーザー]

コメントいただきありがとうございます。コード修正をいたしました。

[sousuke]

これautoplayタグにホントに書いてあるんですか？だとしたらすでに再生されてるんで何秒後にplay()しても無駄じゃないですかね

[退会済みユーザー]

autoplayをhtmlに書いていたのが問題でした...
仕組みをよくわかっておらずに記述してしまっていました。ありがとうございます。

Answer 1

どのように記述すればよろしいでしょうか？

HTMLから autoplay 属性を取り除いてください。

指定時間後に動画を再生させたい

AutoPlayPolicy に適合した**ミュートされた動画（video[muted]）**の場合、
autoplay 属性をつけると、ページを開くと直ぐに再生します。

そもそも書き方がおかしいのか

合っています。
関数名 log とのことですので、稼働確認後に適切な命名をされるのだと思いますが、
再度、関数内に console.log() を追記し、開発者コンソールで確認してください。

var log = function(){
  console.log("[setTimeout] after 5sec"); // 問題あるなら表示されない。
  document.getElementById("video").play();
};
setTimeout(log, 5000);

コメントでも指摘されていますが、再生中に「再生せよ」と命令しても無意味です。

Comments

[退会済みユーザー]

ありがとうございます！こちらで想像通りに動きました。
htmlにautoplayを付けてしまっていたのがまず問題でした...
ご丁寧に説明いただきありがとうございます。