動画を貼り付ける

(2024-03-26)

動画を貼り付ける

マークダウンファイルに画像を貼り付けます。

「../../assets/movies/Epley.mp4”」とすると、パスはあっているのに動画が見つかりません。

しかし、ローカルでは見えているのにサーバーにアップすると見られません。何故だろう?

Gatsby の時も思ったのですが、src/videos に動画を置いてもローカルですら閲覧できないということでした。

でも、public/videos に配置すれば閲覧できるので、それでいいかと思っていました。

Asrto では public でもサーバーに上げるとダメなようです。

YouTube にアップして embed コードを取得

YouTube にアップして、embed コードを貼り付ければ動画の貼り付けができます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/kjLf40mWooY?si=jjlyEzADjRYYHa9U" frameborder="0" allowfullscreen></iframe>

少し面倒ですが、動画をたくさん提示するわけではないのでこれでもいいかと思います。

Netlify ではなぜ動画が見られないか

私なりの想像ですが、自作の動画をサーバーにどんどんアップされてそれを閲覧するようになると、サーバーがパンクする可能性があるからではないかと思います。

public に置けば xserver では閲覧可能

YouTube の動画を貼るのもそう悪くはないのですが、やはり可能であれば自作の動画をそのまま閲覧したいと思います。

Netlify では無理かもしれませんが、xserver では閲覧できます。

 こちら

年間契約しているので月 1000 円ちょっとの費用がかかりますが、200 GB まで使えるために普通の動画であればかなりアップすることができます。

現在 xserver 上では、私と友人のブログ、Laravel などが稼働しており、xserver 上に astro を設定するのは当然の発想です。

Netlify は無料であり、ブログのサービスとしては抜群だと思いますが、有料の xserver は画像表示のスピードが桁違いに速いのでストレスは全くありません。

マークダウンに動画を埋め込む時に、autoplay=“false” は効かない。

動画を貼ると autoplay されるようで、音声の大きな動画を貼る場合は mute にしたほうがいいと思います。

そもそもマークダウンに動画を貼るのは基本的に勧められないということなのでしょう。

でも貼りたいこともあるので一応以下のようにして貼ることにしました。

<video controls playsinline width="480px" autoplay="false" muted="true" src="../../../public/movies/kamataki.mp4" type="video/mp4" >
Sorry, your browser doesn't support embedded videos.
</video>