[WP/web]全端末対応の自前動画をサイトに埋め込むには(未決)



 

様々な端末のWEBブラウザで動画を再生させたい。

HTML5のvideoタグで埋め込める。

動画の形式はAndroid対策のため、以下の選択しか無いっぽい。

動画形式=mp4(Firefox、Opera、IE8以下で未対応)
コーデック=h.264

(全てで見るには通常、H.264、WebM、Oggが必要)


Android対策

videoタグ
onclick=”this.play();”

Basic認証サイト再生不能

sourseタグ
type属性駄目

機種依存の問題もあるもよう。。。


videoタグ未対応ブラウザ対策

Flashフォールバックを使えるJavaScriptライブラリを仕込む。※結論これ

MediaElement.jsを使った複数の動画を順番に再生させる【jQuery】

http://blog.e-riverstyle.com/2012/11/mediaelementjsjquery.html

スマートフォン向けHTML5のVIDEOタグを使った動画再生 ~MediaElement.js編~

http://blog.alt-scape.com/archives/415

HTML5なVideo Playerライブラリ、VideoJSとMediaElement.js

http://www.inazumatv.com/contents/archives/6181

H.264のみを指定 | MediaElement.js | テスト動画と動画の表示テスト ※ここ参照する

http://etc.dounokouno.com/testmovie/mediaelement/h264.html

Win chrome×(Ogg形式も入れれば行けそう)、Mac chrome◎、iPhone◎、Win IE7◎、Win IE10◎、X06HT◎、SH-03C◎、Mac Firefox◎、自宅Win chrome◎

WordPressのHTML5ビデオプレイヤープラグインなどを仕込む。

MediaElement.js – HTML5 Video & Audio Player

http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-player/ ※ここでプラグインDLと記述の仕方を確認

[video  ogg=”http://fanfanfan.net/wp-content/uploads/2013/04/echo-hereweare.ogg” webm=”http://fanfanfan.net/wp-content/uploads/2013/04/echo-hereweare.webm” mp4=”http://fanfanfan.net/wp-content/uploads/2013/04/echo-hereweare.mp4″]

SH-03C×、Win chrome×、Mac chrome◎、iPhone◎、Mac Firefox◎(単にやり方が悪いだけか?)

動かない理由で考えられること:そもそも動画の形式が間違っている、WordPress用のPluginがおかしい、他の要素とぶつかっている、記述が間違っている。。。。などだろうか? FlashPluginとぶつかっているなどもありそう。このページは重いので、もっと素の状態のページで確認スべきか。他のジャバスクリプトライブラリを試してみるか。ライブラリを使わない方法を模索するか。

これは時間があれば、もう少し探す


参考サイト:

Androidでvideoタグによる動画再生を実装する際の落とし穴

http://d.hatena.ne.jp/genhou/20121023/1350941016

スマートフォン用サイトで動画を扱う時のポイント

http://sogitani.baigie.me/2011/07/smart-phone-movie/

スマートフォン向けにHTML5のvideoタグを使ってみたのでまとめておく

http://today-only.net/html5-video/


FLV形式の動画をMP4に無劣化で変換できるソフト「FLVtoMP4」

http://antarespc.com/tool/flvtomp4.html

Mac MP4,OGG,WebM,WMV,AVI等を自由に変換できる無料動画変換ソフト【 Miro Video Converter 】

http://zxcvbnmnbvcxz.com/mac-mp4-ogg-webm/


美しすぎる!WordPressのHTML5ビデオプレイヤープラグイン8選

http://www.inboundpress.net/html5_videoplayer_wordpress.html

HTML5で動く10の動画プレイヤー

http://www.seojapan.com/blog/html5-video-players


地獄のvideo/audio要素

http://takazudo.github.io/blog/entry/2013-02-06-videoaudio.html

[MediaElementライブラリ] ビデオプレイヤーを表示する ※chromeでも見れている

http://www.openspc2.org/reibun/javascript2/Library/MediaElement/0001/index.html


他を試す:

VideoJS – HTML5 Video Player for WordPress

http://wordpress.org/extend/plugins/videojs-html5-video-player-for-wordpress/

Win chrome×、Mac chrome◎、X06HT◎、SH-03C◎


[サイト作り] [WPプラグイン] Projekktor Video Tag Extension – HTML5 video のタグを投稿に

http://665-667.com/2010/05/21/215251

Win chrome◎(Ogg形式)、Mac chrome◎、iPhone◎、X06HT××(落ちる)、SH-03C×


Hana Flv Player

http://wpmarketing.org/wp-plugins/hana-flv-player/


Win chrome×、Mac chrome◎、iPhone◎、X06HT△(見えない)、SH-03C◎、自宅Win chrome◎


確認してみる

http://tanaka-atsushi.biz/html5


とても気になる情報:

ChromeでHTML5の動画が見れない

http://okwave.jp/qa/q7532663.html


WPに「.webm」アップできない。。。


HTML5ビデオプレーヤーの比較

http://praegnanz.de/html5video/

--


WordPressで、

サイドバーをカテゴリ毎に変える

http://www.devolen.com/blog/wp_custum/change_the_sidebar/

--
IE6,7は切って良い。
キャッシュさせない方法を探す。
--
http://www.htmq.com/html5/004.shtml

http://www.html5rocks.com/ja/tutorials/video/basics/

http://www.brightcove.com/ja/

http://www.slideshare.net/naotori/html5-5311711

---
ストリーミング、プログレッシブダウンロード違い
http://ja.wikipedia.org/wiki/




コメントを残す