ページリロード更新に時間がかかっても動画をはじめから再生したい｜javascript
動画をページトップに配置していたのですが、ページロードの時間がかかってしまう場合（ローディングアニメーションが作動中）、動画が先に再生してしまっていてページが表示された時には既に数秒再生されてしまうのを確認しました。
ページロードに多少時間がかかってしまう場合でも動画は初めから再生してほしいと思い、javascriptで実装しました。
window.onload = function() {
const spinner = document.getElementById('loading');
spinner.classList.add('loaded'); //ローディングアニメーションが終了してから
let myVideo = document.getElementById("myVideo"); //videoのidを取得
myVideo.load(); //動画を読み込んで
myVideo.play(); //動画を再生する
}
.load() と .play() をそれぞれ使用して、ビデオの読み込みと再生を手動でトリガーできます。
補足：
window.onload でウィンドウが読み込まれ始めたタイミングで、.getElementById() で取得したidを持つ要素に .classList.add で「loaded」のclassを付与します。
