見出し画像

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

音楽家育成塾

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

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

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

ポイント

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

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

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

音声ファイルの埋め込み

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

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

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

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

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

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

ポイント

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. データの管理もしやすい。

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

これまでは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以上のハイレゾを聴いてもらうにはこの方法がベストだと思います。

この記事が気に入ったらサポートをしてみませんか？