読者です 読者をやめる 読者になる 読者になる

仕事は母ちゃん

どーってことない脳内と日常の垂れ流しです

動画共有サービスを使わず動画をブログに貼りつけてみる

昨日と今日、三男は学校がお休みでずっとゲームをしております。もう今年度勉強することはないですからねぇ。なんで休みかというと公立高校の入試があるからです。1日目が学力考査で2日目が面接です。長男も三男もこの道を通ったんだよなあ…しみじみ。

さて、そんな今日はブログに動画を貼り付ける方法を書き連ねてみます。まあYouTube等、動画共有サービスを使えば簡単なんですが、ブログのためだけにアップしたい動画を他のサービスにアップするのもねぇ。本来ならここではてなフォトライフの出番ですが、動画のアップは3月14日できなくなると告知がありました。

なんでや!まあアップロードに失敗することが多くて使えない子だったのはだったんだけどさ…。ひどいよ外部サービス使えだなんて。何のためのはてなフォトライフだよ…ブツブツ

ま、そんなわけで外部サービス使えとはてなさんはおっしゃるのですが、前述の通り動画共有サービスを使うのはどうかと思うのでvideoタグを使って動画を貼り付けることを思いつきました。幸い、もう何年も契約してるレンタルサーバーがあるのでそこにアップロードして貼りつけたらいいのだ!…と思ったんだけど、これが最初うまくいきませんでした。

昨日書いたエントリーでスマホのホームをビデオキャプチャしたものを貼りつけたんですが、パソコンのEdgeで確認すると「無効なソース」と表示されて再生できない。なんでだよ!ちなみにソースはこんな感じ。

<video autoplay loop controls width="250">
<source src="http://example.jp/sample.webm" type="video/webm" />
<source src="http://example.jp/sample.mp4" type="video/mp4" />
</video>

間違ってないはずだが…と検索したらこんな記事を見つけました。

サーバーの対象ファイルが置いてあるフォルダに .htaccess ファイルを設置してみた
中身はこう
AddType video/ogg .ogv AddType video/webm .webm AddType video/mp4 .mp4

無効なソース | Osamushi.jp

簡単に言ってしまうと「mp4でもいろいろ種類があるんだよ」という事

正直、動画の事がよくわからないのだが、符号化・圧縮・コンテナなど要素が多すぎて一言で mp4 といっても「どのmp4?」みたいな感じ

わからないながらも、とにかくH.264という形式にすれば良いという事だけはわかったので、 mp4 ファイルを H.264 形式に エンコード して解決した

無効なソース | Osamushi.jp

MIMEタイプの指定をしてないのと多分mp4ファイルの形式が不適切なのが原因っぽいので、まず .htaccessファイルを作成してサーバーにアップロードしました。私の場合はMeryを立ち上げて先程引用した内容を貼りつけて適当な名前をつけてテキストファイルとして保存しました。エンコードはUTF-8(BOMなし)、改行コードはLFで保存です。

f:id:plutan:20170308151911j:plain

これをサーバーにアップロードしてからファイル名を.htaccessに変更すればOK。

お次はmp4ファイルのエンコードです。これにはPazera Free MP4 Video Converterというソフトを利用しました。

変換方法は上記ページに詳しく書いてるので割愛。こうしてエンコードしたファイルをアップロードして再度確認したらちゃんと再生できた!はああああ、疲れた…。ちなみにこの動画は私がパソコンを立ち上げて最初にやることでございます。

これで一応スマホでもパソコンでも私のインストールしてるブラウザでは再生できました。パソコンはEdge、Firefox、YandexBrowser。スマホはAndroid標準のブラウザ、Firefox、GoogleChrome、YandexBrowserです。MacやiPhoneではどうなのかわかりません。もし「再生できないよ」という方がいらしたらご一報くださいませ。