ＪａｖａｓｃｒｉｐｔにＭＰ４を再生したいものの、自動機能が上手くいかない。
htmlとJavascriptでアプリを作っている者です・・・。今回、MP4ファイルをJSに
組み込んでその画面になったら自動再生、次画面へ
移るコードを書いているのですが上手くいきません。
そうしている理由は・・・ゲーム結果を映画的表現にしたくて作っています。
一生懸命作った映像を見せたいところですが、
動かないのでここでは無理そうです。
疑惑コードは以下の様になりますが、さすがに今回は少し長めです。
理解していただける方が現れるのを望みます。
html
<!-- ムービー画面 -->
<div id = "screen1" class = "movie-screen" style = "display: none;">
<video id = "video1" src = "video1.mp4" controls autoplay></video><br>
<button onclick = "goToEndScreen()">スキップ</button>
</div>
慎重に１から説明しなければ伝わらないと思うので書きます。
screen1を親要素としてclassで画像サイズ、styleで画像事前隠し。
一応buttonでムービー飛ばしボタンも入れてます。
video1で映像表示、controls ＋ autoplayで自動再生にしたはずだが無効で。
Javascript
//ゲーム画面７(映画的画像)
function goToScreen1() {
changeScreen('game-screen7', 'screen1'); // 画面を切り替え
var video1 = document.getElementById('video1'); // ビデオ要素を取得
___
// ビデオ要素が存在するか確認
if (video1) {
video1.currentTime = 0; // 動画を最初から再生
// ユーザーインタラクションがあった場合にビデオを再生
video1.play().then(() => {
// 15秒後にエンディング画面へ遷移
setTimeout(function() {
goToEndScreen(); // 関数呼び出し
}, 15000);
}).catch(function(error) {
console.error('ビデオの自動再生に失敗しました: ', error);
// エラーが発生した場合、即座に次の画面へ移動
setTimeout(function() {
goToEndScreen(); // 関数呼び出し
}, 15000);
});
} else {
console.error('ビデオ要素が見つかりません: id="video1"を確認してください。');
}
}
___
//ボタン押すコード
function goToEndScreen() {
fadeOut(document.getElementById('screen1'), function() {
fadeIn(document.getElementById('end-screen'));
});
}
ちょっと長いですがこの通りです。
結果画面のgame-screen7からvideo1につながるscreen1と
エンディングにつながるend-screenとして設定してます。
currentTimeを入れないと映像が途中から始まっちゃいます。
そして映像は１４秒なので１５秒にEDへ移るよう
setTimeoutを書いたはずですが、なぜか機能せず。
記入ミスがあるなら良いですが、映像だけは最後まで
映っています。率直に自動機能だけ動いていないので、
原因を特定できるか御教授お願いしたいです。
ここまで辿り着くまでにエラー、バグが頻繫に・・・
アプリ開発がこんなに難しいとは思わなかったです。
今回は今までよりコードが多くて戸惑いますが、
ここを越えれば山が見えてくると・・・内容が理解できる方・・・お願いいたします。
0
