Web前端開(kāi)發(fā)（JavaScript+jQuery）課件 項(xiàng)目6 WEB頁(yè)面中在線(xiàn)學(xué)習(xí)視頻_第1頁(yè)
Web前端開(kāi)發(fā)（JavaScript+jQuery）課件 項(xiàng)目6 WEB頁(yè)面中在線(xiàn)學(xué)習(xí)視頻_第2頁(yè)
Web前端開(kāi)發(fā)（JavaScript+jQuery）課件 項(xiàng)目6 WEB頁(yè)面中在線(xiàn)學(xué)習(xí)視頻_第3頁(yè)
Web前端開(kāi)發(fā)（JavaScript+jQuery）課件 項(xiàng)目6 WEB頁(yè)面中在線(xiàn)學(xué)習(xí)視頻_第4頁(yè)
Web前端開(kāi)發(fā)（JavaScript+jQuery）課件 項(xiàng)目6 WEB頁(yè)面中在線(xiàn)學(xué)習(xí)視頻_第5頁(yè)
已閱讀5頁(yè)，還剩3頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Web前端技術(shù)

WEB頁(yè)面中在線(xiàn)學(xué)習(xí)視頻的設(shè)計(jì)與實(shí)現(xiàn)6.1

設(shè)計(jì)思路功能：包含視頻播放窗口和課程目錄列表；視頻播放窗口控件可進(jìn)行切換全屏、暫停和拖拽到指定時(shí)間繼續(xù)播放。課程目錄列表顯示當(dāng)前的課程大綱，用戶(hù)單擊列表可以播放對(duì)應(yīng)的視頻。6.2界面分析使用<div>標(biāo)簽進(jìn)行整體布局；用<video>標(biāo)簽制作視頻播放窗口；使用<ul><li>標(biāo)簽制作課程目標(biāo)列表；配合CSS樣式完成整個(gè)頁(yè)面設(shè)計(jì)效果；通過(guò)javascript函數(shù)實(shí)現(xiàn)視頻的時(shí)間跳轉(zhuǎn)。6.3頁(yè)面具體實(shí)現(xiàn)HTML5基本框架的實(shí)現(xiàn)<lionclick="playCourse(357)"> <imgsrc="img/play.png"/> <span>王進(jìn)喜用身體攪拌泥漿</span></li><videosrc="video/story.mp4"id="videoPlay"width="640“controls="autoplay"></video>6.3頁(yè)面具體實(shí)現(xiàn)2.使用CSS3樣式實(shí)現(xiàn)整個(gè)頁(yè)面效果<linkrel="stylesheet"href="css/study.css"/>//study.css文件#content{width:640px;background-color:white;margin:0auto;text-align:left;box-shadow:10px10px15pxblack;}6.3頁(yè)面具體實(shí)現(xiàn)3.利用JavaScript函數(shù)實(shí)現(xiàn)視頻時(shí)間的跳轉(zhuǎn)<script> //獲取對(duì)象

varvideoPlay=document.getElementById('videoPlay'); functionplayCourse(time){ //重置當(dāng)前播放時(shí)間

videoPlay.currentTime=time;

videoPlay.play();//繼續(xù)播放視頻 }</script>本章小結(jié)通過(guò)本節(jié)課的學(xué)習(xí)，需要同學(xué)們綜合運(yùn)用div布局、使用video標(biāo)簽，并恰當(dāng)?shù)慕Y(jié)合

溫馨提示

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

評(píng)論

0/150

提交評(píng)論