ホームページ保守対応|html videoタグ 動画埋め込み(サムネイル表示)

ホームページ保守|html videoタグ で動画埋め込み

本日、ホームページ保守管理のお客様より以下ご相談がありました。

ホームページについてですが、

トップに掲載してる動画を添付しているものに差し替えお願いします。

そして、過去のお知らせの文章を削除して頂き、添付の文章に差し替えお願いします。

以上になります。

不明な点ございましたら

またご返信お願いいたします!

リキ カトリ
リキ カトリ

カトリです。
お世話様です。

トップの動画ですが、
もしYoutubeにアップされているなら
そちらのURLを埋め込む方が良いのですが
UPされてますか?

もしUPされていなければ
添付頂いた動画を直接載せます。

一応のご確認として。

前に作ったチャンネルは削除して新たに作る予定をしています。
なので、まだ載せてはいないので直接でご対応お願いいたします。

youtubeチャンネル作成した際には再度ご連絡いたしますので宜しくお願いいたします。

サムネイル付きタグhtml

と、言う事でhtmlにvideoタグを記載し直接動画(mov形式)を埋め込む事になりました。

htmlタグはいたってシンプルです。

<video controls=”controls” width=”” height=”” poster=”〇〇.png”>
<source src=”〇〇.mov”>
</video>

poster=”〇〇.png”」が、任意の画像ファイルを初回のサムネイルとして表示するタグになります。

このタグを入れていないと再生マーク(アイコン)のみで表示となります。

Youtubeの埋め込みだと、初回コマの映像が静止画で自動で表示されますがhtmlでのvieoタグだとサムネイルが出ません。(ですよね?)

movファイルをオンラインで圧縮

なお、お客様より頂いた動画素材(movファイル)の容量が20MBと多かったので、少しでもファイルサイズを縮小したく、以下オンラインサイトで圧縮しました。*40%程軽くなりました。

VideoSmaller(動画ファイルを圧縮)
https://www.videosmaller.com/jp/

ホームページ保守|html vieoタグ動画埋め込み完了

スマホとPCでの表示確認等を済ませ、お客様に作業報告。

リキ カトリ
リキ カトリ

カトリです。
お世話様です。

 

動画の件
直接埋め込みにて設定しました。
https://〇〇
*再読みにてご確認下さい。

 

また「お知らせ」文面の差し替えと
リンクも対応済みです。

 

宜しくお願い致します。

 

以上、本日の日報を終わります。

\創業20年の信頼と実績/

 《独立 開業 起業》
個人事業向け ホームページ制作ならお任せ下さい。 ロゴ・名刺もセットで対応致します。良心価格で制作後の《サポート》もしっかり対応!

-東京都荒川区南千住-
(株)カトリデザイン事務所 https://www.katori.co.jpお問い合わせ

子供と通えるママ専用WEBデザイナースクール【Famm】

国内最速!初期費用無料の高性能レンタルサーバー【ConoHa WING】

タイトルとURLをコピーしました