前提・実現したいこと
なんとかお知恵をおかしください。
よろしくお願いいたします。
●ある程度の長さの動画(mp4)を、ボタンでチャプター+pauseがついている風に再生したいです。
●ボタン1押す→動画0秒~10秒を再生(10秒で止まる)
次にボタン2押す→続きの11秒~20秒を再生(20秒で止まる)
次にボタン3押す→続きの21秒~30秒を再生(30秒で止まる)……という感じです。
●ボタンを押したときに読み込み風な一瞬白くなったり、読み込みボタンが回ったりしない。
シームレスにつながった感じにしたいです。
●最終的にはMAC+なにかブラウザ(なんでも可)で動作させたいです。
発生している問題・エラーメッセージ
●ページを表示して、最初に押したボタン(どれでも)は意図したとおりに再生するのですが、
2番目以降に押すボタンでは、ボタン1(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で書き換える、というのも試したのですが、
今度は2番目以降に押したボタンの再生終了時間が効かなくなって、そのまま最後まで行ってしまう
&MAC+Safariで読み込みの白画面が一瞬出るので、これも行き詰まってしまいました……
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー