Q&A
よく分からないですが、参考までに2点ほど情報を。
・addしたEventListenerはremoveしないと残ります
・再生開始時に今止まっている時間を推定する処理を入れて、再開するのかseekするのか判定できると…
前提・実現したいこと
なんとかお知恵をおかしください。
よろしくお願いいたします。
●ある程度の長さの動画（mp4）を、ボタンでチャプター＋pauseがついている風に再生したいです。
●ボタン１押す→動画0秒～10秒を再生（10秒で止まる）
次にボタン2押す→続きの11秒～20秒を再生（20秒で止まる）
次にボタン3押す→続きの21秒～30秒を再生（30秒で止まる）……という感じです。
●ボタンを押したときに読み込み風な一瞬白くなったり、読み込みボタンが回ったりしない。
シームレスにつながった感じにしたいです。
●最終的にはMAC＋なにかブラウザ（なんでも可）で動作させたいです。
発生している問題・エラーメッセージ
●ページを表示して、最初に押したボタン（どれでも）は意図したとおりに再生するのですが、
２番目以降に押すボタンでは、ボタン１（0秒から再生）以外は静止してしまって再生してくれない。
該当のソースコード
<body> <video id="mv" src="mov/test.mp4" width="60%" controls></video> <button type="button" onclick="goZero()">最初から再生</button> <button type="button" onclick="go10sec()">10秒から再生</button> <button type="button" onclick="go20sec()">20秒から再生</button> <script> //videoオブジェクトの取得 var media = document.getElementById("mv"); //0秒から再生 function goZero() { media.currentTime = 0; //先頭に戻す media.play(); media.addEventListener("timeupdate", function(){ if(media.currentTime >= 10) { // 終了 10秒 media.pause(); } }); } //10秒から再生 function go10sec() { media.currentTime = 11; //11秒に移動 media.play(); media.addEventListener("timeupdate", function(){ if(media.currentTime >= 20) { // 終了 20秒 media.pause(); } }); } //20秒から再生 function go20sec() { media.currentTime = 21; //21秒に移動 media.play(); media.addEventListener("timeupdate", function(){ if(media.currentTime >= 30) { // 終了 30秒 media.pause(); } }); } </script> </body>
試したこと
var mydiv = document.getElementById("mv");
mydiv.innerHTML = '<source src="mov/test.mp4#t=0.0,10.0">';
mv.play();
代わりに#t=で時間指定したものをinnerHTMLで書き換える、というのも試したのですが、
今度は２番目以降に押したボタンの再生終了時間が効かなくなって、そのまま最後まで行ってしまう
＆MAC＋Safariで読み込みの白画面が一瞬出るので、これも行き詰まってしまいました……
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
コメントありがとうございます！
いただいたコメントからなんとか修正をしてみたいのですが、
私の浅薄な知識ではどう書いていいのか想像できず…
できればもう少し解説＆アドバイスいただけないでしょうか…
よろしくお願いいたします。。。
最初のやつについては、
・addEventListenerは指定したeventが発火されたら何度でも呼ばれます。
・そして、複数のEventListenerをaddできます。
2つ目の方については1つ目に対処して動いてからもう一度読んでください。
お返事遅くなりました、すみません！
なんとか試してみようと思います。（自信ありませんが。。。）
またご相談させてくださいー！
あなたの回答
tips
プレビュー
