資訊專欄INFORMATION COLUMN
摘要：本文基于，自定義視頻播放器樣式。有的瀏覽器就是不支持，白名單都沒有。來個(gè)，打開為移動(dòng)端模式，的事件是支持的，只是樣式需要自個(gè)兒來。
DIY
本文基于HTML5 Video API，自定義Web視頻播放器樣式。
其實(shí)吧，原生的video 標(biāo)簽樣式挺好看的，但每個(gè)人的視覺感受不一樣，所以就會(huì)有需要改變原生樣式的時(shí)候。
那就給它化個(gè)妝咯。淡妝，淡妝。
【code here】
添加playsinline屬性：
webkit-playsinline="true" playsinline="true" x5-playsinline
這個(gè)playsinline屬性是讓video內(nèi)斂到瀏覽器webview里面，而不使用瀏覽器自己實(shí)現(xiàn)的video樣式，但是有的瀏覽器不認(rèn)這個(gè)，就是強(qiáng)制要用自己的。比如UC，你要用的話就需要它給你配置白名單。有的瀏覽器就是不支持，白名單都沒有。
關(guān)于騰訊的x5等瀏覽器的這些屬性可以看他們的文章【騰訊瀏覽服務(wù)-H5同層播放器接入規(guī)范】
資料Video/Audio
HTML/Element/video
Media_events
Use$(selector).initVideoPlayer(); // select 為video元素
播放器樣式在git code項(xiàng)目的demo文件夾有多帶帶的css，可根據(jù)需要改成自己喜歡的樣子，或者你產(chǎn)品經(jīng)理喜歡的樣子。
DEMO來個(gè)demo，PC 打開為移動(dòng)端模式，PC的事件是支持的，只是樣式需要自個(gè)兒來。
手機(jī)掃描二維碼：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97728.html
摘要：本文基于，自定義視頻播放器樣式。有的瀏覽器就是不支持，白名單都沒有。來個(gè)，打開為移動(dòng)端模式，的事件是支持的，只是樣式需要自個(gè)兒來。 DIY 本文基于HTML5 Video API，自定義Web視頻播放器樣式。 其實(shí)吧，原生的video 標(biāo)簽樣式挺好看的，但每個(gè)人的視覺感受不一樣，所以就會(huì)有需要改變原生樣式的時(shí)候。 那就給它化個(gè)妝咯。淡妝，淡妝。 【code here】 添加play...
摘要：自定義視頻播放器微信公眾號開發(fā)企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班號正式開班，歡迎搶座作者簡介是推出的一個(gè)天挑戰(zhàn)。 Day11 - 自定義視頻播放器 (Node+Vue+微信公眾號開發(fā))企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班(10.28號正式開班，歡迎搶座) 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視...
閱讀 2608·2021-09-24 10:29
閱讀 3892·2021-09-22 15:46
閱讀 2631·2021-09-04 16:41
閱讀 3038·2019-08-30 15:53
閱讀 1327·2019-08-30 14:24
閱讀 3115·2019-08-30 13:19
閱讀 2235·2019-08-29 14:17
閱讀 3583·2019-08-29 12:55
