WebBrowser & Video
映像視聴環境としてのWebブラウザの可能性
はじめに
近年、Webサイトにおける動画の活用がますます盛んになっている。記事と連動した紹介動画の埋め込みはもちろん、ページヘッダーや背景にも動画を活用したものが多くなった。例えば、WordPressの最新のテーマであるTwenty seventeen では、8MB以下のMP4ファイル、あるいはYouTube動画のURLを用いて、ヘッダー動画を置く仕様になっている。
動画を提供するサービスの拡充、通信速度、PCの処理速度、ブラウザの性能向上、また、HTML5のvideo要素や動画フォーマットの技術仕様の統一により、Webブラウザは、映像を視聴する場としての存在感を拡大している。
本発表では、こうした技術の現状と動向についての報告を行うとともに、ブラウザ上での動画活用を目的に筆者が開発したシステムを紹介し、Webブラウザの今後の可能性を探りたい。
井上 貢一 |九州産業大学芸術学部 ソーシャルデザイン学科
CONTENTS
Webブラウザによる動画の再生
動画の再生に特別なソフトウエアは必要ない。Webブラウザさえあれば、
動画ファイルをドラッグ&ドロップするだけでプレイヤーとして機能する。
HTML5 video要素による動画の再生
- VIDEOタグの仕様
< video src="sample.mp4" width="320" height="240" autoplay >< /video >
- src=・・・動画のURL
- width =・・・幅
- height =・・・高さ
- autoplay・・・読み込みと同時に再生スタート
- controls・・・コントロールバーの表示
- loop・・・ループ再生
- muted・・・消音
- poster =・・・ポスター画像を表示
- zoom ・・・CSSによるズーム
- transform: scale( -1, 1 ); ・・・CSSによる左右反転
- サポートされているメディアフォーマット
HTML5以降では、動画再生のための video 要素を持っている。ビデオコーデックについては、ブラウザの開発元の間で意見が分かれいたが、現在では、Google、MozillaFoundation、Microsoft、Apple、OperaSoftwareなど主要なブラウザはいずれも、WebM、H.264、Theoraをサポートするようになった。- WebM:ほぼすべてのブラウザがサポート
- MP4 H.264 (AAC または MP3):ほぼすべてのブラウザがサポート
- Ogg Theora Vorbis:I.E.、Safari は未サポート
- 主要なブラウザーの最新バージョンで動作させるための記述
<video controls> <source src="sample_video.webm" type="video/webm"> <source src="sample_video.mp4" type="video/mp4"> I'm sorry; your browser doesn't support HTML5 video. </video>
- JavaScript による video 要素の制御
VIDEO要素は JavaScript を通じて様々な制御が可能である。- video要素.play(); 再生
- video要素.pause(); 一時停止
- video要素.currentTime = 0; 頭出し
- video要素.volume += 0.25; 音量の制御
例えば以下のコードは、動画の再生を意味する。var v = document.getElementsByTagName("video")[0]; v.play();
- 事例:世界一シンプルなマルチスクリーン
<center> <video src="01.mp4" width="320" autoplay></video> <video src="02.mp4" width="320" autoplay></video> <video src="03.mp4" width="320" autoplay></video> </center>
- HTMLは、テキストエディタで入力して保存
- HTMLファイルと同じ場所に、01.mp4, 02.mp4, 03.mp4があればよい
動画共有サービスを利用した動画の再生
- YouTube動画の埋め込み仕様
< iframe src="https://www.youtube.com/embed/aBcDeF? autohide=1&loop=1&theme=dark" width="560" height="315" frameborder="0" allowfullscreen >< /iframe >
- width = 動画の幅
- height = 動画の高さ
- src = 以下の部分に動画の識別IDに加え、以下のオプションが指定できる。
- autohide=1・・・コントロールバーが再生開始後に隠れる
- loop=1・・・ループ再生
- controls=0・・・コントロールバー非表示
- autoplay=1・・・読み込みと同時に再生スタート
- modestbranding=1・・・ロゴ非表示
- showinfo=0・・・タイトルや評価などの情報を非表示
- theme=dark・・・プレイヤーの色が黒
- theme=light・・・プレイヤーの色が白(明るいグレー)
- color=red・・・シークバーの色が赤
- color=white・・・シークバーの色が白(明るいグレー)
- JavaScript による YouTube動画の制御
IFrame Player API を使用すると、ウェブサイトに埋め込まれたYouTube動画に対し、JavaScriptによる様々な制御が可能になる。
参考:iframe 組み込みの YouTube Player API リファレンス
- JavaScriptプラグインによる YouTube動画の活用
jQuery Tubular というプラグインを使うと、YouTubeの動画をWebサイトのバックグラウンドに指定できる。 → DEMO
WebRTCによるWebカメラ映像の再生
- WebRTCとはW3Cが提唱するリアルタイムコミュニケーション用のAPI
- ウェブブラウザ間でのチャットやファイル共有が実現できる技術
- 現在のところ、ChromeとFirefoxに実装されている
- WebRTCを用いたWebカメラの活用 → WebCamera?
MovieSquare 2017
開発の目的
- 身近にある技術によるマルチスクリーンの実現
- 様々な投影パターンを簡単に編集・保存できる仕組みの実現
- シングルチャンネルでの鑑賞とは異なる視覚体験
システムの活用事例
- MultiScreen
- VideoREC?
- WebCam?
- DanceLesson?
- AudioVideoMatching?
システムの開発方法
- テキストエディタ Atom と 標準ブラウザFirefox による開発
- PukiWikiをベースとしてプラグインを開発 http://pukiwiki.osdn.jp/
- PukiWikiはオープンソースのWiki
- Wikipediaのようにブラウザ画面から編集ができる
- 簡単な記法で様々な要素を表組みできる
- Web標準技術
- HTML5( Hyper Text Markup Language )・・・文書構造
- CSS ( Cascading Style Sheets )・・・・ビジュアル
- JavaScript + Libraries ( jQuery )・・・インタラクティブ
- PHP(Hypertext Preprocessor)・・・・サーバーサイドスクリプト
特徴
- 動画のレイアウトは、標準的なWikiの「表組み」の記法に従って編集
- 1セット1ページとして保存
- 手元の動画ファイルの Drag&Drop を前提に枠組みのみを構築
- Preset動画 あるいは YouTube動画を指定する
- 上映の際は、ページのスタイルを切り替える
- 動画のサイズ調整 : ↑ ↓
- 目地のサイズ調整 : ← →
- 再生・一時停止:[SPACE]
- 動画の頭出し:[ENTER]
映像教育とWeb
- 参考資料の宝庫としての動画共有サイト
- 作品発表の場としての動画共有サイト
- 映像表現の拡張としてのWebテクノロジー
- HTML5 VIDEOタグによる動画の様々な埋め込み表現
- IFRAMEタグによるYouTube動画等の埋め込み表現
- WebRTCを用いたWebカメラ等のデバイスとの連動
Small is Beautiful
科学・技術の方法や道具とは、
安くてほとんどだれでも手に入れられ、
小さな規模で応用でき、
人間の創造力を発揮させる
ようなものでなくてはならない。
安くてほとんどだれでも手に入れられ、
小さな規模で応用でき、
人間の創造力を発揮させる
ようなものでなくてはならない。
E.F.Schumacher | 1973
ご清聴ありがとうございました。
ソースコード
- videoプラグイン
Wikiの編集画面に入力されたファイル名、幅、高さ等のパラメータを
HTMLのvideoタグに置き換えるだけの極めてシンプルなプログラム
video.inc.php<?php function plugin_video_convert() { $args = func_get_args(); $name = $args[0]; $width = $args[1]; $height = $args[2]; $autoplay = $args[3]; return <<<HTML <video src="movie/$name" width="$width" height="$height" $autoplay loop controls ></video> HTML; } ?>