USAGI STUDIO

USAGI STUDIO

WEBデザイン及び、Andoroid、iOS等アプリケーションの開発を行っている集団です。

Amebaでブログを始めよう!
問題
<video></video>タグでlocalリソースの動画を再生しようとした時に、
下記画像の表示が出て、動画が再生されない問題が発生しました。

【"無効なソース"が表示されているところ】
 

開発環境
・Windows7
・IE10、Chrome(最新)、FireFox(最新)
・Apache仮想サーバー
 ・HTML5、サーバーサイドPHP
・再生動画形式:.mp4、.webm、.ogvの3種類

原因
調査したところ、中々原因が特定できませんでした。
まずは下記4項目をチェックしました。

・参照パスは正しいか(正しくないと"無効のソース"と表示される)。
・ファイル名は正しいか(正しくないと"無効のソース"と表示される)。
・動画のエンコーディングは正しいか(正しくないとなにも表示されない)。
※動画の形式等については下記記事を参考にしました。
http://www.html5rocks.com/ja/tutorials/video/basics/
・ブラウザは最新か(古いものはvideoタグが認識されない)

それでも再生はされませんでした。

対策
そこでApache(仮想サーバ)の再起動を行いました。

【Apacheの再起動】

 ・Stop押下後、Start押下

すると、見事に再生されました。


【動画が再生されている様子】
 
・動画のコントローラはIE標準のもの

結論
localhostへのアクセスではなく、ローカルリソースへのフルパス(C:\xampp\htdocs\○○.mp4等)でのアクセスだと問題なく再生されたため、仮想サーバが悪さしていたようです。

リソースに新たにファイルを追加した場合は、ApacheやIIS等の仮想サーバを再起動するとうまくいくかもしれません。

また今回の問題解決に直接関係あるかはわかりませんが、動画を保存してあるフォルダの権限の問題もあるかもしれません。また問題に突き当たったら再度調査をしてみたいと思います。

追記(2013/12/11)
コメントにて"通りすがり"さんにご指摘をいただき、無事問題の解決となりましたのでこちらに追記致します。
.htaccessファイルの設定
.htaccessにMIMEタイプを指定すると、動作するようです。
.htaccessはディレクトリ単位で制御しますので、動画が格納してあるフォルダもしくはそれより上の階層に配置します。

/*以下、.htaccess指定例*/
AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv


 


これを記述した.htaccessファイル(実態はただのテキストファイル)を実行環境のサーバに配置してください。

僕はロリポップ!社のサーバを利用していますが、"hoge.txt"等、適当にファイル名を付けFTPアップロードしたのちに、
名前を”.htaccess”に変更すれば適用されます。

詳しい手順は以下に記載されていますので参考にしてください。
http://lolipop.jp/manual/hp/htaccess-08/(ロリポップ!社のホームページ)

はじめましてシステム開発部門の高橋と申します。

この度、"USAGI STUDIO"というサークル名において活動を始めるにあたって、

こちらにて、ご挨拶させていただきます。

主な活動としては、Webアプリケーション及びクライアントアプリケーション提案、設計、開発、管理を行います。

デザイン部門として、小野が在籍しております。

今後とも、よろしくお願いいたします。


2013.11.03

USAGI STUDIO 高橋 小野