一定期間更新がないため広告を表示しています
ウェブサイトへの動画の貼り付け〜HTML5とIE7の混在環境にて〜
- 2012.12.24 Monday
- ウェブ屋さんの日常
- 23:23
- comments(1)
- trackbacks(0)
- -
- by やまゆり(みねわき)
ウェブ屋さんの みねわき です。
たまには、ウェブ屋さんらしい記事も書いたりします(笑)
ウェブサイトに動画を貼り付ける場合、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なんですね。
あ、少し前のバージョンなので、今はメニュー変わってるかも!?
たまには、ウェブ屋さんらしい記事も書いたりします(笑)
ウェブサイトに動画を貼り付ける場合、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なんですね。
あ、少し前のバージョンなので、今はメニュー変わってるかも!?
さてさて、どういう方法でもよいのでMPEG4ファイルができたら、FTPでサーバーにアップロードします。
CMSの管理画面から・・・なんて容量が大きすぎて無理な場合が多いですが、可能であればそれでもかまいません。
そうしたら、どういうタグづけをするか、という問題があります。
以下のページ(例はwmvですが)を踏襲するのであれば、以下のような感じでしょうか?
アドレスの部分(ホスト名のみ1箇所、動画のURLが2箇所)は適宜書き換えてください。
⇒wmv動画の埋め込み(IE・Mozilla系共用) | ホームページ作成SEOマニアックス
objectタグがIE向け、embedタグがそれ以外のブラウザ向け、となっているようです。
これでもよいのでしょうが(動作確認してません、すみません!)、
これからはHTML5の時代、<video>タグなど使ってみました。
videoタグはIE8以上(IE9以上かも?)とIE以外、中に入っているobjectタグはIE7以下用です。
上記同様、赤字の部分のURLは適宜書き換えてください。
おっと、これだけではIEでは動きません(汗)
HTMLのDOCTYPE宣言をHTML5のものに書き換えてください。
自動再生のON/OFF、初期画面などの設定は、このへんを参考にいじってみてください。
⇒<video>タグで動画を埋め込む−HTML5リファレンス
自分のためのメモをかねているので、大雑把ですみませんが、少しはお役に立てれば幸いです・・・
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リファレンス
自分のためのメモをかねているので、大雑把ですみませんが、少しはお役に立てれば幸いです・・・
- 2012.12.24 Monday
- ウェブ屋さんの日常
- 23:23
- comments(1)
- trackbacks(0)
- -
- by やまゆり(みねわき)
- コメント
- 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
-
- kyrie irving shoes
- 2018/03/04 11:21 PM
- コメントする
- この記事のトラックバックURL
- トラックバック
- お友達・パートナーリンク
-
登録されたブログから、最新記事10件を表示しています
Powered By 画RSS
- その他リンク
-
Koji Minewaki
バナーを作成
- なかのひと
- recommend
- sponsored links
- プロフィール
- ⇒プロフィール
- 最近のコメント
-
- 01/09 levis outlet さん/Explzh:Macで圧縮したZIPファイルをWindowsで文字化けなく解凍するツール
- 03/24 lebron shoes さん/Explzh:Macで圧縮したZIPファイルをWindowsで文字化けなく解凍するツール
- 03/24 ultra boost さん/社会保険料試算ツール
- 03/05 air max 90 さん/<a>タグのtitle属性
- 03/04 kyrie irving shoes さん/ウェブサイトへの動画の貼り付け〜HTML5とIE7の混在環境にて〜
- 03/02 kd shoes さん/GmailからSMTPサーバー経由でメールを送る
- 01/01 坂崎文明 さん/よいお年をお迎えください。
- 11/21 みんみ さん/アメブロの商用利用について
- 02/06 syatin さん/Domain Notificationというメールにご注意
- 01/11 make up さん/microSDカード
- 最近のトラックバック
-
- 10/30 渋谷高雄の実践セミナーDVD/機能矯正のクオリア
- 10/24 【全国】(歯科医院)20906件 名簿「病院名・FAX番号」/機能矯正のクオリア
- 10/08 睡眠時無呼吸症候群を自力で克服する方法/トーユー歯科クリニック様のウェブサイトをリニューアルしました
- 09/16 睡眠時無呼吸症候群を自力で克服する方法/トーユー歯科クリニック様のウェブサイトをリニューアルしました
- 08/25 睡眠時無呼吸症候群を自力で克服する方法/トーユー歯科クリニック様のウェブサイトをリニューアルしました
- 07/26 教えてください/パソコン壊れた(>.
- 07/25 教えてください/パソコン壊れた(>.
- 06/09 沖縄ホームページ制作やSEOで頑張る!沖縄ホームページ制作工房「WebCrafts」/Web Site Expert #30
- 02/04 激安ブランドショップ - ミニオンハウス別館/バレンタインのチョコレートは決まりましたか?
- 11/09 takatoのblog/仕事のあたりまえは、すべてルールにまとめなさい!
- 最新記事
-
- 11/28 酉の市
- 11/18 iPhone 6の契約に立ち会いました。人のだけど・・・
- 04/03 「生きるアシスト.com」のウェブサイトがリニューアルオープンしました
- 04/03 「世界一大きな授業2014」のウェブサイトを公開しています
- 01/01 2014年、今年もよろしくお願いします
- カテゴリー
-
- HTMLのお話 (2)
- SEO・検索エンジン (2)
- SNS (1)
- ウェブサイト紹介 (36)
- ウェブサイト紹介インタビュー (2)
- ウェブ屋さんの日常 (159)
- セキュリティ (2)
- セミナー・イベントレポート (32)
- セミナー・イベント紹介 (15)
- ツール紹介 (29)
- 映画紹介 (3)
- 記事紹介 (3)
- 仕事の動向 (29)
- 書籍紹介 (28)
- 小技紹介 (4)
- 人気記事ランキング (8)
- 用語 (1)
- カレンダー
-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
- このブログ内を検索
- mobile