音楽教室運営奮闘記

音楽と教育と経営の雑記ブログ~不定調性論からの展開

はてなブログに動画を直接貼る埋め込み方法

   

こんな感じです(フリー素材です)。

<追記>

この書式は、

 

<video preload="none" controls="controls" width="450" height="300">
<source src="//dl.dropboxusercontent.com/s/ls9tryv5rcwls3l/Feather%20-%2011168.mp4?" type="video/mp4" />
</video> </p>

 

これです。

ドロップボックスにファイルを置いて、リンクをコピーではりつけます。リンクコピーのやり方ははてなブログに音楽ファイルを貼る方法をご参考に。

 

//dl.dropboxusercontent.com/s/ls9tryv5rcwls3l/Feather%20-%2011168.mp4?

の部分だけあなたのリンクに書き換えてください。

width="450" height="300"で幅、高さも指定できます。

注記)IEやMicrosoft Edgeでは再生バーがどデカイ印象です(再生中に消えます)。

 

これは正式な方法ではなさそうですし、全ての環境での動作確認ができていないので各位試してみてください。問題があればご指摘いただければ記事内容考えます。。

dropboxだって容量があるし、あんまり動画バチバチ貼るとサーバーさんも大変ですから、マナーとしては、短い動画で、youtubeに貼るには仰々しすぎる動画、みたいなものを仕方なく貼るというのが良いのかな、と感じました。著作権も守りましょう。 

こちらの記事を参考にさせていただきました。ありがとうございました。

 

mp4ファイルなどの動画を<video>タグを使ってPCで自動再生 & 繰り返し再生させる方法!

 

html5動画自動再生を無効にする - コードログ

以上です。

 

   

 

 

 

<備考・注意>

以前Dropboxを使って、音楽を貼る方法を紹介しました。

www.terrax.site

これを応用して、ドロップボックスとYoutubeの書式を混合したものを作ったのですが、ブラウザによってはページを開いた瞬間動画が自動再生されてしまいましたので、動画テロになりかねません。よって下記はお勧めしません。

ただはてなさんに対処頂くためにもそのエラーの可能性を書いておきます。

<iframe src="//dl.dropboxusercontent.com/s/ls9tryv5rcwls3l/Feather%20-%2011168.mp4?dl=0" width="300" height="200" frameborder="0" allowfullscreen="" ></iframe>

このコードです。マイクロソフトedgeなどでは自動再生されてしまいます。

これは、

Dropboxに動画ファイルを投げ込んで、

f:id:terraxart:20191025081836p:plain

共有をクリック、または右クリックメニューで「共有」をクリック。

 

f:id:terraxart:20180909104715p:plain

 

そのあとリンクのコピー。

f:id:terraxart:20191025082114p:plain

f:id:terraxart:20180909104826p:plain

 

そのあとはてなブログの記事の「HTML編集」画面で

 ==(HTML編集)画面で操作==============

 <iframe src="ここにリンクを貼る" width="560" height="315" frameborder="0" allowfullscreen=""></iframe><br />

===================================

実際貼ってみると。

 <iframe src="https://www.dropbox.com/s/ls9tryv5rcwls3l/Feather%20-%2011168.mp4?dl=0" width="560" height="315" frameborder="0" allowfullscreen=""></iframe><br />

こうなりますので、

https://www.dropbox.com/s/

→ https://dl.dropboxusercontent.com/s/

 に置き換えます

==完成の書式==

 <iframe src="//dl.dropboxusercontent.com/s/ls9tryv5rcwls3l/Feather%20-%2011168.mp4?dl=0" width="300" height="200" frameborder="0" allowfullscreen=""></iframe>

====

こうなります。あとはwidthで幅、heightで高さも指定できます。 

 

 

 

f:id:terraxart:20191025082901p:plaintopicimage