Top » ホームページへの動画埋め込みtrial
 スマホでの動画閲覧も考えて、サイトへの動画埋め込み方法を Flash から html <video> タグを使ったH.264形式のmp4ファイル埋め込みに変更しました。このページではhtml <video> タグを使った埋め込み方法 と 私なりのtipsを紹介しています。「ホームページへの動画埋め込み」としてはある程度出来てきたので、今後は動画編集方法や撮影について研究していくつもりです。尚、「 Flashでの動画埋め込み」は今後余り使わないと思いますが、設置方法残しておきます。(あまりメンテナンスしませんけど)

ホームページへの動画埋め込みtrial

 最近動画が埋め込まれているサイトを多く見かけるようになり、私のサイトにも動画を埋め込みたくなりました。試行錯誤の結果何とか埋め込み出来るようにはなりました。まだ単純に埋め込み出来たというレベルで、まだまだ発展途上です。
追記(2015年3月30日)
 スマホ対応全く考慮せずにこのサイト構築してましたが、やはりスマホ対応が必要と感じてその研究始めました。Googleのウェブマスター ツールにも「モバイル ユーザビリティ上の問題が検出されました」と出てくるようになり、詳細見てみるとFLASHを使用している事自体が問題として出てきています。試しに娘のiphoneでこのサイト見てみたところ(恥ずかしながら私はガラゲー族なので)、やはりFLASHは再生できませんでした。スマホにFLASH PLAYERインストールすれば見れるようになるんでしょうが、そんな事する人は希でしょう。
 対応としては、html <video>タグを使って動画埋め込むのが無難だと思います。2015年3月10日に追記したように、最新版の主要PCブラウザ(IE,CHROME,Firefox)で, <video>タグでの動画埋め込み動作確認出来ましたし、娘のiphone5でも<video>タグでの動画再生出来ました。
追記(2015年4月07日)
 jQueryを使用する方法ですが、html5 <video>タグでのプレイリストを作成する方法を発見しました。その方法を追記しました。これで<video>タグの使い勝手が良くなると思います。
<video>タグでのプレイリスト作成

機材と使用ソフトウエアの紹介

【撮影機材】
 Cybershot DSC-W270
 Cybershot撮影モード:1280x720(ファイン)
 ファイル保存形式:MPEG (拡張子:MP4 ここが曲者で、動画埋め込みに結構苦労した部分です。詳細は後述で。)

【ビデオ変換ソフト】
 Free Video Converter(フリーソフト)
  入手先: http://www.freemake.com/jp/free_video_converter/
  Cybershotの動画ファイルを埋め込みに必要なビデオ形式に変換するためのソフトウェアです。
  この手のフリー高機能ソフトの場合、デフォルトでインストールすると勝手に色んなソフトインストールされてしまいます。インストールウイザードに注意しながらのインストール必要です。念のため。

【Flash動画プレーヤー】
 Flaver3とFladanceを試してみました。それぞれのプレヤーの入手先は、
  Flaver3: http://rexef.com/webtool/flaver3/
  Fladance: http://www.streaming.jp/fladance/

 まだ試してませんが、他にもJW Playerとか色々あるようです。
 また、HTML5のvideoタグでも動画再生できるようです。 が、今のところ成功してません。継続研究中です。
 私がハマったのは、Sony Cybershotでの動画fileの拡張子mp4だった事。Flaver3にしろFladanceにしろ各HPの説明見る限り、高画質mp4動画の再生可能と書かれたいたので、Cybershotの動画fileをそのままuploadしてみたがうまく再生できなかった。色々調べてみたところ、拡張子がmp4となっていてもコーディック形式等が異なるものがあるようです。

 左はビデオ変換ソフト Free Video Converterの画面だが、上がCybershotのfileをそのまま開いた状態、下段はmp4変換をした後。CybershotはMPEG形式に対し返還後はH264に変わった。H264形式のmp4 fileをuploadしたところ動画再生できるようになった。

 Flash playerの場合、flv形式の動画fileが一般的というような記事も見かけたので、flvも試してみた。ビデオ変換ソフトの性能にもよりけりかもしれないが、個人的にはH264形式のmp4 fileの方が画質が良いような気がするので、私のHP 動画再生はH264 mp4にするつもり。mp4動画の確認するときも、windowsの media playerで再生できるので何かと便利という点もある。
追記(2014年6月06日)
 このページでは説明の為に短い動画ソース使ったので、mp4でもflvでもダウンロードに要する時間体感的に余り変わりませんでしたが、mp4形式の長い動画だとダウンロードの時間が物凄く気になります。その場合には、flv形式のファイル使った方が視聴者にフレンドリーかと思います。

(2015年4月27日)
 スマホ対応の為に動画埋め込み方法を Flashから html <video> タグに変更したので、必然的にH.264形式 mp4ファイルでの埋め込みになりました。
PR
このサイトもロリポップレンタルサーバー上に構築されています。安いし、高機能だしなかなか良いですよ。

HTML5のvideoタグによる動画再生


 HTML5ではvideoタグによる動画埋め込みが可能という事なので試してみた。IE9以上のブラウザならvideoタグがサポートされているらしい。私のPCはIE10になっており、動作環境としては問題ないはずだが、現時点で動作していない(上のプレーヤー)。htmlのタグ記述は次の通り。


 Videoのソースは、H264形式のmp4 file。記述に間違いあれば、指摘頂けると幸いです。引続き研究します。
追記(2014年5月24日)
 今回のvideoタグサンプルコード、Chromeでは動作するようです。IE、Firefoxではまだ動作してません。autoplayで自動再生にしてましたが、ページが立ち上がるたびに自動再生し、音がうるさいのでautoplay外しました。
追記(2015年3月10日)
 久々にIE、CHROME、Firefoxで試したところ、いずれのブラウザでも<video>タグ動作してました。特にソース変えてないので、各ブラウザがupdateされて動作するようになったのだと思います。

html5 <video>タグでのプレイリスト - jQueryを使用(2015年04月06日追記)

 サイトスマホ対応の為に、Flashを止めて<video>タグを使用した動画埋め込みにする事にしましたが、htmlとcssだけでは単独の動画ファイルしか再生できないなど、使い勝手が余り宜しくありません。 <video>タグでのプレイリストを発見しましたので、その方法を書いておきます。 今回見つけた方法は、jQueryライブラリーが必要となります。

jQueryの導入
 jQueryは、本家サイトのダウンロードページから、入手します。この記事を書いている時点(2015年04月06日)では、ver1.11.2が最新です。リンクをクリックしてしまうとブラウザにコードが表示されてしまいますので、マウス右クリック「名前を付けてリンク先を保存」でライブラリーをダウンロードします。
 ダウンロードサイトには幾つかのファイルが準備されているのですが、
   Download the compressed, production jQuery 1.11.2
が宜しいのではないかと思います。「名前を付けてリンク先を保存」でダウンロードするとデフォルトだと、"jquery-1.11.2.min.js"というファイル名で保存されます。このファイルをwebサイトにuploadしておきます。

スタイルシートへの追記
 スタイルシート内で、再生動画のリスト表示やvideoプレイヤーのサイズを定義しています。

javascriptの追加
 以下をhtmlファイルの <head> タグ内に記述。

<video>タグをhtmlファイルに追加
 各要素は、idでスタイルを定義していると共に、javascriptでもidを使って動画の切り替えしています。

プレイリスト有のプレーヤー
 プレーヤー下のリストを選択すれば、各々の動画ファイル再生出来る様になりました。
  • デモ動画ファイル1
  • デモ動画ファイル2

Flaver3による動画再生

 http://rexef.com/webtool/flaver3/より、flaver3.zipをダウンload。展開すると「flaver.swf」「flaver.xml」「readme.txt」の3つのfileが出てくる。このうち「flaver.swf」を自分のwebサーバーにuploadする。私の場合は、

/flaver3/flaver.swf

に配置した。サーバー上での属性は変更する必要なし。

 次にプレイヤー貼付けのhtmlソースだが、Flaver3のホームページに「プレイヤー貼付HTMLソース簡単作成フォーム」を提供してくれているので、これを利用すれば簡単。

 プレイヤー貼付HTMLソース簡単作成フォーム  http://rexef.com/webtool/flaver3/tag-form.html
HTMLソース作成に必要な情報は、
必要情報私の例
サーバー上でのflaver.swfのパス/flaver3/flaver.swf
動画サイズ動画ファイルのアスペクト比に準拠すればいいのでは? CyberShotは16:9なので、このページサンプルでは320x180としたが、Flaver3のツールでHTMLソースでは330x230に変更された。
動画ファイルのパス、ファイル名/jp/movie/20130812_aomori/2013081201aomori.mp4 (H264のmp4の場合)
   または
/jp/movie/20130812_aomori/2013081201aomori.flv (flvの場合)
勿論、事前に動画ファイルをこのパスにuploadしておく必要あり。
プレーヤー停止時用静止画のパス、ファイル名/jp/movie/20130812_aomori/moviethum01.jpg
必須ではないが、静止画ないと真っ黒な待機画面になる。

 動画ソースは、h264形式のmp4
 Flaver3のホームページで作ってもらった、htmlソースはこんな感じ。


 動画ソースは、flv
 Flaver3のホームページで作ってもらった、htmlソースはこんな感じ。



 複数の動画ファイルでプレイリスト作る場合。リストの為のxmlファイルの作成が必要。
 Flaver3のホームページで作ってもらった、htmlソースはこんな感じ。


 プレイリストのデータとなるxmlファイルは、今回は「flaver.xml」とし、動画ファイルがあるディレクトリーにuploadする。Flaver3のHPに説明があるので詳細はそちらを見て頂くとして、今回のtrialとしては次の通り。



 動画のリストを追加する場合は、を追加すれば良いようだ。尚、HPの説明にも注意があったが文字コードはUTF-8で保存する必要あり。

Fladanceによる動画再生

 http://www.streaming.jp/fladance/から、fladanceをダウンload。執筆時点の最新版はバージョン2.1.5で、ダウンロードした圧縮ファイル名は「fladance_v2-1-5.zip」。これを展開すると「fladance.swf」「generator.html」「ソフトウェア利用規約.txt」の3つのfileが出てくる。このうち「fladance.swf」を自分のwebサーバーにuploadする。私の場合は、

/fladance/fladance.swf

に配置した。サーバー上での属性は変更する必要なし。

 次にプレイヤー貼付けのhtmlソースだが、圧縮ファイルに同梱されていた「generator.html」を利用するか、Fladanceホームページ上に提供されている「ふらだんす」 html貼り付けコードジェネレーター を利用する。

 「ふらだんす」 html貼り付けコードジェネレーター  http://www.streaming.jp/fladance/generator.html


HTMLソース作成に必要な情報は、
必要情報私の例
サーバー上でのfladance.swfのパス/fladance/fladance.swf
動画サイズ動画ファイルのアスペクト比に準拠すればいいのでは? CyberShotは16:9なので、このページサンプルでは320x180とした。FladanceのツールでHTMLソースでは320x180そのままであったが、プレーヤー両サイドに黒縁が出来てしまった。
動画ファイルのパス、ファイル名/jp/movie/20130812_aomori/2013081201aomori.mp4 (H264のmp4の場合)
   または
/jp/movie/20130812_aomori/2013081201aomori.flv (flvの場合)
勿論、事前に動画ファイルをこのパスにuploadしておく必要あり。
プレーヤー停止時用静止画のパス、ファイル名/jp/movie/20130812_aomori/moviethum01.jpg
必須ではないが、静止画ないと真っ黒な待機画面になる。


 動画ソースは、h264形式のmp4
 Fladanceのコードgeneratorツールで作った、htmlソースはこんな感じ。


 動画ソースは、flv形式
 Fladanceのコードgeneratorツールで作った、htmlソースはこんな感じ。



 Flacanceのプレイリストはまだ勉強中です。設置の仕方分かったら記事更新します。
 動画については、動画の編集、flash playerでの「プログレッシブ再生」と「ストリーミング再生」というのもあるので、引続き勉強続けます。

記事作成日:2013年08月18日
追記:2014年05月24日
追記:2015年03月10日
追記:2015年03月30日