動画を定刻に再生したい

Question

前提・実現したいこと

YouTubeのプレミア公開みたいな、設定した時間に自動で動画が再生されるサイトを作りたいです。
色々試してみたんですが、うまくいかないので、教えてください????‍♂️

該当のソースコード

    <video id="movie" src="other/movie.mp4" preload="auto"></video>

function start() {
    var startTime = new Date(2021, 4, 25, 9, 45, 00);
    var now = new Date();
    var startTime = (startTime.getTime() - now.getTime()) / 1000;

    if(startTime < 0){
        document.getElementById('movie').play();
    }
}
setInterval(start, 50);

試したこと

if文で時間になったら実行するということは実装できました。
ぴったりじゃなくてもいいので、そのif文を使って定刻に動画の再生をしたです。(追記)
どのようにしたら再生できますか？(追記)

別で動画を再生するだけのページを作って、そこへ飛ばすことも考えましたが、
ロードに時間がかかり、時間ぴったりに再生することができませんでした。

Comments

[AbeTakashi]

クライアント側だけで制御すとなるとロードに時間がかかるのは防ぎようがないですし、ぴったりに再生は難しいんじゃないですかね？　さらにYoutubeのプレミア公開みたいにとなれば、サーバ側でも色々と複雑なことやらないと無理だと思いますし、そもそもYoutubeのプレミアもそこまで時間ぴったりですかね？　もう少し要件を整理した方がいいかもしれません。

[muchan]

ぴったりでなくてもいいので、定刻に動画を再生するということをしたいです。
何か方法があれば、教えていただけると幸いです。

Answer 1

ストリーミング処理で実行時間の数秒前から再生すればよいのでは？

Answer 2

再生ボタンを作り、if文で時間になったらボタンをクリックされるようにしました。ちなみにcssでボタンを非表示にしました。

    <video id="movie" src="other/movie.mp4" preload="auto"></video>
    <form>
    <button type="button" id="play" onclick="movplay(0)">再生</button>
    <button type="button" id="pause" onclick="movplay(1)">一時停止</button>
    </form>

//動画再生ボタン
function movplay(num)
{
  var obj = document.getElementById("movie");
  var n = parseInt(num);
  if ( n == 0 )
  {
    obj.play();
  }
  else
  {
    obj.pause();
  }
}

//動画スタート
function start() {
    var myBirthTime = new Date(2021, 4, 29, 22, 32, 00);
    var now = new Date();
    var startTime = (myBirthTime.getTime() - now.getTime()) / 1000;

    if(startTime < -10){
    }else if(startTime < 0){
      document.getElementById("play").click();
    }
}
setInterval(start, 50);

#play,
#pause{
    display: none;
}