テクノロジー

【Bubble】動画を埋め込める無料プラグイン「video.js」を紹介

Kana🐥UGOK's icon'
  • Kana🐥UGOK
  • 2020/11/25 14:42
Content image

 

 

はじめまして。Bubbleを勉強中のKanaと申します。

初投稿であるこの記事では、Bubbleの無料プラグイン「video.js」の導入の仕方を説明していこうと思います。

 

video.jsとは

video.jsは、動画を埋め込むためのプラグインです。自分の動画をアップロードするだけでなく、YouTubeの動画を持ってくることも可能です。とても簡単に設定できます。

Content image

 

video.js導入方法

Content image

 

Bubbleを起動して画面左のPluginsメニューを開きます。右上の +Add plugins から「video.js」を検索してInstallを押せば、インストール完了です。

 

Designメニューに戻りましょう。

Content image

 

メニューバーを見ると、「Video.js」が増えているかと思います。(下の方が切れていてVideo.isに見えますが…。)

さっそく配置してみましょう。

 

YouTube動画の貼り方

Content image

まずは、YouTubeの動画を貼ってみましょう。

 

YouTubeの載せたい動画の共有リンクをコピーします。

今回は、NoCode Schoolチャンネルさんの『Bubbleの使い方 - Part 1 - Bubbleの概要と各ページの説明』をお借りします。

Content image

 

リンクをコピーしてVideoの "OR Youtube URL" に貼りつけます。

Content image

これで完了です。

Previewを押してもらえばその動画が確認できるかと思います。

 

Content image

 

とても簡単ですね。ありがたい。

Autoplayに最初からチェックが入っていますので、自動で再生されるのが気になる方は外しておくといいでしょう。

 

次は、自分の持っている動画を貼ってみようと思います。

 

動画ファイルの貼り方

先ほどと同じ様に、メニューバーからVideo.jsを配置しましょう。

 

Content image

VideoのStatic fileのUploadから動画ファイルをアップロードしましょう。

これでまたPreviewで確認すると、動画が反映されていると思います。

 

Content image

先ほどのYouTube動画の下に付けてみました。猫の動画、きちんと再生されました。

 

このプラグインのレビューのところに、mp.4だけが対応されているみたいなことが書かれていました。気になったので、MOVファイル(.MOV)も試しに貼ってみました。

Content image

猫動画の下にMOVファイルを貼ってみましたが…、動かなかったです。これは、対応しているのがmp.4だけかもしれないですね。

 

とても簡単に動画が貼れるプラグインでした。もう少し細かく見るといろいろありそうですが、今回はこの辺で。

最後まで読んでいただきありがとうございました。

Article tip 0人がサポートしています
獲得ALIS: Article like 34.72 ALIS Article tip 0.00 ALIS
Kana🐥UGOK's icon'
  • Kana🐥UGOK
  • @HMDKN

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

Like token Tip token
7.20 ALIS
Eye catch
クリプト

「ハッシュ」とは何なのか、必ず理解させます

Like token Tip token
0.10 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
120.79 ALIS
Eye catch
クリプト

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

Like token Tip token
46.60 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
30.10 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS