入力された文字に対応する動画を再生するには

Question

プログラミング初心者でよくわからず、助けていただきたいです。
monacaで作っています。

入力フォームに入力された文字を読み取り、対応する動画を再生したいのですが、どのように書けばいいのでしょうか。

入力フォームの作成、動画の読み込み、表示の仕方はわかるのですが、
入力された値を読み取り、対応する動画を表示する方法がわかりません。

以下はやりたいと考えていることです。
あらかじめ、ひらがな46文字にあわせて46個の30秒程の動画を制作します。
例えば、鑑賞者によって「あいうえお」とキーボード入力された場合に、あ・い・う・え・おそれぞれに対応した動画を同時に(一部重なり合うように)表示させたいです。
入力はひらがなのみ、最大7文字程度に制限するつもりです。

検索してもわからなかったので、参考になりそうな記事などあれば教えてください。

Comments

[Lhankor_Mhy]

質問が大きすぎてわからない部分が不明だと思いますので、もう少し小さく分割して（たとえば、「最大7文字程度に制限するにはどうすればいいですか？」などの）質問をしてみてはいかがでしょうか？

Answer 1

こんにちは。

入力フォームに入力された文字を読み取り、対応する動画を再生したい

以下のような感じです。

1. ひらがなと動画パスの辞書を作っておく
2. 入力テキストを一文字ずつループさせる

① 辞書から文字に対応する動画パスを取り出す
② 動画パスをsrc属性に埋めたvideo要素を配置する

サンプル

const dict = {
  'あ': 'https://www9.nhk.or.jp/das/movie/D0002161/D0002161468_00000_V_000.mp4',
  'い': 'https://www9.nhk.or.jp/das/movie/D0002161/D0002161414_00000_V_000.mp4',
  'う': 'https://www9.nhk.or.jp/das/movie/D0002170/D0002170024_00000_V_000.mp4',
}
const input = document.querySelector('input');
const submit = document.getElementById('submit');
submit.addEventListener(`click`, () =>
  Array.from(input.value).forEach(chr => {
    const target = document.createElement('video');
    target.src = dict[chr];
    document.body.insertAdjacentElement('beforeend', target);
    target.play();
  })
);

Comments

[harunom]

ありがとうございます！大変参考になりました。