マジレス希望

html.javascriptの質問です。初心者です。

締切済

質問者：kTTTTTT
質問日時：2017/10/24 19:57
回答数：2件

いま、動画に付箋を貼るというツールを作っています。
そこで質問が2つあります。
Q1現状はボタンをクリックして付箋を貼っているが、これをキーボードのSキーに変えたいのですが、どのコードをどうすれば良いのでしょう。

Q2srcで"douga.mp4" とファイルを指定していますが、この指定を〇〇.mp4のようにして、html上から検索ボックス等で入力して代入するというような仕組みに変えたいです。どのコードをどうすれば良いのでしょうか。

できればコードのサンプル等があればありがたいです。

<!DOCTYPE html>
<html>
<head>
<style>
#id0{
cursor:pointer;
}
.class0 {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

}
</style>

</head>
<body>

<div>
<div id="id0"></div>
<div>
<video id="id1" src="douga.mp4" controls></video>
</div>
<div><button id="id2">ふせん</div>
</div>
<script>
document.getElementById('id2').addEventListener('click', func1, false);
function func1() {
var var0 = document.getElementById('id0');
var var1 = document.getElementById('id1');
var elm0 = document.createElement('span');
elm0.textContent = '付箋' + (var0.children.length+1).toString().replace(/[0-9]/g, function (s) {return String.fromCharCode(s.charCodeAt(0) + 65248);});;
elm0.className = 'class0';
elm0.dataset.time = document.getElementById('id1').currentTime;
elm0.addEventListener('click', func2, false);
var0.appendChild(elm0);

function func2(ev) {
var1.currentTime = ev.target.dataset.time;
}
}
</script>

</body>
</html>

このサイトの正しい使い方がわからないため、こちらで返信という形をとらせていただきます。

Q2 ですが、　まず、パソコンの動画ファイル(デスクトップ等)に「1.mp4」「2.mp4」という動画がインストールされているとします。そして、検索ボックスで[1.mp4]と打つとその動画が、[2.mp4]と打つとその動画が表示できるというような、動画の表示の切り替えを行いたいです。国語力がなくて大変申し訳ありません。

No.1の回答に寄せられた補足コメントです。補足日時：2017/10/25 21:30
通報する

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2017/10/26 17:59

#1です。

＞検索ボックスで[1.mp4]と打つとその動画が、[2.mp4]と打つとその動画が表示できるというような～
入力した内容に合うファイルをPC内で検索して、見つかったものを表示したいということでしょうか？

もしそれが簡単にできるなら、質問者様がどこかのサイト（例えばこの質問サイト）にアクセスすると、質問者様のPC内のファイルが全て検索されて何があるかわかってしまう、あるいは、内容をゴッソリコピーされてしまうといったことが可能になると思いませんか？

一方で、MS（=IE)に限って言えば、JScript（javascriptのMS版のようなもの）を利用することで不可能ではありませんが、セキュリティの警告がいろいろ出たり、検索にそれなりに時間がかかったりということが予想されます。
https://msdn.microsoft.com/ja-jp/library/cc42807 …
http://www.officetanaka.net/excel/vba/filesystem …
あるいは、web用ということでないのであれば、他の言語を用いることでご質問の内容は実現可能かと想像します。

javascriptでできそうな代替案として、検索はさせずに「スクリプト内にセレクトに対応させたアドレスのリストを事前に用意しておいて、セレクトで指定された内容に応じたファイルを表示する」ようなことであれば、#1に示した方法の応用で十分可能です。

もう少し発展させれば、「表示名称と実際のファイルアドレスとを対応させたリスト（テキストファイルなど）を別に用意しておいて、スクリプトでそれを読み込んで内容に応じたセレクト要素を生成し、そこで選択されたものを表示する」みたいなこともできるでしょう。
こうすると、リストを書き換えたり追加したりするだけで、その内容が反映されるといった仕組みにすることが可能になります。（それなりに複雑にはなりますが）

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2017/10/25 11:40

こんにちは

◆Q1 イベントの取得をクリックからキー操作（keydown、keypressなど）に変えればよいでしょう。
具体的には
＞document.getElementById('id2').addEventListener('click', func1, false);
の部分を
document.addEventListener("keydown", function(e){if(e.keyCode==83) func1();}, false);
とするとか。

◆Q2 よくわからないのですが、『表示しているビデオ要素のURLを、入力ボックス等で入力指定したURLに変更したい』という意味と解釈しました。

例えばこんな感じのことでしょうか？
（入力値の内容チェック等は行っていません。）

<body>
<div>
<div id="id0"></div>
<div>
<video id="id1" src="douga.mp4" controls></video>
</div>
<div><button id="id2">ふせん</div>
</div>


<form id="form1" style="margin-top:2em;">
<input type="url" size="50" />
<button type="button" value="change">change URL</button>
</form>

<script type="text/javascript">
document.querySelector("#form1 button").addEventListener("click", function(){
var url = document.querySelector("#form1 input").value;
if(url.length) document.getElementById("id1").src = url;
}, false);
</script>

</body>