影像播放控制

閱讀時間約 2 分鐘
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。
STEP1.
開啟「dw04.html」檔,由切割存出的HTML 檔,影像播放的內容要特別獨立切割成單獨切片的圖檔,點取要插入播放內容位置上的影像(寬:592、高:385)並直接刪除。 要加入此擴充元件的內容區必頇要是一個完整的<div>標籤,因此需要先安排<div>標籤,確 認游標在該儲存格內,執行『插入 > Div』,設定【插入:在插入點上、ID: content】,按下『新增CSS 規則』。
STEP2.
設定新增的選取器名稱為#content 的ID 類型CSS 規則,設定『方框』分類內的width:592 px、Height:385 px,按下確定完成Div 標籤的加入,作為要加入影像播放的準備。
STEP3.
開啟程式參考檔案dw04-LinkShow.html,複製相關javascript貼入原頁面的</head>之前;
接著於<body>標籤內加入所有撥放圖片內容與連結位置,播放的影像為 dw04-p1.jpg~dw04-p4.jpg 四張圖,預覽即可檢視初始的圖片自動撥放,3500為播放速度3.5秒。
STEP4.
再來設定暫停與播放按鈕控制,在要設定的按鈕圖上,加上影像地圖,點取『停止』影像地圖,切換至程式碼於連結後方加上:【 onClick="flvFLSS4('content')"】
STEP5.
點取『播放』影像地圖,切換至程式碼於連結後方加上: 【onClick="flvFLSS2('content',1,1) "】
儲存檔案按下F12 瀏覽,圖片播放的同時,就可以按下暫停或播放按鈕,來控制圖片播放。
STEP6.
最後還可以設定按下編號播放停留顯示該編號的影像,點取『1』影像地圖,切換至程式碼於連結後方加上:【 onClick="flvFLSS5('content',0)"】
以此類推即可加上其他撥放順序編號按鈕上的內容:
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
avatar-img
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
〔張家祖廟〕(即發祥堂)位於臺中市西屯區協和里安和路111號,本為漳州馬田張家的私人祠堂,正殿奉祀祖先牌位,左右有內外護龍(廂房),是台中市保存完好的閩南傳統民居。這座祖廟在1985年11月27日經臺中市政府公告為國家第三級古蹟;左外護龍(廂房)被登錄為「歷史建築」。
Thumbnail
Renpy 影片播放功能可以使用在玩家初次遊玩遊戲時播放主題曲或是開場。要讓 Renpy 可以判斷影片是否還在播放中,需要加入代碼。在畫面顯示時播放影片,當秒數歸零時影片隱藏。最後,需要一個可以判斷影片播放進度的功能。這樣以上就可以用來播放無法跳過的影片拉。
Thumbnail
自人類古老文明開始,我們對於宇宙的起源、結構以及存在的意義總是充滿了好奇。宇宙的奧妙和真理是許多哲學、神秘主義和宗教思想中探索的核心主題。然而,在20世紀初,隨著量子力學的誕生和發展,我們有了一個全新的角度來理解這個宇宙。
Thumbnail
此播放清單旨在深入探討佛教與科學之間的對話,從量子力學到認知科學,並探索兩者在理解宇宙、心識與存在的奧祕上相輔相成。影片涵蓋佛教中的金剛經、八識、十識與十一識的概念,以及它們如何與現代科學理論相映成趣,揭示出人類認識真理的多元途徑。
Thumbnail
雖然是很簡單的介紹,但nico的功能蠻容易被忽略的,因此這邊將說明播放頁面介面以及這些按鈕能做到什麼,希望能給在nico投稿、尋寶、應援、看影片和發彈幕的人帶來更多樂趣!
Thumbnail
俄羅斯國內禁止播放入侵烏克蘭的相關影像,而駭客組織「匿名者」表示他們已駭入俄羅斯國營電視台,並播放了烏克蘭境內的影像。
Thumbnail
卡爾維諾曾寫過一篇《攝影師的冒險》,收錄於困難的愛一書。 故事大略是敘述一名攝影師約了一名不確定會不會有更進一步發展的女性作為他的模特,書寫了拍攝的過程中如同決鬥寫真般的精神互動與富饒著德勒茲所說的動情素般的乙太情慾彌留。
Thumbnail
:: 參展作品:= 大家午安。那、其實我一開始不太確定,對主題感到有點朦朧,後來說文解字的想了一下,應該就是要第一眼就能很強烈的能在影像上「看見空白」吧。
Thumbnail
這幾天讀了德勒茲的以卡夫卡為例談論的《什麼是弱勢文學》,不小心有點太喜歡了,喜歡到似乎很久沒有這樣激動到要為這樣的時候寫一篇,大概是在閱讀的過程中發現自己會很喜歡的那些作家與藝術家,其實都很深地具有弱勢文學的特質吧
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
〔張家祖廟〕(即發祥堂)位於臺中市西屯區協和里安和路111號,本為漳州馬田張家的私人祠堂,正殿奉祀祖先牌位,左右有內外護龍(廂房),是台中市保存完好的閩南傳統民居。這座祖廟在1985年11月27日經臺中市政府公告為國家第三級古蹟;左外護龍(廂房)被登錄為「歷史建築」。
Thumbnail
Renpy 影片播放功能可以使用在玩家初次遊玩遊戲時播放主題曲或是開場。要讓 Renpy 可以判斷影片是否還在播放中,需要加入代碼。在畫面顯示時播放影片,當秒數歸零時影片隱藏。最後,需要一個可以判斷影片播放進度的功能。這樣以上就可以用來播放無法跳過的影片拉。
Thumbnail
自人類古老文明開始,我們對於宇宙的起源、結構以及存在的意義總是充滿了好奇。宇宙的奧妙和真理是許多哲學、神秘主義和宗教思想中探索的核心主題。然而,在20世紀初,隨著量子力學的誕生和發展,我們有了一個全新的角度來理解這個宇宙。
Thumbnail
此播放清單旨在深入探討佛教與科學之間的對話,從量子力學到認知科學,並探索兩者在理解宇宙、心識與存在的奧祕上相輔相成。影片涵蓋佛教中的金剛經、八識、十識與十一識的概念,以及它們如何與現代科學理論相映成趣,揭示出人類認識真理的多元途徑。
Thumbnail
雖然是很簡單的介紹,但nico的功能蠻容易被忽略的,因此這邊將說明播放頁面介面以及這些按鈕能做到什麼,希望能給在nico投稿、尋寶、應援、看影片和發彈幕的人帶來更多樂趣!
Thumbnail
俄羅斯國內禁止播放入侵烏克蘭的相關影像,而駭客組織「匿名者」表示他們已駭入俄羅斯國營電視台,並播放了烏克蘭境內的影像。
Thumbnail
卡爾維諾曾寫過一篇《攝影師的冒險》,收錄於困難的愛一書。 故事大略是敘述一名攝影師約了一名不確定會不會有更進一步發展的女性作為他的模特,書寫了拍攝的過程中如同決鬥寫真般的精神互動與富饒著德勒茲所說的動情素般的乙太情慾彌留。
Thumbnail
:: 參展作品:= 大家午安。那、其實我一開始不太確定,對主題感到有點朦朧,後來說文解字的想了一下,應該就是要第一眼就能很強烈的能在影像上「看見空白」吧。
Thumbnail
這幾天讀了德勒茲的以卡夫卡為例談論的《什麼是弱勢文學》,不小心有點太喜歡了,喜歡到似乎很久沒有這樣激動到要為這樣的時候寫一篇,大概是在閱讀的過程中發現自己會很喜歡的那些作家與藝術家,其實都很深地具有弱勢文學的特質吧