版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
SAMPLE項目七在頁面中使用多媒體任務(wù)描述——使用<source>標(biāo)簽1技術(shù)引入——<audio>與<video>標(biāo)簽的屬性2新手試煉——實現(xiàn)網(wǎng)頁中視頻的播放與暫停347.3任務(wù)二制作視頻播放頁詳情部分任務(wù)實施——制作商品詳情頁底部1任務(wù)描述——使用<source>標(biāo)簽ABOUTME由于各種瀏覽器對音頻和視頻的編解碼器的支持不一樣，為了能夠在各種瀏覽器中都能正常顯示音頻和視頻效果，可以提供多種不同格式的音頻和視頻文件。這就需要使用<source>標(biāo)簽為audio元素或video元素提供多個備用多媒體文件，代碼如下所示。<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ù)自身的播放能力，按照順序自動選擇最佳的源文件進行播放。<source>標(biāo)簽中的屬性說明如下所示。1.src：用于指定媒體文件的URL地址，可以是相對路徑地址，也可以是絕對路徑地址。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í)行“文件>打開”命令，打開頁面“光盤\源文件\項目七\7.4.html”，可以看到頁面效果，如圖所示。在源代碼視圖中可以看到該頁面的HTML代碼，如圖所示。練一練——實現(xiàn)網(wǎng)頁中視頻的快進控制ABOUTME02.在網(wǎng)頁的<head>與</head>之間添加JavaScript腳本代碼，如圖所示。在id名為button的按鈕中添加觸發(fā)事件onClick，調(diào)用JavaScript腳本代碼，如圖所示。練一練——實現(xiàn)網(wǎng)頁中視頻的快進控制ABOUTME03.保存頁面，在瀏覽器中預(yù)覽頁面，可以看到頁面中視頻效果，如圖所示。單擊“快進“按鈕，可以看到視頻快進6s的效果，如圖所示。練一練——實現(xiàn)網(wǎng)頁中視頻的快進控制ABOUTME03頁面中定義列表的效果如圖所示。執(zhí)行“文件>保存”菜單命令保存文件。按F12鍵即可在瀏覽器中預(yù)覽該頁面，效果如圖所示。練一練——制作復(fù)雜新聞列表ABOUTME3.標(biāo)簽的接口方法<audio>和<video>標(biāo)簽的接口方法說明如表所示。3任務(wù)實施——制作商品詳情頁底部ABOUTME01執(zhí)行“文件>打開”命令，將video-show.html文件打開。在源代碼視圖中，將光標(biāo)移動到</video>標(biāo)簽后面，插入一個div，創(chuàng)建并應(yīng)用如圖所示樣式。在div中輸入文字和插入圖片后，效果如圖所示樣式。ABOUTME02在video-show中創(chuàng)建類樣式如圖所示。頁面效果如圖所示ABOUTME03在圖片后面插入一個div，并應(yīng)用在video-show中創(chuàng)建的如圖所示樣式。繼續(xù)在該div后插入一個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新手試煉——實現(xiàn)網(wǎng)頁中視頻的播放與暫停ABOUTME
通過使用HTML5視頻的標(biāo)簽屬性，可以輕松實現(xiàn)對視頻的播放和暫停控制。通過案例的制作，深刻理解<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等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度個人珠寶首飾分期購買合同6篇
- 二零二五年度棉被產(chǎn)品售后服務(wù)協(xié)議4篇
- 2025年度個人住宅地下室防水防潮合同范本4篇
- 二零二五年度美團商家入駐信息安全管理合同4篇
- 2025年個人購房貸款利率變動通知合同2篇
- 建筑設(shè)計協(xié)調(diào)合同（2篇）
- 支模超高施工方案
- 施工方案五必須
- 2025年銷售部勞動合同加班補貼范本
- 2025年銷售經(jīng)理崗位競聘協(xié)議范本2篇
- 湘美版七年級上冊美術(shù) 2.卡通故事 教案（ ）
- 單位檔案三合一制度怎么寫范文
- 【課件】跨學(xué)科實踐：探索廚房中的物態(tài)變化問題-人教版八年級上冊物理
- GB 30254-2024高壓三相籠型異步電動機能效限定值及能效等級
- 房地產(chǎn)企業(yè)崗位招聘筆試題題庫之四(含答案)營銷副總經(jīng)理
- 重大事故隱患判定標(biāo)準(zhǔn)與相關(guān)事故案例培訓(xùn)課件
- 某集團下屬子公司年度經(jīng)營績效管理辦法全套
- 2024-2030年中國汽車防撞梁行業(yè)發(fā)展動態(tài)與市場需求研究報告
- 高中語文新課標(biāo)必背古詩文72篇
- 大學(xué)俄語一級課程考試試卷 (A 卷)
- 骨科中醫(yī)護理方案培訓(xùn)計劃（2篇）
評論
0/150
提交評論