ボタンで配列に代入

解決済

質問者：ぽん太1号
質問日時：2020/10/17 20:05
回答数：3件

javascript cuepoint.jsで、動画に字幕をつけようと思います。slidesに配列変数があり、
var slides=
{ｎ秒： “文章”,
ｎ秒： “文章”
ｎ秒： “文章”.}
秒と文章の間はコロン、途中はカンマ、最後はドットと続けることになってます。
映画の字幕が、本来の使い方と思いますが、私はバスケ動画の得点者を字幕として出そうと思います。
さとう、やまだ、と選手達の名前のボタンを用意して、シュートが決まったら何分何秒、やまだ、と出るようにしたいと思います。

ボタンを押したらvalue値を取得して変数の文章のところに書き込みをしたいのですがどうしたら良いでしょう。
<button type="button" name="button1" value="やまだ">

<script>
時間は動画のcurrenttime、ボタンのバリュー値を取ってきてslides.push {ct :value}でいけるのかなと思ったのですが式が組み立てられません。
この時、行が続く場合は,をつけてあげなければいけません。

よろしくご指導ください。

教えていただけないでしょうか。

回答ありがとうございます。
おっしゃる通り、ボタン操作により字幕を作りたいという質問でした。字幕データは,で繋いでいました。
＞var slides=
＞{ｎ秒： “文章”,
＞ｎ秒： “文章”,
＞ｎ秒： “文章"}
でした。アイデアをいただけたので頑張ってみます。

補足日時：2020/10/18 10:56
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2020/10/18 10:18

こんにちは。

なさりたいことがよくわかりませんが、字幕なしの動画を再生して、タイミングをみてボタンを押すことによって、字幕用のデータを作成したいということかと解釈しました。
違っている場合は、スルーしてください。

＞var slides=
＞{ｎ秒： “文章”,
＞ｎ秒： “文章”
＞ｎ秒： “文章”.}
通常のオブジェクトリテラルで考えると、カンマが抜けていてドットが余分ですが、スクリプトの文法エラーにはならないのでしょうか？

＞ボタンのバリュー値を取ってきてslides.push {ct :value}で
＞いけるのかなと思ったのですが式が組み立てられません。
変数ctにタイミングは取得できているものとします。
pushは配列のメソッドなので、オブジェクトには直接には使えません。
オブジェクトにプロパティを追加する場合は、
　object.[ key ] = value
の形式を使用してください。
どうしてもpushにしたければ、
　Array.push.call( object , { key, value } )
のような方法でも可能だと思います。

＞この時、行が続く場合は,をつけてあげなければいけません
カンマが必要なのはリテラル記法の場合なので、スクリプト上では関係ありません。
出力時、あるいは、これをデータ化する際には必要になるでしょうけれど。

- 0
- 件

通報する

この回答へのお礼

うれしい

ありがとうございます！まさに的を射た回答戴きました。字幕は独自のプラグインが必要と思ってましたがそのままいけるんですね。
ボタンを押した時、田中ついに来たー！とかそんなコメントも作ろうと思ってたのでdata-comの内容もよかったです。
お話にもありましたが、ここから色々広がりそうです。ありがとうございました！

通報する

お礼日時：2020/10/21 18:32

参考程度に

No.3

回答者： fujillin
回答日時：2020/10/21 14:47

No2です。

少し時間が取れたので、自分の勉強も兼ねて、似た感じのものを作ってみました。
WebVTT用のデータのネタができれば良さそうですので、それを極く簡略化した最低限的なものです。

・「記録」ボタンを押すとビデオが再生されますが、再生中に名前のボタンを押すと、あらかじめボタンに登録された内容が字幕として登録（表示）されます。
同時に、右側の「リスト欄」には、記録した内容がキュー形式で表示されます。
・記録した内容を再生して確認する際は、「再生」のボタンのほうを押します。

記録済の内容を修正したり、あるいは右側のリストをテキスト編集すると反映されるなどといった機能はありませんが、そのような便利機能を追加するなどしてゆくと、それなりに使えるようになったりするのではないかと・・・。

以下、ご参考までに。
（Chrome と fx で動作確認しています）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style>
#wrap{
display:flex;
justify-content: space-between;
}
#wrap>div{ width:66%; }
#wrap>div+div{ width:32%; border:1px solid grey; }
#wrap video{ width:100%; }
#wrap>div+div>div{
background-color:#CDF; text-align:center;
}
#wrap ul{
list-style-type:none; padding:0; margin:0;
height:90vh; overflow:auto;
}
#wrap li{ margin-bottom:0.8em; }
#wrap li span{ font-size:0.8em; }
#wrap li span+span::before{ content: " --> "; }
#wrap li p{ margin:0; }

#wrap input{
display:inline-block; width:5em; margin:1em 1.5em;
}
#wrap .control input{
width:9em; margin:2em 1.5em; background-color:#FCC;
}
#wrap .control input:disabled{ background-color:#EDD; border:0; }
</style>

<script>
window.addEventListener('load', ()=>{

const pad = (v, n=2) => (v<Math.pow(10, n-1))?('00' + v).substr(-n):v;
const sec2cue = (v)=>{
let t = pad( (v/60/60) | 0) + ':' + pad(((v/60) % 60) | 0);
t += ':' + pad(v % 60 | 0) + '.' + pad((v*1000 % 1000) | 0, 3);
return t;
};

const video = document.querySelector('#wrap video');
const track = video.addTextTrack('subtitles','','jp');
let recMode = false;
video.loop = false;
track.mode = 'showing';

document.querySelector('#wrap .control').addEventListener('click', (e)=>{
let t = e.target, ch = t.parentNode.children, sb;
if(t.nodeName != 'INPUT') return;
recMode = t == ch[0];
sb = recMode?ch[1]:ch[0];

if(video.paused){
video.currentTime = 0;
t.value = '停止';
sb.disabled = true;
video.play();
} else {
video.pause();
t.value = t.dataset.val;
recMode = false;
sb.removeAttribute('disabled');
}
});

document.querySelector('#wrap .subtitles').addEventListener('click', (e)=>{
let t = e.target;
if(t.nodeName != 'INPUT') return;
if(video.paused || !recMode) return;

let tStart = video.currentTime, tEnd = tStart + 1.2;
let com = t.dataset.com;
let li = document.createElement('li');
track.addCue(new VTTCue(tStart, tEnd, com));
li.innerHTML = `<span>${sec2cue(tStart)}</span><span>${sec2cue(tEnd)}</span><p>${com}</p>`;
document.querySelector('#wrap ul').appendChild(li);
});

});
</script>

</head>
<body>
<div id="wrap">
<div>
<video src="https://archive.org/download/ElephantsDream/ed_1 … muted>
browser doesn't support videos
</video>

<div>
<p class="subtitles">
<input type="button" name="yamada" value="山田" data-com="やまだっ！" />
<input type="button" name="satou" value="佐藤" data-com="さとちゃぁん" />
<input type="button" name="kimura" value="木村" data-com="木村様々～" />
<input type="button" name="kobayasi" value="小林" data-com="コバ！コバ！" />
</p>
<p class="control">
<input type="button" name="play" value="字幕記録" data-val="字幕記録" />
<input type="button" name="replay" value="確認再生" data-val="確認再生" />
</p>
</div></div>

<div>
<div>字幕リスト</div>
<ul></ul>
</div>
</div>
</body>
</html>