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
html5media.jsを使ってmp4形式の動画を埋め込みます - CodingMania

2014/9/11

html5media.jsを使ってmp4形式の動画を埋め込みます

記述するのはvideoタグのみ、mp4形式の動画ひとつでIE8以上のブラウザをカバーします。

html5media.min.jsとjqueryを使います。
【本家サイト↓】
HTML5 video and audio tags in all major browsers
【ダウンロード↓】
html5media

データ解凍後、
html5media-master/dist/api/1.1.8 の中身すべてをサーバーにあげる。

【注】Firefoxで動かなかったら、サーバ側に「.htaccess」を作って下記を書く必要があります。
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
※最後の行にも改行を入れておく。

あわせてご参考ください↓
html5のvideo要素だけを使って動画を再生する
「video.js」を使った動画ページ

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="1.1.8/html5media.min.js"></script> 

HTMl

<video src="movie/movie.mp4" width="640" height="360" poster="poster.jpg" controls autobuffer preload="auto"></video>