締切済み

ホームページのHTMLに就いて

2024/03/24 14:47

基本的に理解して居ないのですが、自分のホームページを作ってみようとHTMLを始めたばかりの初心者ですが。動画は何とかWebページで探して入れて見ましたが、何としても自分の思う所に移動出来ません、何方かお解りの方が居られましたら是非ご教示の程を御願い致します、HTMLのソースも書き添えて頂くと大変有り難いです。拙い画像とソースを添付しました。

この投稿のマルチメディアは削除されているためご覧いただけません。

0928tiger
お礼率64% (18/28)

HTML
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

quindecillion
ベストアンサー率48% (87/180)

2024/03/24 20:42 回答No.2

元コードのサイト https://magazine.techacademy.jp/magazine/38340 こちらのコードを使用しております。 styleは.cssに、scriptは.jsに記載して読み込ませた方が良いと思いますが、ここでは分けずに一気に記載しています。このコードもまだまだブラッシュアップは必要ですがご参考程度にご使用ください。 <h1>やvideoサイズの指定方法など。一応、左右方向はブラウザのサイズを変えても中央に表示されるようにしてあります。コメントアウトで少しの解説を入れております。 <head> <title>ビデオデモ</title> <meta charset="utf-8"> <style> #movie { position: absolute; left: 50%; /* 中央に配置 */ top: 100px; /*px,emなど使える単位が他にもあります*/ transform: translateX(-50%); } #buttons { position: absolute; left: 50%; /* 中央に配置 */ top: 350px; transform: translateX(-50%); } #text { position: absolute; left: 50%; /* 中央に配置 */ top: 450px; transform: translateX(-50%); } </style> </head> <body> <h1>ビデオストリーミング</h1> <video id="movie" src="./1.mp4" controls width="320" height="240"></video> <hr> <div id="buttons"> <h3>再生する動画を選択</h3> <button onclick="playVideo(1)">1</button> <button onclick="playVideo(2)">2</button> <button onclick="playVideo(3)">3</button> </div> <div id="text"> <p>ここにテキストを入力してください。</p> </div> </body> <script> function playVideo(num) { console.log(num); //let等の宣言は書きましょう。 let tag = document.getElementById("movie"); switch (num) { case 1: tag.src = "./1.mp4"; break; case 2: tag.src = "./2.mp4"; break; case 3: tag.src = "./3.mp4"; break; //動画が無いときのエラー処理が有ると吉 default: console.error("Invalid video number"); break; } //1番さんのコードを書くならここにでも //ページ読込が終わると再生されます //ユーザーが不意な再生に驚いたり、ブラウザによっては機能しない事もあります //ユーザーに再生させたいなら不要です。 } </script> といった感じはどうでしょうか。ご参考になれば幸いです。