動画、jQuery

授業

動画編集

Media Encoder
  • 追加から動画ファイルを読み込む
  • ソースの属性と同じというオレンジのところをクリックすると書き出し設定が出る
  • キューポイントにアクションを設定できる
  • 設定をしたらOK
  • "現在のエンコード"を開いて"キューを開始"をクリック
  • F4Vはそのまま開けない（高画質）
  • 動画類はブラウザ間で差があるHTML5より、youtubeにUPする方がよい
  • UPした動画にアノテーションをつけられる(吹きだしや説明など)
Flashで動画の読み込み
  • ファイル→読み込み→ビデオの読み込み
  • "SWFにFLVを埋め込み、タイムラインで再生する"は重くなるので今回はチェックしない
  • コンポーネントパラメーターのプロパティで、いろいろ設定ができる
  • skinAutoHide: マウスオーバーでボタン類が出る
  • 表示→コンポーネント→video 自分で好きなパーツ類をつけられる
  • プロパティからコンテンツパスで動画を参照
  • 作った動画をパブリッシュ設定でwinプロジェクターにすると、exeファイル(ダブルクリックで開く)になるので配布するときに便利
動画関係リンク

コマーシャライザー CMを作って載せられるサイト
Jing PC内のキャプチャ・録画ソフト
MacNicoPlayer ニコニコ動画専用ブラウザ

jQuery

  • document.getElement〜を短縮したのが$
  • $()と打てばよい
var div = document.getElementById('div1');
if(div.addEventListener) {
	div.addEventListener('click', doSomething, false);
}else if(div.attachEvent) {
	div.attachEvent('onclick', doSomething);
}
function doSomething() {
	alert('クリックされました');
}

↑が↓のように簡潔にできる

$('#div1').click(function() {
	alert('クリックされました');
});
jQueryの読み込み
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの読み込み</title>
<link rel="stylesheet" href="">
<script src="jquery-1.7.2.min.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
	<div id="sample">このdivを消す</div>
  <script>
$('#sample').hide();
</script>
</body>
</html>

↑この場合スクリプトはdivより後でないと実行されない

jQueryでアニメーション効果をつける
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでアニメーション効果を付ける</title>
<link rel="stylesheet" href="">
<script src="jquery-1.7.2.min.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style type="text/css">
div {
	width: 200px;
	height: 200px;
	background: red;
	display: none;
}
</style>
<script type="text/javascript">
$(function() {
	$('button').click(function() {
		$('div').show('slow');
	});
	});
	</script>
</head>
<body>
  <button>表示</button>
  <div></div>
</body>
</html>
アコーディオンメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<link rel="stylesheet" href="">
<script src="jquery-1.7.2.min.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
dl {
	width: 400px;
	margin: 50px auto;
}
dl dt {
	background: #7cadb6;
	border-bottom: 1px solid #fff;
	cursor: pointer;
}
dl dd {
	border: 1px solid #7cadb6;
	border-top: none;
	height: auto;
}
</style>
<script type="text/javascript">
$(function() {
	$('dd:not(:first)').css('display', 'none')
	$('dl dt').click(function() {
		if($('+dd', this).css('display') == 'none') {
			$('dd').slideUp('normal');
			$('+dd', this).slideDown('normal');
		}
	});
});
	</script>
</head>
<body>
<dl>
  <dt>三　兄弟相知る</dt>
  <dd>
  <p>「魚汁か何かあつらえようかね。まさか、おまえもお茶ばかりで生きてるわけでもあるまいからね」と弟をつかまえたことに、ひどく満足したらしい様子でイワンが言った。彼自身はもう食事を終わって茶を飲んでいたのである。<br>
「魚汁をください、そのあとでお茶もいただきましょうよ、僕すっかりおなかが空いてるんです」とアリョーシャは愉快そうに答えた。<br>
「桜ん坊のジャムはどうかえ？　ここにあるんだよ。覚えてるかな、おまえは小さい時分にポレーノフの家にいて、桜ん坊のジャムが大好きだったじゃないか？」<br>
「そんなことをよく覚えていますね？　ジャムもくださいよ。僕は今でも好きなんです」<br>
　イワンはボーイを呼んで魚汁と茶と桜ん坊のジャムを注文した。</p>
  </dd>
  <dt>四　謀叛</dt>
  <dd>
  <p>それに調和というやつがあまり高く値踏みされているから、そんな入場料を払うことは、どうも僕らのふところぐあいに合わないんだよ。だから僕は自分の入場券だけを急いでお返しする。僕が潔白な人間であるならば、できるだけ早くお返しするのが義務なんだよ。だから僕はそれを実行するのだ。ねえ、アリョーシャ、僕は神様を承認しないわけではない、ただ『調和』の入場券をつつしんでお返しするだけのことだよ」</p>
  </dd>
  <dt>五　大審問官</dt>
  <dd>
  <p>「だって、アリョーシャ、こんなものはほんのでたらめじゃないか、これまで二行の詩も書いたことのない、無分別な学生のとりとめもない劇詩にすぎないんだよ、なんだってそうおまえはきまじめにとるんだい？　ほんとにおまえは僕がエズイタ派の仲間へ走って、キリストの事業を訂正しようとしている連中の群れへ投じるだろうなんて、思ってるのかい？　とんでもないこったよ！　僕はおまえに言ったとおり、三十まではこうしてだらだらと生きのびるんだ、そして三十が来たら杯を床へたたきつけるまでさ！」</p>
  </dd>
  </dl>
  <cite>引用: カラマゾフの兄弟（青空文庫）</cite>
</body>
</html>