音楽教室運営奮闘記

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

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

   

 

もう一つ

   

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

<追記>

この書式は、上記が

 

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

 

====下記が、

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

 

これです。うまくいく方を採用ください。下記は、参考にしていただいたサイト様が作られた記事を逆輸入させて頂きました。

【はてなブログ】動画を直接ブログ内に貼り付ける方法 - techblogchanはかく語りき

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

 

上記仕様の

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

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

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

注記)IEやMicrosoft Edgeでは映像サイズを小さくすると再生バーがどデカイ印象です(再生中に消えます)。

 

 

以上です。以下はおまけ。

 

 

======

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

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

 

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

 

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

以上です。

 

 

   

 

 

 

下の記事はさらにおまけ。自動再生されて失敗してしまった書式の紹介です。

<備考・注意>

ドロップボックスと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