HTML5ビデオをJavaScriptでシンクロさせてみる

サイト上で、動画とコンテンツのシンクロができるか…ってことでやってみた。
HTML5 Video Synchro Test

作り方は極めてシンプルで、videoタグで貼られた動画はタイムが変更されると

timeupdate

イベントが発行されるので、これを拾って、どうこう処理すれば良いだけだった。

こんな感じ

$("Video ID").on("timeupdate",function(){
	var xTime = this.currentTime //現在の再生時間
	if(xTime >= 10.0 && xTime < 11.0){
		console.log("10秒たった!");

	}

});

その他のイベントは、この辺を見てみてください。

wordpressの記事の中のシンタックスハイライト[highlight.js]

記事中のコードの表示のために軽量お手軽な「highlight.js」を設定します。

テンプレートの「header.php」に以下を追記します。
※CDNのの情報は(2016.09.09)時点の情報です。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

標準で22種類の言語に対応していて、
別途必要に応じてカスタマイズした物をダウンロード可能です。
https://highlightjs.org/download/

記事作成時に<pre><code class=“言語名”></code></pre>作成します。
コードの中身はHTMLエスケープ処理が必要です。

WordPressを設置公開までの作業

phpMyAdmin等で新しデータベースを作成する

適当な名前をつけて「utf8_general_ci」を選択する

特権情報で新規ユーザー(管理者)を作成する

固有の特権を確認し、実行する

webサーバーの設定を行う

今回は既存の環境に追加するので、バーチャルホストの設定をする


<VirtualHost *:80>
  DocumentRoot /www/host/plog.plane-plan.com
  ServerName plog.plane-plan.com
  ErrorLog logs/plog_error_log
  <Directory “/www/host/plog.plane-plan.com/">
    Options Indexes FollowSymLinks
    AllowOverride All
  </Directory>
</VirtualHost>

公開前の確認用にローカル環境のhostsにレコードを追加する

$sudo vim /etc/hosts
153.121.59.133 plog.plane-plan.com

上記webサーバーの設定で指定した「/www/host/plog.plane-plan.com/」にwordpressのファイル一式アップロードする
後でも先でもいいが、「wp-config.php」ファイルにデータベースの情報を記入して通常通りインストール作業を行う

define('DB_NAME', 'myblog_detabase');

/** MySQL データベースのユーザー名 */
define('DB_USER', ‘mydbuser’);

/** MySQL データベースのパスワード */
define('DB_PASSWORD', ‘xxxxxxxxxx’);