高度な設定

提供:Livetubepedia
移動: 案内, 検索

[編集] ウェブソースを使ってみよう

ずっと前に実験的に作ったウェブソースの機能とその説明です。一応ここに置きます。(書いた人,1)




**実験的機能**


"新規ソース"から"ウェブ"を選択すると使えます。
既存のウェブ自体をビジュアルソースとして表示することができます。


WebSource-01-fig-01.png WebSource-01-fig-02b.png



また通常のウェブのHTMLのほかにLivetube独自のタグと組み合せることであるフレームだけを動画内に表示させることが可能です。
これにより

  • ある一部の表示だけを重ねる、
  • 動画内に表示させるものを実行時に操作するユーザーインタフェースを作る、
  • コンテンツのテンプレート作成、

といったことなどが可能になります。
以下に非常に単純な例を示します。
(内部的な操作にMozillaを使っています。以下のサンプルもMozillaの機能を想定したものです。)


XHTMLのiframeタグにネームスペース"http://livetube.cc/htmlonvideo20061023"属性datasource="true"をつけることでそのiframeの内容だけを映像に反映します。


(ネームスペース、属性名とも将来のバージョンで互換性のない変更を行う可能性があります。現時点ではフレームを切った中にあるiframeには対応していません、トップのフレーム内にある場合にのみ対応。)


単純な例.1 HTMLによる文字とアニメーションしているcanvasを映像に重ねる。

titler_host_00.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:livetube="http://livetube.cc/htmlonvideo20061023">
<head></head>
<body>

Outside<br/>
<iframe src="titler_00.html" width="640" height="360" livetube:datasource="true"></iframe>


</body>
</html>

iframeにlivetube:datasource="true"を指定する。"Outside"の部分は動画へは映らない。iframeのサイズもそのまま反映されるので小さくすれば内部的な転送量を減らせます。
(ファイル名は何でもいいですが、ネームスペースを使う場合、Mozillaにxhtmlとして認識される必要があります。ローカルファイルの場合、~.xhtml、httpの場合、MIME Typeがapplication/xhtml+xmlである必要があります。)


titler_00.html

<html><head>
<script>
var a = 0;
function draw(){
var canvas = document.getElementById( "canvas");
var img = document.getElementById( "img");
var c2d = canvas.getContext( "2d");


c2d.clearRect( 0, 0, 400, 400);


c2d.translate( 150, 150);
a += 0.1;
c2d.rotate( a);

c2d.fillStyle = "rgba( 0, 0, 200, 0.5)";
c2d.fillRect( -50, -50, 100, 100);
c2d.strokeStyle = "rgba( 150, 150, 250, 1.0)";
c2d.strokeRect( -50, -50, 100, 100);

c2d.rotate( a * -1);
c2d.translate( -150, -150);


}
function anim(){
setInterval( draw, 40);
}
</script>
</head><body onload="anim();" style="background-color: transparent;">

<div style="position:absolute; top: 100px; left: 370px; z-index:2; width: 250px; height:250px;">
<span style="position:relative; top: 100px; left: 100px;">Buttyake<br/>Broadcasting<br/>Comittee</span>
</div>
<canvas id="canvas" width="250" height="250" style="position:absolute; top: 100px; left: 370px; z-index:1;"></canvas>

</body></html>


↓このように処理され
WebSource-example-01-01.png

↓こうなる
WebSource-example-01-02.png


ソース Media:WebSource_example01.zip




単純な例.2 ユーザが入力した文字をキャプションとして表示する。


caption_host_00_utf-8.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:livetube="http://livetube.cc/htmlonvideo20061023">
<head>
<script>
var sound;
function setCaption(){
	if( sound == null){
	sound = document.createElement( 'object');
	sound.data = 'se_caption_00.wav';
	sound.type = 'audio/wav';
	}
	
	document.getElementById( 'target_frame').contentDocument.getElementById( 'caption00').appendChild( sound);
	
	document.getElementById( 'target_frame').contentDocument.getElementById( 'caption_text').innerHTML = document.getElementById( 'caption_input').value;
	document.getElementById( 'target_frame').contentDocument.getElementById( 'caption00').style.display='block';
	
}
</script>
</head>

<body>
<iframe id="target_frame" src="caption_00.html" width="640" height="360" livetube:datasource="true"></iframe>

<input type="text" id="caption_input" />
<button onclick="setCaption();">表示</button>

</body>
</html>

(同時に鳴る音はQuicktimeがインストールされている必要があります。iTunesを入れると一緒にインストールされます。)


caption_00.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
<div id="caption00" style="display:none; position: absolute; top: 290px; font-size: 24px; font-weight: 900; color: white;">
<span id="caption_text"></span><br />
<img src="line.gif" />
</div>
</body>
</html>


こういったユーザーインターフェースで、
WebSource-example-02-01.png


実行時に動的に文字を操作できます。文字が表示される際に同時に効果音をつけられます。(要音声入力)
WebSource-example-02-02.png


ソース Media:WebSource_example02.zip


単純な例.3 (pending.)




これらのサンプルはHTMLのファイルによるものでしたがロードするURLが アプリケーションサーバのパスでもいいので動的な内容を表示することも当然可能です。
例えば掲示板の書き込みをライブにフィードして表示する等。
(pending)


(pending) OSX版について






メインページに戻る