Tutorial

指定した位置で動画再生をするには

applicanでは指定した位置で動画を再生することが可能です。
iPhoneの場合、WebViewで動画を再生しようとすると全画面表示になりますが、この機能により全画面での再生を回避することができます。(Androidでも利用可能です)

動画再生

var options = {
	top:10,
	left:(document.documentElement.clientWidth-190)/2,
	width:190,
	height:240,
	control:false
};
applican.video.play('sample.mp4', playVideoOverlay_success, playVideoOverlay_error, options);

function playVideoOverlay_success(){
	alert("playVideoOverlay_success");
}

function playVideoOverlay_error(error){
	alert("playVideoOverlay_error code:"+ error.code);
}

解説

applican.video.play([動画ファイルのパス], [再生完了時のコールバック], [再生失敗時のコールバック], [オプション]);

成功時のコールバックは引数無し、失敗時はエラーコードが返ります。
{code : "エラーコード"}
VideoError.NOT_FOUND_ERR 動画が参照できない
VideoError.CANCELED 再生がユーザ操作で停止された

動画再生を停止

applican.video.stop();

オプションについて

パラメータ名 説明
top 10 動画の表示位置上端。正数で指定します。
bottom 10 動画の表示位置下端。(topと同時に記述するとtopが優先されます)
left 20 動画の表示位置左端。
right 20 動画の表示位置右端。(leftと同時に記述するとleftが優先されます)
width 100 動画の表示幅
height 80 動画の表示高さ
control true 一時停止、シークバーなどのコントロールを表示するかどうかを true又はfalseで指定します。

オプションを指定しなかった場合は以下のように表示されます。

top=0
left=0
width=WebViewの幅
height=WebViewの高さ
control=false

※補足

オプションに指定する各数値はWebViewで表示しているコンテンツのサイズを基準に指定してください。
document.documentElement.clientWidthが320の時、画面幅の半分のサイズで動画を表示したい場合に指定するwidthは160になります。

会員登録(無料)はこちらから