[B! Video] yhanada00のブックマーク

Media Source Extensionsを使ってみた (WebM編) - Qiita

モバイルブラウザのビデオ再生でアプリキャッシュが使えるかを再度検証で紹介したように、Androidのブラウザでは、アプリケーションキャッシュを使っても、<video>タグでデータを先読みしてタップしたら直ちに再生する、といった挙動を実現することができませんでした。そこで、少し手の込んだ方式になってしまいますが、Chrome等でサポートされている、Media Source Extensionsを使って、キャッシュされたWebMファイルをXMLHttpRequestでロードして<video>タグで再生してみます。なお、だったらXMLHttpRequestでデータを取得してBlobを生成すればいいのではないか、という声も聞こえてきそうですが、残念ながら、これもまたモバイルブラウザでは上手く行かなかったりします。 Media Source Extensionsの予備知識そもそも、Media

yhanada00 2017/05/11

リンク

HTML5のvideoタグで利用するmp4の動画を作る時のTips - Qiita

最近、スマホやタブレットを使う機会も多いですが、その辺りの端末に動画コンテンツを提供する時に楽なのがmp4形式の動画をvideoタグで貼り付ける事です。ただ、ちょっとした注意点があって、どういう状況で再生するかによって細かい調整をしておかないと、再生開始までにえらく時間がかかるようになって、非常に不便になります。既に作成済みの動画を再生する場合 mp4形式の動画を再生するためにはメタデータ情報が必要です。メタデータは通常ファイルの末尾に付与されます。ファイルサイズが小さい時は気付かないのですが、10分、20分ぐらいあるような動画を再生しようとすると末尾まで読んでから再生できるかどうかを判別するので、再生が開始できるようになるまでに異様に時間がかかるようになります。そこで動画作成時にメタデータをファイルの先頭に移動させておきます。こうする事で、ファイルサイズが大きい動画でも一瞬で再生

yhanada00 2015/07/17

リンク

[HTML5] Amazon Elastic Transcoder で変換した HLS（HTTPライブストリーミング）形式の動画を video タグで再生する | DevelopersIO

例えば、企業でストリーミングを導入したいと思った時、ストリーミングサーバの導入や構築に敷居の高さを感じる場合が多いかと思います。特別なサーバソフトを使用しない動画ストリーミング HTTP Live Streaming（HLS）は、Apple によって開発された、動画をストリーミング配信するための規格です。未だ対応しているのは Safari だけですが、標準化（RFC）を目指して仕様も公開されていますし、もちろん Apple 謹製なので iOS でも使えます。今回作成するアーキテクチャ前述の通り、HLS は単純に Webサーバーに置けばストリーミング出来るのですが、それだと味気がないので、動画変換サービス Amazon Elastic Transcoder を使って、HLS変換を行い、それを CloudFront 経由で、 HTML5 の video タグで再生出来るようにして

yhanada00 2015/07/17

リンク

【Web制作】HTML5のvideoタグにはMP4形式動画だけ指定すればよい（IE8対応）＠2014年末

概要 ▶ 2014年末ではほとんどのウェブブラウザーがMP4形式の動画に対応しています。videoタグもシンプルになります。非対応のIE8はライブラリーの活用を。 ●videoタグは複数ソースが設定できて便利HTML5のvideoタグでは以下のように書くことで複数のファイルソースを指定することができます。 <video> <source src="example.mp4"> <source src="example.webm"> <img src="example.gif"> </video> 上記の例だと、最初に「example.mp4」の再生をトライ「example.mp4」を再生できない場合、「example.webm」の再生のトライ「example.webm」を再生できない場合、「example.gif」を表示となります。簡単な書き方で、再生できない場合の複数のソースの指定

yhanada00 2015/07/17

リンク

Welcome

Our documentation hub is here to help you create and deliver beautiful video experiences with the most powerful video APIs on the web. Before you can begin using JWP's services, you need a JWP user account. Use one of the following options to obtain your user account: I am a user at company that already uses JWP. Request an account from your company admin. Follow the instructions in the welcome em