文字

[非一時停止・Jquery]audio・videoタグで完全な停止をする方法[ミニクイズゲー進捗7]
公開:2020.07.03 更新:2020.07.03

こんにてゃらいどらです。

かなりのお久しぶりとなりました。空き期間はサーバー移行とドメイン移行を別々にやってたり、エラーを頑張って直したりしてました。

後はシャドバしてました(おい

今回は一昨日ほどにやった作業のメモとなります。

何を直してたかというと、無論クイズゲーのバグですね。↓

ゲームの中のクイズで正解すると正解音(ピンポン)や間違えると爆発音が鳴る仕組みでしたが、あまり連続で回答すると、音や動画が鳴らない(表示はされる)っていう感じになってたので、自分で遊ぶためにもこれは直しといた方がいいな。ということで。

原因としては、まだ動画や音声の再生中なのに、また再生の命令が入るので、

プログラム「今は再生中だ!おら!」

となっていました。

改良案としては回答処理の時にまだaudioやvideoが再生中ならif分岐で一度、音源等を停止させて、再生処理に移す。これですね。これならまともに動くはずです。

「再生中なら~」の判定文は前回やっていたのでわかりました

if($("#audioまたはvideoタグのid")[0].played){
//再生中なら
}

しかし、停止処理の下記文(stop)が動きませんでした。

$("#id").get(0).stop();

念の為の補足:Jqueryの場合は、video,audio操作の際、idの後にget(0)もしくは[0]を記述しないと働きません。参考:https://arrown-blog.com/jquery-html5-tag/

調べてみると、どうもstop()は既に現verで廃止された構文とのこと。同じことをするにはpause();で一度止めてから、再生時間を0地点まで動かすしかないとのことです。

ソースページの回答者(恐らくは本職)の方は、なぜstopを廃止したのか分からないと、かなり不思議に思ってらしたので、stopが廃止されたという信憑性は間違いないです。(リンクは忘れたので貼れません、すみません)

こっからも小二時間ぐらいネットサーフィンしましたが、詳しく載ってるサイトはなかなかなく…..。

Jqueryを使わない文ならかなり載ってましたが、どうも場所分けるの面倒だったので、こだわって探し続けたところ、ようやく解決しました。(Jquery無しならgetElementByldから要素を取得して、”要素.currentTime = 再生時間”)

同じような状況のプログラム質問箱は英語サイトしか無かったので、しばらくひどい翻訳のトンチキな文を眺めていました。

正解から言うと、Jquery構文的にも下のもので間違いないです。

$("#id").get(0).pause();
$("#id").get(0).currentTime = 0;

Jqueryで代入のようにイコールを差す文は初めて見たのでかなり疑いましたが、問題なく動きました。

良かったです…..。

ついでに解決した部分全文公開すると↓

if($("#ngbrn")[0].played){
     $("#ngbrn").get(0).pause();
     $("#ngbrn").get(0).currentTime = 0;
 } //爆発動画をまだ再生しているなら
if($("#audbn")[0].played){
     $("#audbn").get(0).pause();
     $("#audbn").get(0).currentTime = 0;
 } //爆発音をまだ再生しているなら
     $("#ngbrn").get(0).play();
     $("#audbn").get(0).play();

役に立てば幸いです。

余談ですが、そろそろクイズゲーの方も残る作業は

  • footerにランダムな雑学を一定時間挿入
  • 問題エリア・回答エリア共にちゃんとしたフォントの設定

ぐらいになりました。そろそろ本公開するかもです。

出たらよろしくですよ~

おすすめ商品

巻末にHTML講座あったりするコミックだよ

言わずと知れる原作読めムーブ

コメント

内容をご確認の上、送信してください。