1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTML, CSS, JavaScriptで掲示板システムを作ってみた【その4-imgとvideo】

Last updated at Posted at 2022-12-08

初めに

前回の投稿から一年半程度空いてしまいました。主に院試や卒論といった学生の仕事のメインの方に時間を取られてしまい、なかなか記事の投稿に着手できていませんでした。
しかし、ここ数ヶ月で当掲示板やゲーム制作など、自分がプログラミングでもともと表現したかったものを作成するという目標が果たせそうなのでここにアウトプットしていきたいと思います。

imgとvideo

まず初めに作成したウェブアプリをご覧ください。
書き込みテストのスレッドに適当なスクリーンショットの画像と動画がアップロードされていると思います。
これは現在ChromeブラウザとSafariで同じように表示されているはずですが、作成当初はSafariでは表示されるがChromeでは表示されないというバグを含んでいました。
キャッシュの削除等色々試してみた結果safariではimgタグで画像も動画も扱える一方でChromeではimgタグでは画像のみで動画はvideoタグを使わないと動画を再生できないらしいことが判明しました。
私のようにMacで開発中の方は是非違うブラウザでも作成したウェブサイトを表示してみてください!
ちなみに無音での自動再生はこちらのサイトに教えていただいたところ次のように書けば実行できます。

<video src="○○.mp4″ autoplay muted></video>

Safariだとimgタグのsrcを動画にするだけで自動的にこのモードになると思います(そんな挙動でした)。

参考リンク
videoタグを使って動画を埋め込む
https://www.omakase.net/blog/2021/04/video.html

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?