【保存版】WordPressにDropboxの音声, 動画ファイルを埋め込む方法

最終更新日

Dropboxはクラウドデータサービスの中では老舗中の老舗。

使いやすさも非常によくなっており、これまでトラブルというトラブルも起こしたことがないのもあり大変信頼しています。

加えていろいろなデータを公開したいのに外部のプラットフォームを使わないといけなかったりすると管理がしにくくなりますよね。

icon image

特にスタジオの関連Youtubeチャンネルは概要欄にてBravaを使うか、広告ブロックツールの使用を推奨しています。
発信者側で広告のコントロールができなくなっており、非常に使いにくいプラットフォームになりました。

そういう意味ではDropboxでデータを管理しながらまとめたほうが綺麗です。

ポイントもちろんエックスサーバーやmixhostなどのサーバーからデータを読み込むというのが一般的であり、画像なんかはみなさんもごく自然にそういう形で公開されてますよね。
アップロードサイズも増やせるのでサーバーでいいじゃないと思うかもしれませんが、やはり仕組み上ページの読み込み速度が非常に遅くなったり、読者や視聴者に思わぬデータ負荷をかけてしまうことにつながります。
だいたい目安としては50M〜100Mが限界値かなと思います。

XSERVERでファイルの最大アップロード上限の変更方法

MIXHOSTでファイルの最大アップロード上限の変更方法

音声ファイルの埋め込み

まずは公開フォルダを決めておくと管理しやすいのでおすすめです。

埋め込みたいファイルを右クリックし、リンクをコピーを押すとリンクが表示され、公開状態になります。

つまり、このリンクを知っている人は誰でもファイルが閲覧できる状態です。

リンクはhttps://www.dropbox.com/s/〜以下文字列が並びます。

この文字列の部分だけを取ります。

<audio src="https://dl.dropboxusercontent.com/s/ここに文字列を入れる" controls controlsList="nodownload" oncontextmenu="return false;"></audio>
icon image

DropboxのデータURLが変更になっていることがわかると思います。
「www.dropbox.com」を「dl.dropboxusercontent.com」に変更する必要があるため、文字列だけを先に解説しました。
さらに、最後のパラメーター「?dl=0」を削除するのを忘れないようにしてください。

するとこんな感じにいつものWordPressのオーディオプレーヤー経由でDropboxの該当ファイルが再生されます。

WordPressでAudioプレーヤーを出す場合の基本タグはこちら。

<audio src=”音声ファイル”></audio>

ちなみに以下のような属性があります。

controls:オーディオプレイヤーを表示
autoplay:音声を自動再生する
loop:音声を繰り返し再生
preload:音声データを事前に読み込ませるかどうか指定できる
autoplayを指定していると、preloadの値は無視される
muted:音声を出さない(ミュート設定)

ダウンロードと右クリックを禁止する

これは非常に重要ですよね。

ダウンロードされてしまうと困るデータなどはたくさんあるかと思います。

特にGoogle Chromeだとそういったツールもたくさんありますし、詳しい人だといろんな手段でとられる可能性はありますが、それを言ってしまうとどこにもなんにも公開できなくなりますので、最低限の防衛策だけ覚えておきましょう。

controlsList="nodownload" 

先ほどのコードにすでに入っていますが、こちらがダウンロードを禁止する項目になります。

また、右クリックの禁止はこちら。

oncontextmenu="return false;"

もしダウンロードをしてもらいたい場合はこちらのコードを削除しましょう。

動画の埋め込み

      
  1. Dropboxでバックアップしながら動画を公開できる。
  2.   
  3. 関連動画が表示されないから綺麗。
  4.   
  5. 意図しない広告が表示されることがない。
  6.   
  7. データの管理もしやすい。

こんなメリットがあります。

これまではVimeoがこういった使い方をすることができたのですが、筆者は2022年から再びDropboxに戻りました。

データの移動は大変。

ちなみにVimeoから乗り換えたきっかけはVimeoは4K動画が2Kになること。

データを預けるという認識が強く有料版を使ってきましたが、やはりデータ管理サービスは例え動画ばっかりだったとしてもDropboxが満足度が高いかもしれません。

もちろんVimeoは動画プラットフォームですので用途によっては最高の動画サイトだと思います。

Dropboxであっても実際に4K動画をバリバリ公開シェアするというのは現実的ではありませんので、今回の方法を軸にいろいろな方法を試してみてください。

ふと思いつくのが例えばHD動画でサンプルを見てもらって、ガムロードで販売するといった使い方なんかも便利ですよね!

プレイヤーのコード

共有リンクを取るところまでは音声と同じ。

icon image

サンプルは右クリック禁止のところで公開しています。

<video controls width="550" height="auto">
<source src="修正した共有用URL" type="video/mp4">
</video>

width=”550″の部分で好きなサイズに画面を調整してください。

ダウンロード禁止コード

<video controls="controls" controlslist="nodownload" width="550" height="auto">
<source src="修正した共有用のURL" type="video/mp4">
</video>

右クリック禁止コード

<video controls="controls" controlslist="nodownload"
 oncontextmenu="return false;" width="550" height="auto">
<source src="修正した共有用のURL" type="video/mp4">
</video>

まとめ:ハイレゾ音源

      
  1. 映像を気軽に公開。
  2.   
  3. ハイレゾ音源もOK。
  4.   
  5. データの完全バックアップを併用できる。
  6.   
  7. Dropboxは有料版必須。

まず、Youtubeなどは当然のように、アップロードした時点で彼らの著作物のような扱いになり、基本的に無劣化でデータが返ってくることはありません。

他のプラットフォームでも基本的には同じ。

データのバックアップは非常に神経を使いますし、基本的にはハードストレージだったり、クラウドストレージだったり無料では行えないと思っておきましょう。

故にDropboxも有料版が必須となります。

音声ファイルに関しては現在サウンドクラウドの有料版でも48khzまでなので、96khz以上のハイレゾを聴いてもらうにはこの方法がベストだと思います。

Kotaro

音大を卒業後ピアニストとして活動。 自身のピアノトリオで活動後北欧スウェーデンにてシンガーアーティストLindha Kallerdahlと声帯とピアノによる即興哲学を研究。 その後ドイツへ渡りケルンにてAchim Tangと共に作品制作。 帰国後、金田式電流伝送DC録音の名手:五島昭彦氏のスタジオ「タイムマシンレコード」にアシスタントとして弟子入りし、録音エンジニアとしての活動開始。 独立後、音楽レーベルを立ち上げ、タンゴやクラシックなどのアコースティック音楽作品を多数プロデュース。 その後、秋山庄太郎氏後継の写真スタジオ「村上アーカイブス」でサウンドデザイナー兼音響担当として映像制作チームに参加。 村上宏治氏の元で写真、映像技術を学ぶ。 祖父母の在宅介護をきっかけにプログラムの世界に興味を持ち、介護で使えるプログラムをM5Stackを使って自作。 株式会社 ジオセンスの代表取締役社長:小林一英氏よりプログラムを学ぶ。 現在はKotaro Studioにてアルゼンチンタンゴをはじめとした民族音楽に関する文化の研究、ピアノ音響、さらに432hz周波数を使った癒しのサウンドを研究中。