こんにちは、WEBマーケティング部の杉尾です。 今回と次回でvideoタグについてお話しさせていただきます。 よろしくお願いします。 videoタグとは videoタグはHTML5から新しく追加された、動画メディアを再生するためのタグ要素です。 これにより、閲覧者の環境にプラグインがインストールされているかどうかを気にすることなく、Webサイトに動画を設置できるようになります。 IE8への対応を含めたコードを載せていますので、下記をご覧ください。 説明不要でコードだけ欲しい方はこちらへ。 ファイル形式は MPEG-4です。 videoタグ実装前段階 まず、Web制作者ご用達のcaniuse.comを見に行きます。(下図) 主要ブラウザ(IE,Firefox,Chrome,Safari,Opera)の最新バージョンは既にvideoタグをサポートしています。 それに、iOS safariとAn
GitHub - panzi/embedplayer: Unified jQuery interface to various audio/video players without dependency on their official JavaScript libraries. Youtube・Vimeo・Dailymotion等の動画を共通のAPIで操作できる「embedplayer」 再生、ボリューム変更、停止などの動画操作をソースは別々でも共通のAPIによって制御できる点が特徴で便利そうです 関連エントリ 360度のパノラマビデオを再生できる動画プレイヤー「Valiant360」 HTML5動画プレイヤーを拡張させられる「jquery-video-extend」 HTML5動画をフルスクリーンバックグラウンドに簡単設定できる「BIDEO.JS」 Youtube,Vimeoなどの
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:(ハート)や:smile:(スマイル)などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル(.wav, .mp3
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね! 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう!というのが今回の記事の内容です。 では早速行きましょう! オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
こんにちは、デザイナーのぺちこです。 すっかり秋です。今年はどこかに紅葉狩りに行きたい・・・。 さて、私は以前videoタグを使ったオリジナルUIの全画面動画の記事を書いたのですが、動画コンテンツが当たり前に使われるようになってきて、気付いたことがいくつかありました。 動画の用意が少し面倒くさい mp4、ogv、webmと3つのデータを用意するのがひと苦労。動画の長さにもよりますが、変換にもけっこう時間を要します。 動画データが重い 1つだけでもそれなりの重さがありますが、3つもサーバーにアップするとなると、そりゃ重いです。ソースをGIT管理していると、Push/Pullにも時間がかかってストレスフルです。 二重管理が面倒くさい video対応してないブラウザにはYouTubeを出すようにしていましたが、動画に修正が入るなら両方修正しないといけません。 1ページ内の動画が増えてきたら色々大
HOMEJavaScriptmp4 動画(ビデオ)を素の HTML ファイルを作っていろいろなブラウザ(古い IE とか)で再生できるようにするやり方(MediaElement.js) 背景 自分の Web サイト(ホームページ)などで動画(ビデオ)を再生できるようにしたいと言う要望は良く聞きます。 WordPress などの CMS を使っていれば、プラグインで対応するなど簡単な方法があるのですが、素の HTML で作られたサイトだと、なかなかいろいろなブラウザに対応させるのは大変です。 解決方法 いろいろなやり方はあるのですが、自分の中で簡単だと思った MediaElement.js を利用した方法を今回はご紹介します。 MediaElement.js はのサイトこちらから。 サイトにもやり方は載っていますが、自分の中での最低限のステップを載せておきます。 1. FTP サーバへ Me
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く