Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
「video.js」を使った動画ページ - CodingMania

2011/6/5

「video.js」を使った動画ページ

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 -->