Adobe XD 待望の動画再生機能が登場！ビデオの再生とLottieの再生の使い方 - ICS MEDIA
Adobe XDの2021年最後のアップデートとして、「ビデオの再生」と「Lottieの再生」が登場しました。MP4形式の動画と軽量なアニメーションを再生できるLottieファイルがAdobe XDで扱えるようになり、より没入感のあるプロトタイプが作成できるようになりました。 今回の記事では、これらの機能の使い方から活用方法、注意点を紹介します。動画やモーションをXDのプロトタイプに組み込むことで、開発チームとデザイナーの認識合わせに役立つはずです。 動画やモーションが入った状態のデザインを早めに確認しておきたいというデザイナーはもちろん、プロジェクトの早い段階で方向性を共有したいというディレクターもぜひご覧ください。また、Lottieファイルの対応によって実装段階でのアニメーションの再現が容易になるため、エンジニアにも見逃せない機能となっています。 ビデオの再生の使い方 ビデオの再生はそ
無料でオープンソースのメディアプレイヤー「VLC」で簡単にPCの画面を録画する方法
PCでの作業を記録したり、ソフトウェアの使い方を説明したり、PCの画面を録画できるとお役立ちなケースはよくあります。PCの画面を録画するにはWindowsの標準搭載されている「ゲームバー」機能や、オープンソースの配信ソフト「OBS」を利用する方法がありますが、このほかに「メディアプレイヤーソフト『VLC』で録画する」という方法があることをニュースサイトのMakeUseOFが取り上げていたので、実際に試してみました。 How to Record Your Screen Using VLC https://www.makeuseof.com/tag/record-screen-using-vlc/ VLCの上部メニューの「メディア」から、「変換/保存」を選択します。なお、今回使っているVLCのバージョンは3.0.16です。 「変換/保存」のウィンドウが開くので、「キャプチャデバイス」のタブを選
JavaScriptの外部ファイルで簡単に実装できる、映画コンテンツを快適に再生するHTML5動画プレーヤー -Moovie.js
動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトを紹介します。 実装は非常に簡単でカスタマイズも豊富、字幕は多言語をサポート、動画の再生速度は0.1x-8xまで変更可能、デザインはCSSベースで簡単に変更できます。 Moovie.js デフォルトでも快適、フルカスタマイズも可能 動画の字幕は多言語をサポート 再生速度は0.1x-8xまで変更可能 .vtt, .srtの字幕ファイルをサポート トラックや字幕を動的に追加可能 字幕のカスタマイズ イベント・ショートカットのAPI 依存関係はなし、VanillaJSで構築 すべてのモダンブラウザをサポート レスポンシブに完全対応 MITライセンスで、商用プロジェクトでも無料で利用できます Moovie.jsのデモ デモでは映画コンテンツを再生しながら、Moovie.jsのいろいろな機能を楽しめ
)
DotYouTube - YouTubeの再生前広告を回避するChrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 筆者環境で動作しているという確認はできていないので、利用は自己責任でお願いします。 YouTubeは世界最大級の動画共有サイトですが、その多くの機能が無料で提供されています。プレミアム機能で広告をオフにできますが、無料のまま使っている人も多いでしょう。しかし、動画はなんとかして回避したいと考えていたりします。 そんな方々向けに作られたのがDotYouTubeです。動画再生前に表示される広告動画を回避できるGoogle Chrome機能拡張です。 DotYouTubeの使い方 特に設定などなく、機能拡張をインストールするだけです。 DotYouTubeのコードはシンプルで、表示URLの状態を見て、loadingで止まっている場合はタブを更新する仕組みになっています。これで回避できるの
Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo
/* Scrolleo - make your video scroll with inertia * MIT License - by Mark Teater */ (function(window, document, undefined) { "use strict"; var _Scrolleo = function(opts) { // Defaults this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default this.secondsPerScreen = null; //Set this to the length of the video. "1" is 1 second. this.additionalOffset = 0; //Add or subtract pixels to whe
OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー
HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。 そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介します。 OpenPlayerJSの使い方 利用例です。ツールはしばらく経つと非表示になります。 動画の速度を変更できます。 音楽だけの再生もできます。こちらもスピード変更が可能です。 OpenPlayerJSは動画再生前の広告再生にも対応しています。字幕表示などの機能はありません。YouTubeなどに比べるとシンプルですが、多くの場合これで十分でしょう。音楽のスピード変更機能は嬉しい人が多そうです。 OpenPlayerJSはTypeScript製のオープンソース・ソフトウェ
indigo-player - 高い拡張性を誇る動画プレイヤー
videoタグの登場によってWeb上でも動画が再生できるようになりました。しかし機能的には実に簡素で、ただ再生する以上の機能がありません。大抵は別途ライブラリを用意して、そのライブラリ経由でvideoタグを使うでしょう。 今回紹介するindigo-playerもそんな動画プレイヤーの一つです。扱える動画が多いのが特徴です。 indigo-playerの使い方 見て分かる通り、標準では機能はあまり多くありません。 PinPにする機能もあります。 indigo-playerはMPEG4の他、Dash（DRM含む）やHLSに対応しています。さらに動画の前や途中で広告を表示したり、WebVTTを使った字幕表示も可能です。標準機能は多くありませんが、拡張が容易に行える設計になっているようです。 indigo-playerはTypeScript製のオープンソース・ソフトウェア（Apache Licne
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
[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の設定方法と各ブラウザの対応状況
ニコニコ動画をHTML5で表示し倍速再生・好きな場所から再生なども可能にするスクリプト
ニコニコ動画の一般会員は本来なら使えないはずの「ムービーをシークバーの好きな場所から再生させる」機能や、PCから行えないはずの「ムービーの倍速再生」が行えてしまうスクリプトが公開されました。複数動画同時再生の制限回避なども可能で、Firefox・Google Chromeに対応しています。 ニコ動をHTML5で再生するスクリプト作った : lowlevelaware https://www.reddit.com/r/lowlevelaware/comments/3mk689/ 「ニコ動をHTML5で再生するスクリプト」はGoogle ChromeとFirefoxで動作するとのことなので、まずはGoogle Chromeで試してみます。Chrome ウェブストアでTampermonkeyのページを開いて「CHROMEに追加」をクリック。 「Tampermonkeyを追加しますか？」と聞かれる
スマホだけでライブ中継したり配信を見たりできる「Periscope」のAndroid版を使ってみた
iOS向けアプリが提供されている誰でもスマホだけで世界中に生配信したり生配信を見たりできる「Periscope」のAndroid版が公開されたので、さっそく手元のXperia Z3にインストールして世界中でどんなライブ中継が行われているのかを見てみました。 Periscope - Google Play の Android アプリ https://play.google.com/store/apps/details?id=tv.periscope.android まずはGoogle Playで「Periscope」アプリを検索します。 「インストール」をタップ 「同意する」をタップ 約8MBのアプリをインストール完了後、「開く」をタップ。 チュートリアルが表示されますが、不要なら右上の「Skip」をタップ。 まずはログインしないと何もできません。iOS版はTwitterアカウントなしで利用
いつでもすぐスマホからムービーでリアルタイム配信・ライブ中継ができる「Periscope」がTwitterアカウントなしで利用可能に
スマートフォンだけで誰でも簡単にライブ中継できる「Periscope」は、Twitterが5000万ドル(約60億円)以上で買収したアプリで、圧倒的なライブ感から急速に人気が高まっており、Twitterのキラーコンテンツになると期待されています。その、Twitterが持つ優良コンテンツのPeriscopeに、Twitterアカウントなしでも利用可能になるなどのアップデートが行われました。 Six Weeks In — Medium https://medium.com/@periscope/six-weeks-in-ecbab32ff32f 「Periscope」のインストール方法＆使い方は、以下の記事を見れば一発で分かります。 誰でもスマホだけで世界中に生配信したり生配信を見たりできる「Periscope」を使ってみた - GIGAZINE ◆Twitterアカウントなしでの登録 Per
Jquery image player | UIPlayGround
Animation controls similar to those of a Video Player Animation controls similar to those of a Video Player Animation controls similar to those of a Video Player Play Animation controls similar to those of a Video Player Play Animation controls similar to those of a Video Player Pause Animation controls similar to those of a Video Player Resume Animation controls similar to those of a Video Player
YouTubeで繰り返し再生する方法のまとめ
YouTubeで繰り返し再生する方法をまとめました。 ここではひとつの動画だけを繰り返す方法を紹介します。 １．YouTubeのURLに「repeat」をつける ひとつめはYouTubeのURLに「repeat」をつける方法です。 具体的には、YouTubeのURL https://www.youtube.com/watch?v=動画ID を https://www.youtuberepeat.com/watch?v=動画ID に変更するだけです。 たとえば、YouTubeで観たい動画のURLが https://www.youtube.com/watch?v=YDxYmhze5Do であれば、 https://www.youtuberepeat.com/watch?v=YDxYmhze5Do とするだけです。 実際には、 http://listenonrepeat.com/watch/?v
10 Useful jQuery Video & Audio Players
10 Useful jQuery Video & Audio Players Using a custom skinned jQuery audio/video player in your website is often more aesthetically pleasing then simply embedding a video from a third party website on your website. Being able to use a custom designed jQuery player also enables you to pair the design with your branding and design. Within the new WordPress 3.6 there is also native support for audio
Youtubeの動画再生後に関連動画を表示させない
Result 埋め込みコードにいちいちrel=0パラメーターを加えるのは面倒なので関連動画が自動でOffになるようにする。他のパラメーターも同じ方法で挿入できますね。 jQuery$('iframe[src*="youtube.com"]').each(function () { var RemoveRelated = $(this).attr('src'); if (jQuery.inArray('rel=0',RemoveRelated) == -1) { $(this).attr('src', RemoveRelated + '?rel=0'); } });html<iframe width="560" height="315" src="http://www.youtube.com/embed/g31LLr1_KFk" frameborder="0" allowfullscreen
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホで動画が視聴できないときは － 動画の視聴確認サイト －
Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player
Youtubeの動画のスタイルをカスタマイズして任意のWebサイトに埋め込む為のツール・「reEmbed」
