摘要:之前也有用到,大概是生日賀卡,博客音樂(lè),播放語(yǔ)音等場(chǎng)景。哦,可能還會(huì)涉及到自動(dòng)播放。資料為元素,可以初始化多個(gè)播放器樣式是寫(xiě)在代碼里的,如果有需要,可以把代碼摳出來(lái)放在文件里。然后再化成自己喜歡的樣子。來(lái)個(gè),打開(kāi)為移動(dòng)端模式。
之前也有用到audio,大概是生日賀卡,博客音樂(lè),播放語(yǔ)音等場(chǎng)景。
場(chǎng)景也比較簡(jiǎn)單,一個(gè)按鈕加一點(diǎn)動(dòng)畫(huà),再用上Audio的API,基本上就可以搞定了。
哦,可能還會(huì)涉及到自動(dòng)播放。【這里】
以上場(chǎng)景,我們一般都看不到Audio的樣式,基本都被隱藏了。因?yàn)閷?duì)于新時(shí)代的我們來(lái)說(shuō),暫時(shí)還沒(méi)有g(shù)et它的美。
但是,我們要控制音頻的播放,直觀的看到時(shí)間進(jìn)度等,那就需要展示這東西了。世上沒(méi)有丑audio,只有懶audio.
我們給它化個(gè)妝就好了。淡妝,淡妝。
【code here】
資料HTML/Element/audio
Media_events
Use$(selector).initAudioPlayer(); // select 為audio元素,可以初始化多個(gè)
播放器樣式是寫(xiě)在js代碼里的,如果有需要,可以把代碼摳出來(lái)放在CSS文件里。然后再化成自己喜歡的樣子。或者你產(chǎn)品經(jīng)理喜歡的樣子。
DEMO來(lái)個(gè)demo,PC 打開(kāi)為移動(dòng)端模式。
手機(jī)掃描二維碼:
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/97729.html
摘要:之前也有用到,大概是生日賀卡,博客音樂(lè),播放語(yǔ)音等場(chǎng)景。哦,可能還會(huì)涉及到自動(dòng)播放。資料為元素,可以初始化多個(gè)播放器樣式是寫(xiě)在代碼里的,如果有需要,可以把代碼摳出來(lái)放在文件里。然后再化成自己喜歡的樣子。來(lái)個(gè),打開(kāi)為移動(dòng)端模式。 之前也有用到audio,大概是生日賀卡,博客音樂(lè),播放語(yǔ)音等場(chǎng)景。場(chǎng)景也比較簡(jiǎn)單,一個(gè)按鈕加一點(diǎn)動(dòng)畫(huà),再用上Audio的API,基本上就可以搞定了。哦,可能還會(huì)...
摘要:本文基于,自定義視頻播放器樣式。有的瀏覽器就是不支持,白名單都沒(méi)有。來(lái)個(gè),打開(kāi)為移動(dòng)端模式,的事件是支持的,只是樣式需要自個(gè)兒來(lái)。 DIY 本文基于HTML5 Video API,自定義Web視頻播放器樣式。 其實(shí)吧,原生的video 標(biāo)簽樣式挺好看的,但每個(gè)人的視覺(jué)感受不一樣,所以就會(huì)有需要改變?cè)鷺邮降臅r(shí)候。 那就給它化個(gè)妝咯。淡妝,淡妝。 【code here】 添加play...
摘要:本文基于,自定義視頻播放器樣式。有的瀏覽器就是不支持,白名單都沒(méi)有。來(lái)個(gè),打開(kāi)為移動(dòng)端模式,的事件是支持的,只是樣式需要自個(gè)兒來(lái)。 DIY 本文基于HTML5 Video API,自定義Web視頻播放器樣式。 其實(shí)吧,原生的video 標(biāo)簽樣式挺好看的,但每個(gè)人的視覺(jué)感受不一樣,所以就會(huì)有需要改變?cè)鷺邮降臅r(shí)候。 那就給它化個(gè)妝咯。淡妝,淡妝。 【code here】 添加play...
閱讀 1048·2021-11-18 13:23
閱讀 753·2021-11-08 13:16
閱讀 870·2021-10-11 10:58
閱讀 3516·2021-09-22 15:26
閱讀 1741·2021-09-08 10:42
閱讀 1824·2021-09-04 16:45
閱讀 1743·2019-08-30 15:54
閱讀 2573·2019-08-30 13:45