スポンサーサイト

  • 2016.11.28 Monday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

一定期間更新がないため広告を表示しています


にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。
  • 2016.11.28 Monday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

ウェブサイトへの動画の貼り付け〜HTML5とIE7の混在環境にて〜

ウェブ屋さんの みねわき です。

たまには、ウェブ屋さんらしい記事も書いたりします(笑)

ウェブサイトに動画を貼り付ける場合、YouTubeなどの外部サービスを使うのが一般化しています。
外部サービスであれば、OSやブラウザ環境を考えることなく、
動画をアップロードすればサービス側で判断して適切な出力をしてくれるので、ありがたいものです。

しかし、外部サービスを使わないで動画をアップロードして貼り付けたい場合もあります。
閲覧者制限をするなどの場合がひとつあります。
YouTubeでも動画にパスワードをかけることはできますが、それは置いといて・・・

さて、まずは動画の形式ですが、どの形式のものを用意すればいいでしょうか。
一昔前であれば、Flash Video(FLV)形式ならたいていの環境で閲覧できる、とされていたようですが、
モバイル時代の今、iPhoneやiPadなどのiOSに対応しないのがネックです・・・
同様に、Windows Media Player(WMV)形式もiOSには対応しません。

というわけで、使われることが多い形式では、MPEG4(MP4)あたりが無難みたいです・・・

さて、動画の準備ですが、フリーでMPEG4を生成するソフトを探すのは結構大変・・・
私は以前動画の処理にかなり苦労した経験から、フリーソフトをあたるのは諦めて、
CyberLinkの製品を使うようになりました。
MediaShowが該当する製品ですが、以前セット商品を格安で販売していたときに購入しました・・・

⇒高解像度Blu-ray(ブルーレイ)&DVD再生ソフトとビデオ編集の開発元 - サイバーリンク (CyberLink)

CyberLink MediaShowでもMPEG4に変換するのは悩みました。
MPEG4で出力すると、m2tsとかいう拡張子のついた形式が出力されてしまい、なんじゃこりゃ・・・?
よくよく見ると、iPod対応ファイルに変換(!)というメニューがあり、これがMPEG4なんですね。
あ、少し前のバージョンなので、今はメニュー変わってるかも!?

CyberLink MediaShowの画面

さてさて、どういう方法でもよいのでMPEG4ファイルができたら、FTPでサーバーにアップロードします。
CMSの管理画面から・・・なんて容量が大きすぎて無理な場合が多いですが、可能であればそれでもかまいません。

そうしたら、どういうタグづけをするか、という問題があります。

以下のページ(例はwmvですが)を踏襲するのであれば、以下のような感じでしょうか?
アドレスの部分(ホスト名のみ1箇所、動画のURLが2箇所)は適宜書き換えてください。
⇒wmv動画の埋め込み(IE・Mozilla系共用) | ホームページ作成SEOマニアックス

<!-- saved from url=(0022)http://yamayuri-w.jugem.jp -->
<object id="player" width="320" height="285" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="autoStart" value="false">
<param name="URL" value="http://yamayuri-w.jugem.jp/video.mp4">
<embed name="WMP" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://yamayuri-w.jugem.jp/video.mp4" width="320" height="285" autostart="0" showcontrols="1"></embed>
</object>


objectタグがIE向け、embedタグがそれ以外のブラウザ向け、となっているようです。
これでもよいのでしょうが(動作確認してません、すみません!)、
これからはHTML5の時代、<video>タグなど使ってみました。

<video controls src="http://yamayuri-w.jugem.jp/video.mp4" width="320" height="285">
<object id="player" width="320" height="285" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="autoStart" value="false">
<param name="URL" value="http://yamayuri-w.jugem.jp/video.mp4">
</object>
</video>


videoタグはIE8以上(IE9以上かも?)とIE以外、中に入っているobjectタグはIE7以下用です。
上記同様、赤字の部分のURLは適宜書き換えてください。

おっと、これだけではIEでは動きません(汗)
HTMLのDOCTYPE宣言をHTML5のものに書き換えてください。

<!DOCTYPE html>



自動再生のON/OFF、初期画面などの設定は、このへんを参考にいじってみてください。

⇒<video>タグで動画を埋め込む−HTML5リファレンス

自分のためのメモをかねているので、大雑把ですみませんが、少しはお役に立てれば幸いです・・・

にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。

スポンサーサイト

  • 2016.11.28 Monday
  • -
  • 23:23
  • -
  • -
  • -
  • by スポンサードリンク

にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。
  • 2016.11.28 Monday
  • -
  • 23:23
  • -
  • -
  • -
  • by スポンサードリンク
<< 明治大学ヒューマンライブラリーに行ってきました(2012-12-03 01:12:50) | 今年もよろしくお願いします!(2013-01-01 01:10:25) >>
コメント
http://www.lebron15-shoes.us.com/ lebron soldier 11
http://www.curry4-shoes.us.com/ under armour curry 3
http://www.fitflops-sale.us.com/ fitflop sale
http://www.katespadepurses.us.com/ kate spade new york
http://www.nikeairmax-90.us.com/ nike air max women
http://www.airmax90shoes.us.com/ air max 97
http://www.pumafentyrihannashoes.us.com/ puma slippers
http://www.kd10-shoes.us.com/ kd 10
http://www.pandora-jewelrysale.us.com/ pandora charms
http://www.yeezyboost350shoes.us.com/ yeezy boost 750
http://www.jordan11spacejams.us.com/ air jordan
http://www.jordans11shoes.us.com/ jordan retro
http://www.salomonspeedcross3.us.com/ salomon shoes
http://www.adidasnmdrunnerr1.us.com/ adidas nmd womens
http://www.fitflopsshoes.us.com/ fit flops
http://www.louboutinredbottoms.us.com/ red sole shoes
http://www.kyrie-4.us.com/ kyrie 4
http://www.hermesbirkin-handbags.us.com/ hermes handbags
http://www.adidasyeezy-350.us.com/ ultra boost
http://www.pandorajewelryrings.us.com/ pandora earrings
http://www.birkenstocksandalssale.us.com/ birkenstock clearance
http://www.adidas-ultraboost.us.com/ ultra boost black
http://www.nikeairvapormaxflyknit.us.com/ nike vapor max
http://www.longchampbag.us.com/ longchamp backpack
http://www.pandorajewelryscharms.us.com/ pandora
ドリフトliuyuzhen
コメントする









この記事のトラックバックURL
トラックバック
お友達・パートナーリンク
登録されたブログから、最新記事10件を表示しています
Powered By 画RSS
その他リンク
Twitter
Facebook
Koji Minewaki

バナーを作成
Skype
Skype Me™!
なかのひと
あわせて読みたい
あわせて読みたいブログパーツ
recommend
recommend
sponsored links
powered
無料ブログ作成サービス JUGEM
プロフィール
プロフィール写真
⇒プロフィール
最近のコメント
最近のトラックバック
最新記事
カテゴリー
アーカイブ
カレンダー
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>
このブログ内を検索
others
mobile
qrcode