jQuery

jPlayerで1時間超の動画の再生時間を表示させる

[image]jPlayer時間表示

jquery.jplayer.min.jsの19行目にあるshowHourを1から0にしてましたが
[js]b.jPlayer.timeFormat={showHour:!1,showMin:!0,showSec:!0,padHour:!1,padMin:!0,padSec:!0,
sepHour:":",sepMin:":",sepSec:""};[/js]

[js]b.jPlayer.timeFormat={showHour:!0,showMin:!0,showSec:!0,padHour:!0,padMin:!0,padSec:!0,
sepHour:":",sepMin:":",sepSec:""};[/js]

以下を追加すればよかったみたい
[js]$.jPlayer.timeFormat.showHour = true;[/js]
jp-duration on media files longer than 1 hour · Issue #33 · happyworm/jPlayer

子要素Bを持つA要素を指定するには

CSS3までのセレクタは、特定の子要素を持つ親要素を選択できないけど
jQueryの:hasフィルターで出来るよ

例えば、aタグを含むliを選択してみる

[html highlight=”9″]<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($){
$("li:has(a)").addClass("target");
});
</script>
</head>
<body>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li><a href="#">あいうえお</a></li>
<li>あいうえお</li>
</ul>
</body>
</html>[/html]

aタグを含む<li>に.targetが付いてるのが確認できる
[image]:hasフィルター

Webサイトにオーディオ / ビデオプレイヤーを設置する

[jplayerダウンロードページ]

jPlayer : HTML5 Audio & Video for jQuery
オーディオだけじゃなくビデオも再生できるjQueryのプラグイン。
htmlとcssがわかればある程度好きなように見栄えをカスタマイズできて
プレイリストっていうのかな、複数の曲の連続再生に対応してる。

.mp3を.oggに変換する

うちの設置方法がよくないのか、firefoxではmp3が再生できなかった。

firefoxのaudioタグがmp3をサポートしていないからなのかな
とりあえず.mp3を.oggに変換する事に。

Audio Sound File Converter Software. Convert wav mp3 dvd midi flac dvf wma etc.というアプリ(無料)が簡単だった。
[image]switch
ファイルをドラッグして形式を選んでコンバート押すだけ。

.ogg以外にも様々な形式に書き出せる。
[image]Switch Audio Converter

こないだ変換に使ったアプリなんだったけな?と忘れちゃったのでメモ投稿。

[jQuery]$(this)の親要素や子要素を指定するには。

thisを使ってなかったからthisの子要素のアクセス方法が全くわからんかった。

当たり前だけどこんな風に出来無いわけですよね
[text]$("this ul").addClass("hogehoge");[/text]

childrenを使うといいみたい。
[js]$(this).children("ul")[/js]

親にはparent
[js]$(this).parent()[/js]

参考 / まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]

宿題
ひろし+すみれのliからから友蔵+こたけのliを指定するにはどうしたらいいんだろうか。
[html]<h1>さくら家</h1>
<ul>
<li><span class="name">友蔵+こたけ</span>
<ul>
<li><span class="name">ひろし+すみれ</span>
<ul>
<li class="name">さきこ</li>
<li class="name">まるこ</li>
</ul>
</li>
</ul>
</li>
</ul>[/html]

スクロールバーを変更するjscrollpane.js

SAVEJAPAN! PROJECTのツイッターのスクロールバーのところが、
デザインにあってていいねぇなんて思いながら見ていたら
だんだん自分でも使ってみたくなったので調べてみるとjscrollpaneというのを使っているようでした。

これ2009年くらいに話題になったらしいんだけど、全く知りませんでした。。。

ここ / jScrollPane – cross browser styleable scrollbars with jQuery and CSS
iframeも、親htmlにjsを追加するだけで(operaでマウスホイールが反応しなかったけど)スクロールバーを追加できたり
子htmlに直接jsを追加する事でマウスホイールも反応するように出来るかんじ。

練習

乱雑モックアップ|jQueryでツイッターを取得してjscrollpaneを適用
[image]jQueryでツイッターを取得してjscrollpaneを適用のスクリーンショット

ツイッターをjQueryで読み込む方法の参考にしたページ

jQueryでTwitterの自分のつぶやきを表示する | webOpixel