マエカワの備忘録的な何か

思い立ったが吉日

メディア論 其の一 20171002

概要

 複数のメディアを組み合わせることによって、これまでになかった価値を作り出すことができるかもしれない。今回、この講義では、マンガと動画を融合させたようなメディアをJavaScriptCSS、HTMLを駆使して作成していく。また、このメディア作品が講義の評価につながる。

評価方法

 評価方法は二つ

  1. メディア作品の出来栄え
  2. 最終レポート

 この二つを提出したうえでの評価になるとのこと。

実際作ってみた

 講義で見た作品を見ていると、なんだか書けそうな気がしてきたので、ちゃちゃっと書いてきました。以下ソースコード

<!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()で取得しないと動かない