《網(wǎng)頁設(shè)計(jì)》課件-7.3 任務(wù)二 制作視頻播放頁詳情部分_第1頁
《網(wǎng)頁設(shè)計(jì)》課件-7.3 任務(wù)二 制作視頻播放頁詳情部分_第2頁
《網(wǎng)頁設(shè)計(jì)》課件-7.3 任務(wù)二 制作視頻播放頁詳情部分_第3頁
《網(wǎng)頁設(shè)計(jì)》課件-7.3 任務(wù)二 制作視頻播放頁詳情部分_第4頁
《網(wǎng)頁設(shè)計(jì)》課件-7.3 任務(wù)二 制作視頻播放頁詳情部分_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

SAMPLE項(xiàng)目七在頁面中使用多媒體任務(wù)描述——使用<source>標(biāo)簽1技術(shù)引入——<audio>與<video>標(biāo)簽的屬性2新手試煉——實(shí)現(xiàn)網(wǎng)頁中視頻的播放與暫停347.3任務(wù)二制作視頻播放頁詳情部分任務(wù)實(shí)施——制作商品詳情頁底部1任務(wù)描述——使用<source>標(biāo)簽ABOUTME由于各種瀏覽器對(duì)音頻和視頻的編解碼器的支持不一樣，為了能夠在各種瀏覽器中都能正常顯示音頻和視頻效果，可以提供多種不同格式的音頻和視頻文件。這就需要使用<source>標(biāo)簽為audio元素或video元素提供多個(gè)備用多媒體文件，代碼如下所示。<audiosrc="images/music.mp3"><sourcesrc="images/music.ogg"type="audio/ogg"><sourcesrc="images/music.wav"type="audio/wav">你的瀏覽器不支持audio元素</audio>或<videosrc="images/movie.mp4"width="562"height="423"controls><sourcesrc="images/movie.ogg"type="video/ogg"codes="theora,vorbis"><sourcesrc="images/movie.mp4"type="video/mp4">你的瀏覽器不支持video元素</video>由上面可以看出，使用source元素代替了<audio>或<video>標(biāo)簽中的src屬性，這樣，瀏覽器可以根據(jù)自身的播放能力，按照順序自動(dòng)選擇最佳的源文件進(jìn)行播放。<source>標(biāo)簽中的屬性說明如下所示。1.src：用于指定媒體文件的URL地址，可以是相對(duì)路徑地址，也可以是絕對(duì)路徑地址。2.type：用于指定媒體文件的類型，屬性值為媒體文件的MIME類型，該屬性值還可以通過codes參數(shù)指定編碼格式。為了提高執(zhí)行效率，定義詳細(xì)的type屬性是非常必要的。2技術(shù)引入——<audio>與<video>標(biāo)簽的屬性ABOUTME1.元素的標(biāo)簽屬性<audio>與<video>標(biāo)簽所提供的元素標(biāo)簽屬性基本相同，主要用于為網(wǎng)頁標(biāo)簽。<audio>與<video>標(biāo)簽標(biāo)簽屬性的說明如表所示。ABOUTMEABOUTME2.元素的接口屬性<audio>與<video>標(biāo)簽除了提供了標(biāo)簽屬性外，還提供了一些接口屬性，用于針音頻和視頻文件的編程。<audio>與<video>標(biāo)簽的接口屬性說明如表所示。ABOUTMEABOUTME01.執(zhí)行“文件>打開”命令，打開頁面“光盤\源文件\項(xiàng)目七\(yùn)7.4.html”，可以看到頁面效果，如圖所示。在源代碼視圖中可以看到該頁面的HTML代碼，如圖所示。練一練——實(shí)現(xiàn)網(wǎng)頁中視頻的快進(jìn)控制ABOUTME02.在網(wǎng)頁的<head>與</head>之間添加JavaScript腳本代碼，如圖所示。在id名為button的按鈕中添加觸發(fā)事件onClick，調(diào)用JavaScript腳本代碼，如圖所示。練一練——實(shí)現(xiàn)網(wǎng)頁中視頻的快進(jìn)控制ABOUTME03.保存頁面，在瀏覽器中預(yù)覽頁面，可以看到頁面中視頻效果，如圖所示。單擊“快進(jìn)“按鈕，可以看到視頻快進(jìn)6s的效果，如圖所示。練一練——實(shí)現(xiàn)網(wǎng)頁中視頻的快進(jìn)控制ABOUTME03頁面中定義列表的效果如圖所示。執(zhí)行“文件>保存”菜單命令保存文件。按F12鍵即可在瀏覽器中預(yù)覽該頁面，效果如圖所示。練一練——制作復(fù)雜新聞列表ABOUTME3.標(biāo)簽的接口方法<audio>和<video>標(biāo)簽的接口方法說明如表所示。3任務(wù)實(shí)施——制作商品詳情頁底部ABOUTME01執(zhí)行“文件>打開”命令，將video-show.html文件打開。在源代碼視圖中，將光標(biāo)移動(dòng)到</video>標(biāo)簽后面，插入一個(gè)div，創(chuàng)建并應(yīng)用如圖所示樣式。在div中輸入文字和插入圖片后，效果如圖所示樣式。ABOUTME02在video-show中創(chuàng)建類樣式如圖所示。頁面效果如圖所示ABOUTME03在圖片后面插入一個(gè)div，并應(yīng)用在video-show中創(chuàng)建的如圖所示樣式。繼續(xù)在該div后插入一個(gè)div，創(chuàng)建并應(yīng)用如圖所示樣式。ABOUTME04在div中輸入文字內(nèi)容，頁面顯示效果如圖所示。在源代碼中為文本添加<p>標(biāo)簽，如圖所示。ABOUTME05在在video-show中創(chuàng)建的如圖所示樣式，頁面效果如圖所示。ABOUTME06使用相同的方式，繼續(xù)制作頁面其他內(nèi)容。執(zhí)行“文件>保存”命令，將文件保存為vedio-show1.html，完成頁面的制作。頁面顯示效果如圖所示。4新手試煉——實(shí)現(xiàn)網(wǎng)頁中視頻的播放與暫停ABOUTME

通過使用HTML5視頻的標(biāo)簽屬性，可以輕松實(shí)現(xiàn)對(duì)視頻的播放和暫停控制。通過案例的制作，深刻理解<video>標(biāo)簽的屬性及應(yīng)用。PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/PPT課件下載：/kejian/范文下載：/fanwen/試卷下載：/shiti/教案下載：/jiaoan/字體下載：/ziti

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論