今天要在網頁內加入已經製作完成的介紹影片
1.嵌入影片
嵌入影片需要這段程式<video width="640" height="360" controls ><source src="瑞軒花生糖形象影片成品.mp4" type="video/mp4"></video>
但要把影片檔放入製作網頁的資料夾，才能成功顯示影片
2.影片置中
這裡我們需要這段程式 <div class="video-container"> <div>把它夾在<video width="640" height="360" controls ><source src="瑞軒花生糖形象影片成品.mp4" type="video/mp4"></video>
裡面，原理是先創造出新的屬性然後再利用css讓它置中，接下來css檔案裡新增這段程式<style>.video-container { text-align: center;
}</style>
這樣就成功讓影片置中了
3.影片自動播放
我們要讓影片自動播放需要在這段程式中<video width="640" height="360" controls ><source src="瑞軒花生糖形象影片成品.mp4" type="video/mp4"></video>加上autoplay muted loop，變成這樣<video width="640" height="360" controls autoplay muted loop ><source src="瑞軒花生糖形象影片成品.mp4" type="video/mp4"></video>
說明：
(一)autoplay：自動播放
(二)muted：靜音（避免被瀏覽器阻擋自動播放）
(三)loop：播完自動重播（可選）
(四)controls：如果要顯示播放按鈕，可以加在 video 裡
3.加入網頁圖示
要加入網頁圖示要在程式碼的<head></head>中加入這段程式<link rel="icon" href="picture/logo.jpg">，這樣網頁圖示就會變了
程式端
網頁端
記得圖片跟影片一樣都要放入製作網頁的資料裡再加上圖片路徑，不然圖片會顯示不出來
今天先到這裡明天再繼續！
iThome鐵人賽
看影片追技術