[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
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
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
サーバでvideoやaudioが再生されない時の対応
videoやaudioを使ったサイト作成時に、ローカル環境だと再生できて、サーバにアップすると再生できないということがあったので、対応方法をメモしておきます。 サンプルコード サーバの設定が原因のことが多いみたいなので、.htaccessに以下を追加します。 videoの場合 AddType video/mp4 .mp4 AddType video/webm .webm audioの場合 AddType audio/mpeg .mp3 使用する拡張子に合わせて適宜変更してください。 【参考サイト】 HTML5のVIDEOタグ使用の注意点など / Maka-Veli .com HTML5 Audioの設定方法と各ブラウザの対応状況
動画URLからIDを抽出する正規表現を書いてみた（YouTube、Vimeo、Vine） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 夏か冬かで言ったらどちらが好きか？という質問に対して、「夏」と答える人を夏派、「冬」と答える人を冬派というふうに分類するのが趣味のひろゆきです。 僕は根っからの夏派ですが、同じ質問を今までしてきたところ、大体五分五分になりました。不思議ですね。 さて、今回は動画サイトをつくる際に書いた正規表現の備忘録になります。 正規表現とは 文字列のパターンを表現する表記法。文字列の検索・置換を行うときに利用される。 IT用語辞典 というわけで、今回は動画のURLから動画のIDを抜き出す正規表現を利用します。 実際に各動画のURLからIDを抜き出してみる 各動画のURLからIDを抜き出してみましょう。 1. YouTubeのURLからIDを抽出 動画再生画面のURLを使用します。 コード $url = 'https://www.youtube.com/watch?v=opPU2wJIRio
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
Seriously.jsで動画・画像にリアルタイムエフェクトをかける方法【ほりぼーいドッキリ編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは、エンジニアののびすけです。 最近はWeb上で動画背景を使った表現のサイトが増えてきてますね。Webブラウザの性能が上がってきている昨今では、（スペックにもよるのですが）ブラウザ側でそういった処理もガンガンできます。 今回はそんなリッチな表現ができる「Seriously.js」をご紹介します。 Seriously.jsとは http://seriouslyjs.org/ 少し前に話題になった、動画や画像にブラウザ上でリアルタイムエフェクトを掛けることができるライブラリ。複雑なエフェクトをたくさん使えるにもかかわらず、簡単なJavaScriptの記述で操作できます。 サンプルを触ってみよう まずは、どんなことができるのかが気になると思います。Seriously.jsの公式デモを紹介してきます。 こちらのページにデモへのリンクがあるので試してみましょう。 ※執筆時点ではGoo
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
.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="
![[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid](https://cdn-ak-scissors.b.st-hatena.com/image/square/9110ae5aaacb7e18964553e948fdad1f627eb39c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111003.png)
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player
YoutubeやVimeo、Googleマップ等をレスポンシブWebデザインに対応させる為のツール・「Embed Responsively」