質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    19775questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11050questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

動画にチャプター+pauseをつけたような動作

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 149

sue

score 2

前提・実現したいこと

なんとかお知恵をおかしください。
よろしくお願いいたします。

●ある程度の長さの動画(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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • wwbQzhMkhhgEmhU

    2019/01/23 18:45

    よく分からないですが、参考までに2点ほど情報を。
    ・addしたEventListenerはremoveしないと残ります
    ・再生開始時に今止まっている時間を推定する処理を入れて、再開するのかseekするのか判定できると…

    キャンセル

  • sue

    2019/01/24 11:46

    コメントありがとうございます!
    いただいたコメントからなんとか修正をしてみたいのですが、
    私の浅薄な知識ではどう書いていいのか想像できず…
    できればもう少し解説&アドバイスいただけないでしょうか…

    よろしくお願いいたします。。。

    キャンセル

  • wwbQzhMkhhgEmhU

    2019/01/24 14:05

    最初のやつについては、
    ・addEventListenerは指定したeventが発火されたら何度でも呼ばれます。
    ・そして、複数のEventListenerをaddできます。
    2つ目の方については1つ目に対処して動いてからもう一度読んでください。

    キャンセル

  • sue

    2019/01/28 12:05

    お返事遅くなりました、すみません!
    なんとか試してみようと思います。(自信ありませんが。。。)
    またご相談させてくださいー!

    キャンセル

まだ回答がついていません

同じタグがついた質問を見る

  • JavaScript

    19775questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11050questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。