homunculus Inc.(株式会社ホムンクルス)はwebサイトを中心にインタラクティブコンテンツ、デジタルコンテンツの制作、開発を行っています。
html5のvideoタグを使って動画をサイトに組み込む場合、スマホで動画を再生するとフルスクリーン表示になってしまいます。iosは基本的にフルスクリーン表示になるはずです。 動画上をクリックして表示されている物の情報を出すなどインタラクティブなサイトを作ろうとすると、このフルスクリーン表示が問題になってしまいます。 今回はこのフルスクリーン表示を何とか解消できないかと思い、videoタグの動画をcanvasに出力する方法を探ってみました。 videoタグの動画をcanvasに切り取る demo1 まずはhtmlです。videoタグで動画を設置して、動画の出力先となるcanvasと動画を出力させるためのbuttonも作っておきます。 <video controls id="v" width="480px" height="270px"> <source src="video/sample1
Fantastic Examples of a Fullscreen Video Background in Web Design If you’re thinking about incorporating video backgrounds into your web design, then you’re in good company. More and more designs are using this dynamic visual element to add depth and dimension to their websites. And when done well, websites with video backgrounds can stand out from the competition. There are many benefits to using
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量(800bytes)プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね! 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう!というのが今回の記事の内容です。 では早速行きましょう! オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
Windows 8・Windows 7・Windows XPといったOSに加え、MacやLinuxのPCにも対応しているフリーのムービーダウンロードソフトが「4K Video Downloader」です。YouTubeやVimeoから、複数のムービーでもサクサクダウンロードできるようになっています。 4K Video Downloader | Free Video Downloader for PС, Mac and Linux | 4K Download http://www.4kdownload.com/products/product-videodownloader ◆インストール方法 4K Video Downloaderをインストールするには、上記のページにある「Get 4K Video Downloader」をクリック。 「ファイルを保存」をクリック。 保存した「4kvideo
Magisto: あなたが撮ったなにげない動画を、PVのようなクオリティにしあげてくれる凄いアプリ!無料。 動画をオートで編集してPVを作ってくれるトイムービーアプリ。クオリティがとにかく凄い。まずはこちらをご覧ください。 友だちや家族と撮った動画を、このアプリにポイっと入れるだけで、プロが加工したようなオシャレなPVに仕上げてくれるアプリMagisto – マジカルビデオエディタを紹介します。 動画を入れたら、テーマとメロディを選ぶだけ。あとは全オートなので待つだけです。 作った動画は、アプリからYouTubeにもアップできるので、編集する手間もはぶけますね。 PVの作り方はこちら! MagistoでオシャレなPVを作ろう まずはログインから このアプリは「Facebook、Twitter、Google+」いずれかのアカウントが必要になっています。 【ログイン】から入りましょう。 いずれ
今日も元気にオナニーしてますか?(笑) まさかの相部屋…理性を吹き飛ばして目の前の部下チ●ポをしゃぶり尽くす!!「今日は一人の女性なの…」上司からの射精指示に逆らえずに射精してしまう…!!欲求不満な人 …
a project by happyworm The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQuery plugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and encouragement is provid
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考:video, audioのサポート状況 video, audio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く