スポンサーリンク

javascriptを書いていた。そんな時代がありました。

2015/2/20 PC

文系の私ですが大学時代はWeb技術についての研究を専攻していて、その時にHTML5を使った動画再生についての考察なんぞを行ってました。
奇跡的に当時のコードが残っていたので今では何の役にも立たないと思いますが記念にupしておきます。

HTML5での動画再生

今ではyoutubeもニコニコ動画もhtml5に対応していますがこの当時はvideoタグがどれだけ珍しかったか。
そのvideoタグを使っての動画再生をjavascriptで制御していました。
基本的な再生・一時停止・早送り機能に加え
キャプチャータイムを指定して自動的にその位置にシークできるようにもしました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript">
  var video;
  function init() {
    video = document.getElementById("video1");
    // 動画再生が終了したら呼び出されるイベントハンドラの登録
    video.addEventListener("ended", function() {
      alert("終了しました");
    }, true);
    // エラー
    video.addEventListener("error", function() {
      switch (video.error.code) {
      case MediaError.MEDIA_ERROR_ABORTED:
        alert("データのダウンロードが中断されました。");
      break;
      case MediaError.MEDIA_ERROR_NETWORK:
        alert("ネットワークエラーが発生しました。");
      break;
      case MediaError.MEDIA_ERROR_DECODE:
        alert("デコードに失敗しました。");
      break;
      case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
        alert("サポートされていないファイル形式です。");
      break;
      default:
        alert("不明なエラーが発生しました。");
      }
    });
  }
  function play() {
    // 動画の再生
    video.play();
  }
  function pause() {
    // 動画の一時停止
    video.pause();
  }
  function fastforward() {
    // 動画の早送り（Firefoxでは動作しない）
    video.playbackRate += .2;
  }
  function movieForward01(){
    var time = document.getElementById("video1").currentTime;
    time = 0;    
    document.getElementById("video1").currentTime = time;
  }
    function movieForward02(){
    var time = document.getElementById("video1").currentTime;
    time = 2;    
    document.getElementById("video1").currentTime = time;
  }
    function movieForward03(){
    var time = document.getElementById("video1").currentTime;
    time = 4;    
    document.getElementById("video1").currentTime = time;
  }
    function movieForward04(){
    var time = document.getElementById("video1").currentTime;
    time = 6;    
    document.getElementById("video1").currentTime = time;
  }
    function movieForward05(){
    var time = document.getElementById("video1").currentTime;
    time = 08;    
    document.getElementById("video1").currentTime = time;
  }
    function movieForward06(){
    var time = document.getElementById("video1").currentTime;
    time = 10;    
    document.getElementById("video1").currentTime = time;
  }
    function movieForward07(){
    var time = document.getElementById("video1").currentTime;
    time = 12;    
    document.getElementById("video1").currentTime = time;
  }
    function movieForward08(){
    var time = document.getElementById("video1").currentTime;
    time = 14;    
    document.getElementById("video1").currentTime = time;
  }  
    function movieForward09(){
    var time = document.getElementById("video1").currentTime;
    time = 16;    
    document.getElementById("video1").currentTime = time;
  }

</script>
</head>

動画ファイルについてはブラウザごとに対応状況が違ったので、ogv・webm・mp4(h.264)を用意していました。
googleお墨付きのwebmって今はどうなったのでしょうか？

下のコード内の目次、カッコいい人はアジェンダと言うんでしょうか？は、「HTML5を使ってオンラインスクールを開校するためには」といったことに取り組んでいた時のものです。
今で言うドットインストールやschooとかがやっている事を実現したかったのです。と、さも自分も昔から考えてたぜ的な事を言っておきます。
ドットインストール様、schoo様、素晴らしいサービスを本当にありがとうございます。
便利な世の中になりました。最近は毎日schoo三昧です。

<body onload="init()">
  <!-- controls属性がある場合、ブラウザネイティブのコントロールが表示される -->
  <!-- Safariの場合はOggビデオが再生できないので差し替えること -->
  <video id="video1" controls >
  <source src="movie\report07_test.ogv">
  <source src="movie\report07_test.webm">
  <source src="movie\report07_test.mp4">
  </video><br/>
  <button onclick="play()">再生</button>
  <button onclick="pause()">一時停止</button>
  <button onclick="fastforward()">早送り</button>
  <ul>
  <li><a href="javascript:void(0)" onclick="movieForward01(); return false;">○○大学　ver.HTML5</a>
  <li><a href="javascript:void(0)" onclick="movieForward02(); return false;">従来の課題・未解決問題</a>
  <li><a href="javascript:void(0)" onclick="movieForward03(); return false;">現在のシステム構成要素</a>
  <li><a href="javascript:void(0)" onclick="movieForward04(); return false;">現システムの課題と解決</a>
  <li><a href="javascript:void(0)" onclick="movieForward05(); return false;">解決する方法・実験環境</a>
  <li><a href="javascript:void(0)" onclick="movieForward06(); return false;">開発のロードマップ</a>
  <li><a href="javascript:void(0)" onclick="movieForward07(); return false;">作品の公開方法、公開対象者</a>
  <li><a href="javascript:void(0)" onclick="movieForward08(); return false;">コメントの回収方法と改善作業</a>
  <li><a href="javascript:void(0)" onclick="movieForward09(); return false;">何を評価してもらいたいか？</a>
  <br />
</body>
</html>

jQuery大好きでした

自動で開閉するアコーディオンリストやら画像ギャラリー等面白い動きのするUIをいろいろ作成した覚えがあります。
ブラウザをリロードすることなく動画の切り替えを行うのが一番苦労しましたが、どんな風に実装していたかとても覚えていません。
数年経った今再びjavascriptを書けと言われても、とても書けるものではありません。
こういうのは常に書いておかないとダメだなとしみじみ老人の様なことを思います。

だけどこういう勉強をしていたから今でもWeb関連の技術には自然と耳を傾けます。
実際に使えるかどうかは別だけど最先端の技術に少しでも触れることがとてもいい刺激になります。

今はjavescriptはおろかhtmlやcssを書くことも少ないですが、最近またWebの勉強会に行こうかなと考えています。
ブロガー名刺作んなきゃ（笑）

コメント

  1. javascriptを書いていた。そんな時代がありました。 | 最新ニュース より:
    2015-07-03 12:28

    […] やっている事を実現したかったのです。 数年経った今再びjavascriptを書けと言われても、とても書けるものではありません。 [紹介元] javascriptを書いていた。そんな時代がありました。 […]

    返信