videoタグによる埋め込み動画がiPhoneでのみ表示されない時の対処法
先日、videoタグで設置している動画が、iPhoneでのみ表示できないという問題に遭遇しました。MacbookやiPadのSafariでは再生できており、iPhoneだけ動画の部分が真っ白になってしまうという現象です。 結果的に属性を1つ追加するだけで解決しましたので、備忘録として残しておきたいと思います。 videoタグによる埋め込み動画がiPhoneだけ表示されない時の対処法 iPhoneでvideoタグの動画が表示されない時は、playsinline属性をvideoタグに追加してあげます。以下のような感じです。 <video poster="example.jpg" preload="none" muted autoplay playsinline> <source src="example.mp4"> </video> playsinline属性については、MDNによると以下のよ
料理動画を支える技術 - クックパッド開発者ブログ
インフラストラクチャー部 星野(@con_mame)です。 少し前から、一部レシピページに料理動画を掲載していました。当初はYoutubeを使用していましたが、本日から自社配信に切り替わりました。現在はまだ掲載数は少ないですが、今後掲載数を増やしていきたいと考えております。 そこで、今回は、動画配信プラットフォームの裏側がどうなっているかという点を簡単にですがご紹介したいと思います。 構成図 構成図を見ていただくのが一番わかり易いと思うので、最初に掲載します。 見て分かる通り、今回は全てAWSのサービスを使用して構築しています。 今回使用したサービスは エンコード: Elastic Transcoder データストア: DynamoDB + DynamicDynamoDB ストレージ・配信: S3 + CloudFront エンコード通知など: SNS 今回、構築までの期間とエンコードや動
第1回 MacBookAirを使ったUstreamの基本 | gihyo.jp
はじめに 私は2008年にエンジニア向け勉強会でUstreamを使ったライブ中継をし始めました。その後、毎年いろいろな勉強会やカンファレンス（以後は「イベント」と表記します）で中継担当スタッフとして参加してきました。昨年（2012年）には「エンジニアサポート新年会2012 CROSS」「札幌RubyKaigi2012」や「PHP Matsuri 2012」などの大規模なイベントでも中継スタッフとして参加しました。 また、これらの勉強会やカンファレンスでのライブ中継が終わった後には、その録画データを公開するようにしています。 「イベントに気が付かなかった」「開催時間に都合が悪くて中継を見られなかった」という方々が少なからずいるため、「後から閲覧できる環境」を整えるのが良いかなと最近は考えています。いわゆる「ロングテール」な考えですね。 録画データの公開という流れでは、Ustreamの録
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
BigVideo.js - The jQuery Plugin for Big Background Video
BigVideo.js The jQuery Plugin for Big Background Video (and Images) 12-30-2015 Update This project is no longer under active development. Much has changed since the summer of 2012 when BigVideo.js was launched. For more current information on implementing video backgrounds, check out these links: CSS Tricks - Should I use a video as a background? Dudley Storey - Create Fullscreen HTML5 Page Backgr
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」:phpspot開発日誌
ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」 2010年06月10日- Video LightBox - Embed video to your website with beautiful Lightbox effect! ページに動画を埋め込む際につい使ってしまいたくなるjQueryプラグイン「Video LightBox」。 名前から推測するに、単に動画をLightBox化しただけでしょう、と思いきやなかなか素晴らしいプラグインになっていたのでご紹介です。 動画のサムネイルを次のように様々なスキンによって修飾できます。クリックすればニュイーンとLightBox表示されるというオシャレさ加減がいいです。 更に埋込可能な動画形式が豊富で、flv, mp4, 3gp や、外部動画サイトのYoutube, Facebook, Goo
動画変換ソフト｢HandBrake｣を使って、iPadに最適化した動画を作る方法
動画変換ソフト｢HandBrake｣を使って、iPadに最適化した動画を作る方法2010.06.01 22:0013,798 iPadのサイズに、ジャストサイズの動画ですよ。 iPadの動画サイズって、1024×768なので、DVD（720×480）よりも大きなサイズの動画再生が可能。つまり、より高画質な動画の再生が可能になっています。 でも問題なのが、動画のエンコード。 魅力なiPadでの動画再生だけど、今のところiPadに最適化された動画の書き出しに対応しているソフトが少ないんです。ということで今回はメジャーな動画変換ソフト｢HandBrake｣を使って、HD動画をiPadに最適化した動画に変換する方法を伝授したいと思います！ （以下筆者ブログTek-Safari.comより転載） ●iPadの画面サイズ XGA 1024×768ピクセルとなっています。 繰り返しになりますが、DVDが
グーグル、オープンソースでロイヤリティフリーの動画規格「WebM」を発表
Googleは米国時間5月19日、オープンソースでロイヤリティフリーのビデオフォーマット「WebM」を発表した。MozillaおよびOperaが、同エンコーディング技術を自社のブラウザでサポートすると表明しており、Googleは、同社のYouTubeサイトで対応すると約束した。 「WebMプロジェクトは、すべての人々が無料で利用できる、ウェブ向けの高品質なオープンビデオフォーマットを開発することを目的としている」とWebMのウェブページには記されている。予想されていたとおり、Googleは19日、Google I/Oカンファレンスと連携してこの取り組みを働きかけた。 WebMの提供によって、Googleがどれだけの成功を収められるかはまだわからないが、同社には、ウェブに対する大きな野望、強力なブランド、YouTubeの高い人気に支えられる絶大な影響力、そして、WebMプロジェクトを妨げる法
Any Video Converter
Any Video Converter Ultimate 動画変換 + 音声変換 + 動画ダウンロード + 画面録画 + DVDリッピング・変換 + DVD作成 + 動画編集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
H2MD（エイチツーエムディー）-ムービーミドルウェア- / ミドルウェア「AXIP」シリーズ