ブログBLOG

Dropboxにアップロードされた動画をwebサイトに埋め込む方法（.mp4）

更新日：2016/12/13

Dropboxにアップロードされた動画を埋め込む方法
今年の４月に入社を致しました。
この八か月弱で勉強させていただいたことはとても多く、何を記事にしようか悩んだのですが
その中でも参考サイトが少なかったものを、覚書も兼ねて書きたいと思います。

とある案件でDropboxにアップロードされた動画をサイトに埋め込む必要がありました。
そもそもDropboxを使用したことがなく、埋め込みコードとか書き出せるのかなど検索。
youtube等々に比べ情報が少ないながら、埋め込み用のコードについては意外とあっさりヒットしました。

・動画URLの www. を dl. に変更
・末尾の ?dl=0 を削除

URLを作成できたので、youtubeと同じくiframeタグで動画を読み込ませようとしました。
単純に記述としては


<iframe src="https://dl.dropboxusercontent.com/～.mp4"></iframe>

こうしてみました。
検証してみると、Google Chrome、FireFox、Microsoft Edgeの各最新でなら（outpleyになってしまっていることを許容とすれば）とりあえず表示はできました。
が、IE11が表示されず…

簡単に検証した結果が以下になります。
【PC】
・最新ブラウザでは読み込める
・が、IE11以下は読み込めない
【SP】
・Android4系が全滅
・iOS7、iOS8は読み込める

（今月の南本さんの記事にもありますが、）制作において大事なのは対応ブラウザを気にすること。
ここから調べるのに結構時間がかかってしまいました…。

iframeの方で検索をかけてどうにか読み込ませようと試みたのですが、
他の動画を読み込むタグを調べた方が早そうだと、調べたところ
HTML5から導入された「video」タグなら先ほど表示されなかったIE9以上とAndroid4系で表示されるのを確認できました。

最終的にたどり着いた記述が以下になります。


<video controls name="media" onclick="this.play();">
  <source src="https://dl.dropboxusercontent.com/～.mp4">
</video>

</video>

使用できる属性についてはこちらのサイトを参考にさせていただきました。

iframeと比べても使用できる属性が多く、利便性の高いものばかり…（特にoutplayに関してはyoutubeの動画であればurlで指定ができますが、こちらなら外部にアップロードされている動画も一律で指定ができる）

IOS6ではサムネイル画像が指定していないと表示されないこともあり、
指定が必要と思われますが、それを抜いても優秀なタグでありそうです。

また今回は動画の拡張子がmp4でしたが、他の拡張子の動画でも同様に読み込めるか、
引き続き検証が必要ですね！