メインビジュアル (ヒーローイメージ) や背景の動画による演出 | Accessible & Usable
公開日 : 2017年2月16日 カテゴリー : ユーザビリティ / アクセシビリティ ウェブサイトのメインビジュアル (ヒーローイメージ) や、メインコンテンツの背景が、動画になっているものを最近よく目にします。高品位な動画を提示することで、サイトが扱う商品やサービスの特長、雰囲気、質感、姿勢、などをユーザーに効果的に印象付けることが期待できます。以下は、本記事執筆時点で見つけた数ある中のほんの一例です。 大学 (学部案内) 子ども/ファミリー向け写真館 スイーツのお店 宿泊施設 炭酸入浴剤の販売 キッズバイクのプロモーション などなど... こうした演出は、商品やサービスの「予期的 UX」醸成やブランディング訴求といった側面が重視される中、今後ますます増えててゆきそうですが、ウェブコンテンツである以上はこうした側面を十分に活かしつつも、基本的なユーザビリティやアクセシビリティをしっかり
Webサイトに動画を埋め込む際のサイズと軽量化方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、HALです。 今回は、動画をWeb用に軽量化するための方法を紹介します！ 軽量化を行わないと、たとえば 1280px × 720pxの30秒ぐらいの動画の場合40MBほどの重さになってしまいます。そのままだと videoタグなどでWebブラウザ上で再生するには大きすぎてしまいます。モバイル端末ならさらに軽量化が必要です。 動画の軽量化をするにはさまざまなツールがありますが、 HandBrakeというツールがとても使いやすかったので、基本の設定方法を紹介していきます。 ※この記事は2022年3月に編集部が情報を更新しました 動画を埋め込む方法 外部リンクで埋め込む YouTubeやVimioに動画をアップロードし、それを外部リンクとして埋め込む方法があります。 YouTubeではさまざまなサイズの動画をアップロードすることができますが、標準のYouTube動画のサイズは1920×
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
![[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）](https://cdn-ak-scissors.b.st-hatena.com/image/square/bacd812f6000c78e30e028d375e68638a387b65a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090501-01.png)
HTML5 アプリケーションをビルドする - 実用的なクロスブラウザー HTML 5 のオーディオとビデオ
これらの相違に対応するため、video タグと audio タグには複数の子 source タグを指定できます。これにより、再生可能なメディア ファイルをブラウザーが選択できます。各 source 要素には次の 2 つの属性があります。 src: メディア ファイルの URL を指定します。 type: MIME の種類およびオプションとして特定のビデオ コーデックを指定します。 h.264 と VP8 の両方のビデオ コーデックを指定する場合、次のようなマークアップを使用します。 <video id="video1" width="640" height="360"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> iOS と Android の以
第4回：音楽を批評するためにブログで音源を「引用」してもいいの？
―「引用」｢転載｣関係／著作権なるほど質問箱（文化庁）より引用 カズワタベ 逆に、この条件を明確にクリアした上で著作物の利用が認められない例外は基本的に存在しないと考えていいんでしょうか？ 水野 はい、「引用」の条件をクリアしていれば、著作物の利用が可能になります。 カズワタベ なるほど。ではその上で、今回のFさんの「音楽レビューにおける音源の使用」が引用に該当するのかを考えていければと思います。具体的にはブログで音楽のレビューを書く際に、音源をアップして聴いてもらいながら読んでもらいたいということでよろしいですか？ Fさん はい、聴いてない曲のレビューを文章だけで読んでも伝わりづらいと思いますし。 カズワタベ 水野さん、今回の相談については内容が明確になってきたかと思うんですが、他に前提として確認しておくべき点はありますか？ 水野 整理しなければいけないのは、今回のFさんによるブログでの
Takazudolog - 地獄のvideo／audio要素
video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi
HTML5のVIDEOタグ使用の注意点など / Maka-Veli .com
※模索して行った物なのでミスリードの可能性がありますのでご注意下さい。 なかなか動かなくてハマリました・・・動画やっぱこわい。。 タグ自体はシンプルなんですが、ブラウザ対応の動画形式が違うんですね。 何が面倒って、その動画形式や対応状況などを加味して用意するのが面倒でした。 用意する動画は mp4 ： Chrome・Safari・IE9 ogv ： Firefox・Opera webm ： Chrome・Opera という具合。 更に、もちろんHTML5をサポートしていないブラウザも有り。 動画の変換ですが、僕はこのツールを使いました。 XMedia Recorde http://www.forest.impress.co.jp/lib/pic/video/vdoenc/xmediarecode.html (窓の社） 読み込んで形式を選択してエンコードボタンをクリ
MediaCoderの使い方 - フリーソフト万歳
Windows 7/8 Mac OSXの便利なフリーソフトの使い方紹介します。iPhoneやAndroid、Windows Phoneなどのスマートフォン関連も。 MediaCoderの紹介です。 対応しているファイルの数がケタ違いです。 とりあえず最強なのでまだインストールしていない方はこの機会にインストールしすることをオススメします。入れて損はないです。使い方もそれほど難しくないです。 新しく使い方や動画エンコード設定を書きなおしました。Mediacoderの使い方2 対応しているフォーマットです。 MP3, Ogg Vorbis, AAC, AAC+, AAC+V2, MusePack, WMA, RealAudio FLAC, WavPack, Monkey's Audio, OptimFrog, AAC Lossless, WMA Lossless, WAV/PCM H.264,
movファイルを編集できるMPEG Streamclipの使い方
普段使っているデジカメ（CASIO EXILIM EX-Z1080）で撮った動画はmov形式で保存されます。デジカメで撮影した動画のいらないところを切ったりくっつけたりという編集をしなければいけなくなったので、mov形式のファイルが編集できるフリーソフトを探しました。でも、movファイルをそのままの形式で編集できるソフトってなかなか無い。それで行き着いたのが、MPEG Streamclipというソフトでした。 [ad#co-1] ダウンロード＆インストール こちらからダウンロードできます。 ・MPEG Streamclip 英語のサイトです。ソフトも英語表記。できれば日本語のソフトがよかったんですが、見つけられませんでした。 英語はかなり苦手。読むとめちゃくちゃストレスを感じます。でも、ダウンロードは簡単でした。上記サイトの「Download MPEG Stremclip 1.2 for
MOVファイルをFLVに変換してWebで公開する
MOVをFLVに変換してWebサイト上でフラッシュプレーヤーを使って公開するということをやりたかったんだけど、いろいろてこずってやっとできた。なかなかMOVファイルをうまくFLVファイルに変換できなくて、かなり時間がかかってしまった。 今回動画変換に使ったのはMPEG StreamclipとBatchDOO！っていうソフト。いろいろなソフトを試してみたんだけど、結局手元にあるソフトを使って変換するのが一番良かった。 この二つのソフトに関しては過去に以下のような記事を書いていたけど、MPEG Streamclipは動画を切ったり貼ったりするのにだけ使っていて動画が変換できるのをすっかり忘れていた。BatchDOO!は最近使っていなかったので存在そのものを忘れていた。 ・mov形式のファイルを編集するソフト ・DVD(VOB)をMOVへ変換する ■MOV→FLV変換 最初はMOVから直接Bat
jQuery.lightpop.js - dogmap.jp
オプションの設定 オプションを設定することで、フレーム枠の見た目を変更したりできます。 オプションは、ざっと次の通り。 通常のオプション overlayBgColor: オーバーレイの背景色 overlayOpacity: オーバーレイの透明度 contentFrameType: 'border' (通常) or 'box' (画像を使用してフレームを表示) contentBgColor: コンテンツの背景色 containerBorderSize: コンテンツの脇に表示する空白の幅を px で指定 containerResizeSpeed: リサイズアニメーション時のスピードを数値で指定 imageLoading: 読み込み中に表示する画像ファイルのパス imageBtnClose: 「閉じる」ボタン用の画像ファイルのパス imageBtnPrev: 「前へ」ボタン用の画像ファイルのパス
トップ - スーパー不用品回収本舗
足立区、荒川区、板橋区、江戸川区、大田区、葛飾区、北区、江東区、品川区、渋谷区、新宿区、杉並区、 墨田区、世田谷区、台東区、中央区、千代田区、豊島区、中野区、練馬区、文京区、港区、目黒区 八王子市、立川市、府中市、町田市、調布市、武蔵野市、三鷹市、昭島市、小金井市、日野市、国分寺市、狛江市、武蔵村山市、多摩市、稲城市、小平市、東村山市、西東京市、清瀬市、東久留米市、青梅市、福生市、羽村市、あきる野市 横浜市西区、横浜市中区、横浜市南区、横浜市神奈川区、横浜市保土ヶ谷区、横浜市港南区、横浜市磯子区、横浜市戸塚区、横浜市栄区、横浜市金沢区、横浜市泉区、横浜市鶴見区、横浜市旭区、横浜市都築区、横浜市港北区、横浜市青葉区、横浜市瀬谷区、川崎市川崎区、川崎市幸区、川崎市高津区、川崎市多摩区、川崎市中原区、川崎市宮前区、川崎市麻生区 横須賀市、鎌倉市、葉山町、相模原市、厚木市、大和市、海老名市、座間市
『video要素』超基本を知る!! | HTML5でサイトをつくろう
video要素について 今回はHTML5新要素の中でも注目度が高い｢video要素｣の基本的な記述方法をご紹介します。 video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画コンテンツがドンドン出てくると思いますので、その時にコンテンツ制作に関わったりアイデアを出せるように今から少しずつ学んでいこうと思います。 video要素の再生とブラウザ表示 video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみます。また、controls属性を指定することで再生・停止ボタンな
ふらだんす | 動画配信システム・動画有料配信サイトを簡単にはじめるなら～｜ストリーミング・ジャパン
「ふらだんす」について 『ふらだんす』はWEBページ上で動画を再生することが出来る、Adobe Flash Playerプラグインを利用したフリーウェアです。 お手持ちの動画をWEB上で簡単に公開でき、一般的なHTTPサーバーからのプログレッシブ再生のほか、著作権保護や大容量コンテンツに対して効果的なFMS(Adobe Flash Media Server)からのストリーミング再生にも対応しています。 WEBページのソースをいじるのが苦手な方でも簡単に設置していただけるよう、専用の貼り付けコードジェネレータをご用意しました。 「ふらだんす」の機能 .flv、.mp4、.f4v形式の動画をWEBページ上で再生 HTTPプログレッシブ、FMSによるストリーミング再生に対応 動画をフルスクリーンで再生可能 貼り付けサイズに合わせて自動的に動画をリサイズ 自動再生、ミュート、音量の調整機能 操作パ
YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方
サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。 この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。 これを使うと自分が作ったボタンで再生や停止が出来るようになります。（他にもいろいろ出来ると思います） SWFObjectを使って動画を読み込む 動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、 APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、 このAPIがFlash Player8からしか対応してないので、この「SWFObject
Webクリエイターのステージを広げる動画スキル習得ステップ | JWDA通信 10年後のWEB業界でも役立つ情報を届ける
Webクリエイターは「動画」を身に付けるべし映像はフイルム・ビデオの時代から演出、撮影、編集と専門のスキルが必要なクリエイティブだった。デジタル化が進行した現在でもその専門性の本質は変わっていないと言えるが、高速なインターネットとデジタルメディアの実現によって、好きな時間に好きなデバイスで視聴できる「動画」コンテンツが利用されるようになった。 Webサイトでの活用はもちろん、スマートフォンやタブレットPCでの視聴機会は、今後さらに増えていくことだろう。 コンテンツとしての動画の持っている特長は次の点だ。 密度の高い情報を短時間で伝達できる（コミュニケーションスピードが速い）直感的な印象構築ができる（ブランディングなどのイメージ訴求が得意）リアリティを持った情報伝達ができる（実物を見せ、動きと音でプレゼンテーションする）動画としてパッケージになっている（様々なサイトに掲載可能でマルチスクリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Media Element まとめ - Qiita
Video For Everybody Generator
lightbox的にFLV表示 | wald-grun/blog
自然体