CSSを使ってコントロール部分(表示)を統一。変更も可。フルスクリーン表示も可。
videoタグに対応していないブラウザに対してFlowplayerを使ったFlash製動画プレーヤに切り替え。
横幅、縦幅の指定が必要です。
本家サイト>>>Video.js
動画の変換には、Miro Video Converterを使用しました。
【注】Firefoxで動かすには、サーバ側に「.htaccess」を作って下記を書く必要があります。
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
※最後の行にも改行を入れておく。
文字コードは Shift_JIS で、改行コードは LF 。
.htaccess ファイルを設置したディレクトリ以下に適用されます。
パーミッションは604
サーバーによって違いがあるかもしれません。
【注】safariはQuickTimeがインストールされていないと動かなかったです。
あわせてご参考ください↓
html5のvideo要素だけを使って動画を再生する
html5media.jsを使ってmp4形式の動画を埋め込みます
JSを読み込みます
<script src="video.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8"> <script type="text/javascript">VideoJS.setupAllWhenReady();</script>
HTMl
<!-- Begin VideoJS --> <div class="video-js-box"> <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> <video id="example_video_1" class="video-js" width="640" height="360" controls="controls" preload="auto" poster="poster.jpg"> <source src="movie/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie/movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["https://codingmania.net/demo/video/0003/poster.jpg", {"url": "https://codingmania.net/demo/video/0003/movie/movie.mp4","autoPlay":false,"autoBuffering":true}]}' /> <!-- Image Fallback. Typically the same as the poster image. --> <img src="poster.jpg" width="500" height="309" alt="日本の滝の映像" title="日本の滝の映像" /> </object> </video> </div> <!-- End VideoJS -->