月別アーカイブ: 11月 2012

html5 videoタグ MINEタイプ 動画形式 で つまずいたこと

「webcreater」の方法で、
swfobject.jsを用いて
PCはflv
スマートフォンはmp4
で表示しようとするも、
サンプルコードでは上手く行くのに、自分のFLVでは上手く表示されない。
スキンが表示されないのである。
サンプルコードと同じ階層に設置するもできず。。。よくわかりません。
しかたなくflvとかandroidとかスキンとかflashvarsとかなんかいいろいろあきらめ、
本家サイト通りにswfを読み込むすることに。
とりあえず、表示される
次は、if IEで、IEだけswfobjectでswfを読み込み、
その他のブラウザとスマートフォンはvideoタグで読み込むようにした。
mp4・・・ひとえに「mp4」と言ってもなんかいろいろあるらしく、ipodとかで再生するには、プロファイルを「メイン」ではなく「ベースライン」にしなければならない
webm・・opera?chrome?firefox?
ogg・・firefox
webmとoggは、「Miro Video Converter」でmp4から変換
さて、oggファイルを作成したものの、firefoxでは表示されない。
「この動画のファイル形式またはmimeタイプはサポートされていません」と表示されてしまう。
MINEタイプ・・・サーバによって取扱できるファイルが違うとのこと。
.htaccessで、mineタイプをaddすればいいようですが、windowsサーバのため、htaccessは利用できず。
よくよくみたら、コントロールパネルのウェブサイト設定で可能でした
http://support.gmocloud.com/shared/guide/infinito_plus/controlpanel/web/config.html

子セレクタ .comments-link > span

直接の親子関係にある要素にスタイルを適用する

<div class=”comments-link”>
 <span>  </span>
</div>

セレクタまとめ参考 http://www.coolwebwindow.com/csstips/cssbasic/000243.php

隣接セレクタ div.entry-meta + div.entry-meta

twentyelevenのスタイルシートで、「+」でくっつけられたclassをよくみかけます。
これは隣接セレクタと言われるもののようで、
A要素とB要素が直接隣接している場合、(A要素の直後にB要素)が出てくる場合に適用されます。
タイトルのように、
div.entry-meta + div.entry-meta
は、
<div class=”entry-meta”>  
</div>
<div class=”entry-meta”>  
</div>
な感じかな
間に他の要素がある場合は、適用されない

CSS3の擬似要素「::before」「::after」

:beforeと::beforeってどんな違いが、、、?
こちらに詳しく書かれていました。ありがとうございます。
http://blog.3streamer.net/html5-css3/pseudo-elements-and-pesudo-classes-530/
CSS1・2とCSS3の記述方法の違いのようです。
ただIE8ではこのダブルコロンの書き方は対応してないので、通常通り1つでいいのではないかと。
wordpressのtwentyelevenは、革新的なスタイルシートなので、わからないことがいろいろあって、眺めてると勉強になりますね。。。