HTML5教學系列-video、影音語意標籤的使用!

今天要分享的,其實對現在的影音時代相當重要,像以前用object的方式,感覺程式非常的長,有時候覺得要修改,或編改起來,都是相當的麻煩,今天要介紹的語意標籤,程式不僅變得相當的簡單,使用影音上面,也變得相當的容易,一起來看看!

video

比如我們剛開始打這樣

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" src="video/22.mp4" >
</video>
</body>
</html>

 

video的用法相當的簡單,就是<video> </video>裡面插入你想要的影音就可以了,我這邊是輸入mp4,如果你要讓更多瀏覽器支援,還必須寫一段像<video width="320″ height="240″ src="video/22.ogv" >的語法,看支援狀況,可以看以下這篇T客邦文章

不過上面的話,影片是不會自動播放的,所以我們要改成這樣

<video width="320″ height="240″ src="video/22.mp4″ autoplay>

autoplay代表自動播放意思,

然後如果想要出現控制列的話,要改成這樣,

<video width="320″ height="240″ src="video/22.mp4″ controls>

 

不過像上面video標籤,遇到ogv和mp4,也就是所謂的OGG和H.264的瀏覽器問題,直接寫兩個video很奇怪,所以這邊我們要使用”source”的標籤,要寫成這樣

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
<source src="video/22.mp4" type="video/mp4" />
<source src="video/22.ogv" type="video/ogg" />
你的瀏覽器不支援喔!
</video>

</body>
</html>

一個在CHROME的畫面

 

 

一個在火狐畫面

 

 

 

以下就是今天先分享的video語意標籤部分,以後有新的一些做法在分享給大家! 

熱門相關文章

網頁設計教學系列-HTML5語法分享2(CANVAS)
今天要分享的HTML5語法,就是平常我們會在繪圖軟體裡面,我們會用矩形工具來畫正方形,三角形等等的,現在最新的HTML5語法,雖然還沒有一套完整規範,不過大致上的一些語意標籤,都是有規範出來的,像今天介紹的CANVAS語意標籤,就是可以用來畫正方形,三角形,透過HTML5語法即可,一起來看看! 這邊沒有做各瀏覽器測試,只是單純分享HTML5語法,所以大致上以能支援HTML5語法的瀏覽器為主,像是CHROME,FIREFOX,IE9等, 比如今天我們想要畫一個正方形: 在這邊的做法,透過HTML5必須要搭配JAVASCRIPT才能畫出來,以下是程式碼, <!DOCTYPE HTML> <html> <title></title> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="application/javascript"> function draw_m() { var m_canvas ...
繼續閱讀
網頁設計教學系列-HTML5語法分享!
今天要介紹的東西,就是最近還滿夯的HTML5,這篇只是從一些基礎的東西開始分享,大概了解基本的觀念而已,之後如果學到更多好玩的東西,再一次分享給大家,不過昨天這樣摸一摸,還滿佩服賈伯斯所帶來當的創意,雖然HTML5還沒有真正完全到答一個標準,不過我想這是遲早的趨勢,一起來看! 比如我們呈現效果像下圖這樣,以前用HTML4語法也很簡單,就很多區塊設DIV就行了,這邊要分享HTML5的寫法, HTML5文件檔頭簡單設定 以往我們熟悉的HTML語法,剛開始文件一開頭都會這樣寫, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 但HTML5的文件一開頭寫法相當簡單,只要像下圖這樣寫就可以 <!DOCTYPE html> 寫法變得相當簡單, 我們從WORDPRESS預設佈景也看到是這樣子寫的 <!DOCTYPE ...
繼續閱讀
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
今天要分享的東西,可能從標題看不太出來在講什麼樣的意思,這邊今天要講的,就是網頁設計的爸爸和小孩,也就是父區塊和子區塊,有時候在1024X768看到的是子區塊,在1366X768看見的是父區塊和子區塊的結合,這樣做的好處就是不會在不同解析度下,所呈現出來的感覺不會差太多,讓我們來看看今天的教學! 比如我們今天看到一個部落格網站長這樣子,這是1024X768的解析度畫面, 不過在其他的寬螢幕和筆電可能是這樣子,比如1366X768,   或許是現在圖片尺寸關係,所以有點看不出來,不過如果在做網頁如果遇到不同解析度的話,是件麻煩問題,所以通常我們都會設父區塊和子區塊,比如今天我們設一個父區塊和子區塊, 之後我們在為這兩個區塊寫上CSS背景顏色,這邊是原始碼, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-用HTML5語意標籤排成三欄版的
最近都在學這個部分,所以有學到什麼,就開始分享什麼啦,今天分享的也是排版系列,因為我覺得不管學任何一個套件軟體,基本的排版你還是要有些概念存在,不然到時候就算架WORDPRESS,結果CSS部分都不太懂,這樣也不是說很好,所以一起來看看今天的教學吧! HTML5排版 比如今天我們想要排成這樣子, 寬螢幕的CHROME是這樣子, 這邊分享的語意標籤還是一樣基本的為主, <header>代表上方區塊橫幅 <article>代表主要內容 <aside>代表側欄 <footer>指得是底部區塊 最後分享今天寫的語法,CSS部分就要麻煩大家自己去翻一下書了, <!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5排版測試</title> <style> body{ min-width:1024px; margin-top:0px; } #total{ margin:0 auto; width:1024px; } header{ background:#0066CC; width:1024px; height:250px; } article{ background:#F90; width:350px; height:100px; float:left; } #main2 { background:#FF0; width:350px; height:100px; float:left; } aside{ background:#000; width:323px; height:100px; color:#FFFFFF; float:left; } footer{ background:#666; width:1024px; height:300px; clear:both; } </style> </head> <body> <div id=total> <header id=top> 橫幅 </header> <article ...
繼續閱讀
網頁設計教學系列-用HTML5語法做基本的排版
最近自己本身在學HTML5語法,所以會開始分享一些HTML5設計的語法教學,也順邊透過這樣的方式來跟大家討論,今天要分享的東西跟之前DIV排版很像,但這次是用HTML5語法來做排版,因為HTML5語法是語意標籤,也就是只要看網頁原始碼大概就知道網頁架構,一起來看看今天的教學! 第一步我們先來看想要完成的樣子, 這跟之前教學的排版很像,只是今天分享的是用HTML5語法來排, 分享今天排版的原始碼, <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>測試用</title> <style> body{ width:1024px; margin:0 ...
繼續閱讀
網頁設計教學系列-HTML5語法分享2(CANVAS)
網頁設計教學系列-HTML5語法分享!
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
網頁設計教學系列-用HTML5語意標籤排成三欄版的
網頁設計教學系列-用HTML5語法做基本的排版

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>