HTML5、Firefoxでのvideoタグでハマったこと

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

HTML5、Firefoxでのvideoタグでハマったこと

2014年11月22日

みやびプリン 500 316

144 144

※この記事は7年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

まぁ、たまにはね、僕も利いたことをしようと思ったんだ。

そう、映像ページについにHTML5のタグを導入したのです!!!
念願だったお!もー、今までiframeでflv表示させてたんだよ。iPhoneじゃみれなかったんだヨ!
そして、このサイト、HTML5に準拠してるわりには、HTML5らしいこと一切してなかったんです。

まぁ、いいや。そうとにかく、ハマったんです。
何にって、Firefoxでのvideoタグの表示です。
これがなかなか上手くいかなかった。
多分、VIDEOタグを使おうとする多くの人が躓くことなのですが、
しかし、実は本題はそこではないのです。

まず、表示の仕方というかタグの書き方はは下記。

<video preload="none" width="480" height="360" controls>  <source src="/sample.mp4">  <source src="/sample.ogv"> </video>

なぜこういう書き方なのかは、下記エントリーを参照いただきたい。
FirefoxのHTML5『video』タグの落とし穴?

この話はググって見れば解決方法は、だいたい同じ方法が出てきます。
動画ファイルを置いているフォルダに、.htaccessを置くのですが、
下記の書き方でね

AddType video/ogg .ogg .ogv AddType video/mp4 .mp4 AddType application/ogg .ogg .ogv

しかし、僕の場合、表示されない・・・何度いろんな方法も試しました。
タグの中にMIME設定を書くのも試しました。

<source type="video/ogg">と追加します。
しかしダメ・・・・。
サーバーによるらしく、ロリポップのせいか!?と思ったけど、
腑に落ちないし、そんな記事はググってもでてこない。
Firefoxをサポート外にするのはさすがに忍びなく、あきらめないで検索。

と、今日になって不吉な記事を発見したわけですヨ

HTML5でサイトリニューアルしました。+ 簡単な解説

そこの最初の方にこう書いてるんですよ。

文字コードは Shift_JIS で、改行コードは LF 。 .htaccess ファイルを設置したディレクトリ以下に適用されます。 パーミッションは604 サーバーによって違いがあるかもしれません。 【注】safariはQuickTimeがインストールされていないと動かなかったです。

・・・・・ま、まさか、と思い、自分が作っていた.htaccessファイルを見てみると、
UTF-8ではないですか・・・!?
しかも、改行コードも違う。
あの万能文字コードがなぜ・・・。

文字コードと改行コードを変えてアップすると・・・。
動いた!!!!!
この二三日の時間はなんだったの!!!?

というわけで、本題は、HTML5でもvideoタグでもなく、
.htaccessは文字コードによっては動かない!
なのでした・・・。

相変わらず話長いw

王道ファンタジーの超大作シリーズ3作目!【リーグオブエンジェルズ 3】 - メイン

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る