Q&A
コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
javascriptで使う変数をtrack要素のsrcに入れたいんですができません。
複数あるvttファイルから１つを選びたいときに変数で選べるようにしようと思います。
最初に試しにimg要素のsrcに変数を入れて画像を変更することはできたのですがtrack要素ですると反映されず、動画に字幕が入りません。なぜでしょうか？
よろしくお願いします。
<html> <body> <video controls poster="firstframe.jpg" width="640" height="480"> <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> <track label="Japanese" kind="subtitles" src="" id="area1" srclang="ja" default></track> </video> <button type="button" onclick="change()">change</button> <button type="button" onclick="change2()">change2</button> </body> </html>
<script type="text/javascript"> function change(){ var a = "123.vtt"; document.getElementById("area1").src = a; } function change2(){ var b = "456.vtt"; document.getElementById("area1").src = b; } </script>
指摘ありがとうございます。これで合ってますか？？
修正ありがとうございます、コードブロックはそれで大丈夫です。タイトルが「ajavascript」になっているので、これも修正をお願いします。
回答2件
0
ベストアンサー
下記ページに track の切り替えについて例が載っています。
【track 要素のスクリプトによる操作 (Windows)】
https://msdn.microsoft.com/ja-jp/library/jj152145(v=vs.85).aspx
スクリプトによるトラックの変更
ざっと上記サイト以外も使用例を見てみたのですが、track要素 自体の書き換えを行う例があまり無く、もしかしたらスクリプトでのsrc属性の書き換えでは読み込まない可能性があります。
いっそVideo要素ごと生成しなおすという手段が手早いかもしれません（未検証）。
投稿2016/11/21 09:45
総合スコア69400
なるほど。。。
http://www.pondad.com/?p=9418
このようなサイトを先ほど見つけてできると思った矢先なのですが無理なんですかね。。。
ソースを見ても理解ができなくて；；
【動的 TextTrack オブジェクト (Windows)】
https://msdn.microsoft.com/ja-jp/library/dn265043(v=vs.85).aspx
多分、動的にTextTrack オブジェクトを生成しているのだと思います。外部のvttファイルを取得してTextTrack オブジェクトを生成する関数でも作れば動的に作れると思いますが、やりたいであろうことに対するハードルが高いかな、と思ってさっきは書きませんでした。
複数のtrackがあって、それを切り替えるという要件ではないのでしょうか。それであれば回答のリンクの「スクリプトによるトラックの変更」を参照してください。
コメントで提示されたURLのように、字幕をリアルタイムに自分で作る、というのであれば、TextTrack オブジェクトの生成から学ぶ必要があります。
外部にいくつかあるvttファイルを切り替えて取得するなら、やはりTextTrack オブジェクトの生成から学ぶ必要があります。（外部にあるファイルが全てわかっているなら最初からトラックをHTMLに書いておいて切り替えするのが得策です）
分かりやすく教えていただきありがとうございます。
TextTrackオブジェクトの生成を学ぶ必要がありそうですね；；
kei344さんのおっしゃる通り私にはハードルが高そうですね。。。
「細かく指定したいのであれば」なので、用意したものを切り替えるだけであれば、Video要素ごと生成しなおすという手段を試してみてください。
外部にいくつかあるファイルを切り替えることはそうなんですが、徐々に増えていくのでそれも選択したいのでオブジェクトの生成しかないみたいですね。
> 徐々に増えていく
DBなどで管理されるのでしょうか？もしそうでなくファイルで管理される場合、ファイル名などの情報は（JavaScriptでサーバのファイルを一覧することが出来ないため）どこかに保存する必要があります。（TextTrack をlocalStorageにいれるならともかく）
vttファイル単位での運用をお考えであれば TextTrack は不要だと思いますよ。
DBは使わずにファイルで管理するつもりです。
サーバー保存でするつもりです。
ファイル名は決まった法則でするのでjavascriptで一覧できなくてもいけると判断しました。
すいません。まだ始めたばかりで自分の知識不足でTextTrackの理解が足りずなぜ不要かがわかりません。
> なぜ不要かがわかりません。
TextTrackオブジェクトではなく track 要素 を含めた video要素 の書き換えで対応できるからです。TextTrackオブジェクトを使う場合、
1. サーバからvttファイルを読み込み（＆失敗時の処理）のためのコード
2. vttファイルをTextTrackオブジェクトにする処理のためのコード
が必要になりますが、track 要素 を含めた video要素 の場合必要ありません。
ファイルを動的に編集する場合はTextTrackオブジェクトが必要ですが、その場合JavaScriptだけではサーバに保存が出来ないことも注意が必要です。（PHPなどサーバ側言語でなければサーバ上への保存が出来ない）
なるほど。分かりやすい解答ありがとうございます！
phpでvttファイルの作成、編集などは書けていて、それを読み込ますところでつまづいて質問させていただきました。
PHPが使えるのであれば、ページ自体をPHPで出力して、その際に track 要素 複数を含めた video要素 を書き出してしまえばよいような。
〉track要素を複数含めたvideo要素を書き出す
とはどういうことでしょうか？？すみません。
↓こういうことです↓
<video id="myVideo" controls >
<source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4" />
<track id="entrack" label="English subtitles" kind="captions" src="entrack.vtt" srclang="en" default>
<track id="estrack" label="Spanish subtitles" kind="captions" src="estrack.vtt" srclang="sp">
<track id="detrack" label="Germam subtitles" kind="captions" src="detrack.vtt" srclang="de">
HTML5 video not supported
</video>
あとからJavaScriptで動的に読み込まなくてもPHPで最初から書き出しておけば良い、という話です。
これだと新たに増えたvttファイルを読み込ますことできない。。。ですよね？？；
PHPで読み込んでおいて書き出せば良いのでは、ということなのですが･･･。
すいません。理解に時間がかかりました。
そうしてみます！ありがとうございました。
0
jQueryを使った場合ですが
html
1<html> 2<body> 3<video controls poster="firstframe.jpg" width="640" height="480"> 4 <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 5 <track label="Japanese" kind="subtitles" src="789.vtt" id="area1" srclang="ja" default></track> 6</video> 7<button type="button" id="change1">change</button> 8<button type="button" id="change2">change2</button> 9<script src='//code.jquery.com/jquery-2.1.3.min.js'></script> 10<script> 11$('#change1').on('click', function() { 12 $('#area1').attr('src','123.vtt'); 13}); 14$('#change2').on('click', function() { 15 $('#area1').attr('src','456.vtt'); 16}); 17</script> 18</body>
こんな感じでどうでしょう？
投稿2016/11/21 09:11
総合スコア686
ありがとうございます！
しかし、できませんでした；
これはjqueryの機能の１つですか？
私は上記ソースで実現しました。
loizさんができなかった、ということは他にJSエラーが出ている可能性が高いです。
右クリックして「検証」か「要素を調査」をクリック、コンソールを確認してください。
JSエラー（×が出ている所）があれば修正する、またはこちらに貼り付けて下さい。
trackで動画に文字が反映されます？？
画像などの変換ならこれで出来たのですがtrack要素だけ反映されません。
JSのエラーも確認しましたがありませんでした。
なぜでしょうか？？
ああ、すみません。
DOMでsrcが入れ替わっている事しか確認していません。ソース持っていませんし。
なるほど、そうだったんですね！
srcが入れ替わることがわかっただけでも理解が進みました。
ありがとうございます！
あなたの回答
tips
プレビュー
