メディア論 其の一 20171002
概要
複数のメディアを組み合わせることによって、これまでになかった価値を作り出すことができるかもしれない。今回、この講義では、マンガと動画を融合させたようなメディアをJavaScript、CSS、HTMLを駆使して作成していく。また、このメディア作品が講義の評価につながる。
評価方法
評価方法は二つ
- メディア作品の出来栄え
- 最終レポート
この二つを提出したうえでの評価になるとのこと。
実際作ってみた
講義で見た作品を見ていると、なんだか書けそうな気がしてきたので、ちゃちゃっと書いてきました。以下ソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style1.css"> <title>ShowMovie</title> <script> //complete function start(){ document.getElementById("koma1").play(); } //complete function stop(){ document.getElementById("koma1").pause(); } //complete function currentTime(){ let time=document.getElementById("koma1").currentTime; document.getElementById("currentTime").innerHTML=time; } //complete function start2(){ var video1=document.getElementById("koma1"); var video2=document.getElementById("koma2"); video1.play(); setTimeout("hoge()",video1.duration*1000); } //complete var number=2; function hoge(){ document.getElementById("koma"+number).play(); number++; } </script> </head> <body> <button type="button" name="start" onclick="start();">start</button> <button type="button" name="start2" onclick="start2();">start2</button> <button type="button" name="stop" onclick="stop();">stop</button> <button type="button" name="current" onclick="currentTime();">current time</button> <div class="page1"> <video class="koma1" id="koma1"> <source src="movie/movie1.mp4"> </video> <video class="koma1" id="koma2"> <source src="movie/movie1.mp4"> </video> <br>再生位置: <span id="currentTime"></span> </div> </body> </html>
無駄なところがいろいろありますが、こんな感じ。今のところ、動画が二つの場合のみ動くものです。もっと多くなってくると、工夫が必要…。start2ボタンを押すと、video1が再生。video1が終了し次第、video2が再生されます。この部分の処理はsetTimeoutでごり押ししています。36行目のhoge関数では呼び出すたびに、次のid番号の動画を再生するように調節してあります。"video html"で検索をかけたら腐るほどリファレンスは出てくるので、詳細については省略。動画ファイル、sccに関しても適宜調整してください。
パワープレイでやってしまったのでこんな感じですが、講義が進むにつれ作成の仕方も説明されると思います。
注意したいこと
- videoのインスタンスのplayメソッドはdocument.getElementById()で取得しないと動かない