livedl - ニコ生/ツイキャス/YouTube Liveに対応したライブストリーミングダウンローダー MOONGIFT
ライブ配信用サービスが増えていますが、その結果として自分が見たいものが全部は見られないという状態になっています。そこで需要が出るのが録画ツールです。オフライン視聴できれば良いですが、そもそもサポートされていなかったり、配信側で制限してしまうこともあるでしょう。 livedlはそんな悩める方にぴったりなソフトウェアです。ライブ配信を動画として保存できるソフトウェアです。 livedlの使い方 URLを指定するだけで録画が開始します。 そして動画に変換して、オフラインで視聴できます。 livedlはSQLite3ファイルとしてデータを保存します。そしてlivedlにSQLite3ファイルをドロップすると動画に変換する仕組みになっています。ニコ生以外にもツイキャスやYouTube Liveにも対応しています。 livedlはGo製のオープンソース・ソフトウェア（MIT License）です。 l
Plyr - YouTube/VimeoをサポートしたWebメディアプレーヤ MOONGIFT
動画コンテンツをWeb上で再生するのに使えるのがvideoタグです。しかし素のままではとても使い勝手が悪いです。使いやすくするためには専用のプレーヤライブラリが欲しいでしょう。 今回紹介するPlyrはHTML5のメディアプレイヤーですが、YouTube/Vimeoにも対応しているのがポイントです。 Plyrの使い方 こちらは通常の動画の場合。シンプルですがボタンなどが見やすいデザインです。 オーディオにも対応しています。 YouTubeの場合。デフォルトのデザインの上にかぶせています。 Vimeoでも。こちらは殆ど違和感がありません。 Plyrを使うとYouTube上にあるコンテンツでもサーバ上にある動画でも同じく扱えます。色や機能を統一できればユーザの戸惑いもなくスムーズに使いこなせるでしょう。自社ブランドの色に合わせて使うのが良さそうです。 PlyrはJavaScript製のオープンソ
Reframe.js - iframeを自動リサイズするJavaScript MOONGIFT
iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。 ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するのがReframe.jsです。 Reframe.jsの使い方 Reframe.jsを実行するのは簡単です。以下のコードだけで使えます。 reframe('selector'); デスクトップサイズの場合。 幅を縮めても問題ありません。 Reframe.jsの特徴としては外部のJavaScriptライブラリに非依存ということでしょう。特にブログなどで活躍するのではないでしょうか。またハイブリッドアプリでも使えそうです。 Reframe.jsはJavaScript製のオープンソー
SuperEmbed.js - 動画埋め込みの幅を可変に MOONGIFT
YouTubeやVineなどの動画サイトはとても良いコンテンツで、ブログやWebサイトに埋め込んでいる人は多いかと思います。しかし厄介な問題として、単純に埋め込むとレスポンシブなWebサイトの幅変更に追従できないという問題があります。 それを解決してくれるのがSuperEmbed.jsです。モバイルからデスクトップまで、一つの埋め込みコードで対応できるようになります。 SuperEmbed.jsの使い方 使い方はとても簡単で、ただJavaScriptを読み込むだけです。 <script src="superembed.min.js"></script> これだけでYouTube、Vimeo、Vime、VideoPress、DailyMotionなど（他にも）の動画を自動的に可変にしてくれます。 SuperEmbed.jsはIE9以上で使えます。jQueryなどの依存ライブラリはありませんの
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
VOBをwmvやflvに変換する方法
VOBファイルをwmvやflvに変換する方法を紹介します。 １．はじめに VOBというのはDVDのファイル形式です。 VOB形式を直接YouTubeにアップロードすることはできないので他の形式に変換したいのですが、変換する方法が分かりません。 ということで、VOBファイルをwmvやflvに変換する方法を紹介します。 ここではWindowsで「XMedia Record」というフリーソフトを利用する方法を解説します。 ２．XMedia Recordのダウンロード・インストール XMedia Recordのページにアクセスして、左側のメニューにある「Download」をクリック。 Downloadのページに何種類かのダウンロードリンクがあるので、一番上の「XMedia Recode」の「Download」をクリック（執筆時点のバージョンは3.1.9.1）。 ファイルのダウンロードが始まるので任
YouTubeの動画を繰り返し再生する方法
YouTubeの動画を繰り返し再生する方法を紹介します。 １．1曲だけ繰り返す 1曲だけ繰り返すには「Listen On Repeat」を利用します。 方法は、YouTubeで視聴している動画のドメイン「youtube」の後方に「repeat」をつけるだけです（上のサイトに行く必要はありません）。 例えば見ている動画のURLが、 http://www.youtube.com/watch?v=yjz2TvC2TT4&list=FLZ7PCOZS64V_jPGH62fTmXA の場合、URLを http://www.youtuberepeat.com/watch?v=yjz2TvC2TT4&list=FLZ7PCOZS64V_jPGH62fTmXA とするだけです。 または、「Listen On Repeat」のサイトにある検索フィールドにYouTubeの動画URLまたは検索キーワードを入力し
Tikku.com
Overview The jQuery TubePlayer Plugin was originally created in July 2010. The plugin is a jQuery wrapper around the YouTube Player API. It has evolved over time and is still the simplest interface to control and manage YouTube Player(s). The plugin allows developers to focus on functionality as opposed to infrastructure around the YouTube player. The plugin exposes meaningful methods that are tri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YoutubeやVimeo、Googleマップ等をレスポンシブWebデザインに対応させる為のツール・「Embed Responsively」