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

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

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

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

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

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

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

音声ファイルの埋め込み

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

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

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

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

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

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

するとこんな感じにいつもの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. データの管理もしやすい。

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

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

データの移動は大変。

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

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

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

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

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

プレイヤーのコード

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

<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. ハイレゾ音源もOK。
  
3. データの完全バックアップを併用できる。
  
4. Dropboxは有料版必須。

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

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

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

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

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