[ 網頁教學 ] HTML5 Video & Fullscreen Video 如何製作全螢幕影片?

標籤: , , , , ,

 

今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~

 

要匯入一個影片需貼上下列語法:

<video>

   <source src="影片網址" type="video/mp4">
   Your browser does not support the video tag.<!--當影片沒辦法播放時會跑出這段文字-->

</video>

 

 

Video支援的瀏覽器有:

 

再來了解Video可以使用的屬性有哪些

1.autoplay

功能:網頁載入後會自動播放影片。

使用方式:

<video autoplay>
  <source src="影片網址" type="video/mp4">
</video>

2.control

功能:有聲音、放大與下載等控制鍵。

使用方式:

<video control>
  <source src="影片網址" type="video/mp4">
</video>

3.loop

功能:重複播放影片。

使用方式:

<video control loop>
  <source src="影片網址" type="video/mp4">
</video>

4. poster

功能:影片播放前的封面照片。

使用方式:

<video control poster="image/a01.jpg">
  <source src="影片網址" type="video/mp4">
</video>

5. width與height

功能:調整影片寬度長度的大小。

使用方式:

<video control width="350"  height="350">
  <source src="影片網址" type="video/mp4">
</video>

提醒:

所有屬性的使用皆用空格隔開打下一個屬性即可。

再打語法的時候要注意全形半形等小細節。

 

 

如何製作全螢幕的影片當成背景?

下載範例檔案

 

下載後開啟檔案樣子如下

影片來源來至:w3c

 

讓影片可以全螢幕的屬性主要是min-width與min-height。為什麼width與height或是max-width與max-height沒有用呢?因為前者是直接設定一個固定直給video而max則是指定video最大的長寬是多少,而min是告訴video最小的大小是多少,就會逼video要強制長大,那為什麼height可以依照外面的高度縮放呢?這就關西到fixed屬性是依照外面父元素來決定他的屬性囉!

 

以上就是今天video屬性與全螢幕方式的教學,有問題歡迎留言交流!

 

 



相關文章

網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
One Page Scroll 判斷目前所在區塊(4/19更新說明)...   什麼是 One Page Scroll 呢? 概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用...
從零開始的 JQuery 開場白 #0   JQuery 在網頁的應用上有很好表現,怎麼說呢?JQuery 像是一塊一塊地積木,擁有各式各樣的形狀(如果沒有我們想要的形狀哩?)讓我們可以自己組合成自己想要的樣子。也就是說 J...
CSS selector 選擇器     今天要介紹的主題是CSS選擇器,很多時候我們會寫css但是對其選擇器代表的意思卻不是非常了解,我們可能知道  "." 代表 class 或是 "#" 代表 id ,但...