videoタグの動画をcanvasを使って表示する | スターフィールド株式会社
html5のvideoタグを使って動画をサイトに組み込む場合、スマホで動画を再生するとフルスクリーン表示になってしまいます。iosは基本的にフルスクリーン表示になるはずです。 動画上をクリックして表示されている物の情報を出すなどインタラクティブなサイトを作ろうとすると、このフルスクリーン表示が問題になってしまいます。 今回はこのフルスクリーン表示を何とか解消できないかと思い、videoタグの動画をcanvasに出力する方法を探ってみました。 videoタグの動画をcanvasに切り取る demo1 まずはhtmlです。videoタグで動画を設置して、動画の出力先となるcanvasと動画を出力させるためのbuttonも作っておきます。 <video controls id="v" width="480px" height="270px"> <source src="video/sample1
videoタグとコーデックのお話し – アウトブレイク！[outbreak]
html5には動画を文書に埋め込むための<video>タグがありますね！ html5も2012年12月17日にW3Cが策定完了の発表を行ったり、2013年1月6日には全国のコワーキングスペースなどで新春!!HTML5KARUTA大会が行われるなど、話題にも事欠きませんが、流行のiPad、iPad miniなどiOS系ではFlashなどの技術が基本的には使えないなど、動画の世界もhtml5を利用した技術へとシフトしてきた感があります。 当方も今までFlashやWMVで提供していた動画を、各種スマートフォンやタブレットなどでも再生ができるように<video>タグによる動画再生へと変更することにしました。が！これが意外と面倒でしたよっと…技術的な覚え書きを残しておきます。 まずはhtml5のコードですね。 一応、現在作成中のサイトはIE7以下をばっさり切り落として作成しているので、IE8以降と一
オープンソースのHTML5動画プレイヤー「Video.js 4.0」がリリース | OSDN Magazine
オープンソースのHTML5動画プレイヤー「Video.js」開発チームは5月9日、最新版「Video.js 4.0」をリリースした。米Brightcoveのプロジェクトとなってから初のリリースとなり、性能、安定性などが強化されている。 Video.jsは動画プレイヤーをWebサイトなどに埋め込むためのJavaScriptライブラリ。JaavaScriptファイルやCSSファイルをHTMLファイル内でロードし、いくつかのタグを記述するだけでWebページ内に動画プレイヤーを組み込むことが可能になる。動画の再生エンジンとしてはHTML5やFlashなどが利用でき、利用できる環境や埋め込む動画ファイルの形式などに応じて適切なエンジンが選択される仕組み。APIを使ったプレイヤーの操作やCSSを利用した外観の変更、プラグインといった機能も備える。 Vine、Twitpicなどのサイトで利用されており、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
