資訊專欄INFORMATION COLUMN
摘要：本文基于，自定義視頻播放器樣式。有的瀏覽器就是不支持，白名單都沒(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】
添加playsinline屬性：
webkit-playsinline="true" playsinline="true" x5-playsinline
這個(gè)playsinline屬性是讓video內(nèi)斂到瀏覽器webview里面，而不使用瀏覽器自己實(shí)現(xiàn)的video樣式，但是有的瀏覽器不認(rèn)這個(gè)，就是強(qiáng)制要用自己的。比如UC，你要用的話就需要它給你配置白名單。有的瀏覽器就是不支持，白名單都沒(méi)有。
關(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來(lái)個(gè)demo，PC 打開(kāi)為移動(dòng)端模式，PC的事件是支持的，只是樣式需要自個(gè)兒來(lái)。
手機(jī)掃描二維碼：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113927.html
摘要：本文基于，自定義視頻播放器樣式。有的瀏覽器就是不支持，白名單都沒(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...
摘要：自定義視頻播放器微信公眾號(hào)開(kāi)發(fā)企業(yè)級(jí)產(chǎn)品全棧開(kāi)發(fā)速成周末班首期班號(hào)正式開(kāi)班，歡迎搶座作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 Day11 - 自定義視頻播放器 (Node+Vue+微信公眾號(hào)開(kāi)發(fā))企業(yè)級(jí)產(chǎn)品全棧開(kāi)發(fā)速成周末班首期班(10.28號(hào)正式開(kāi)班，歡迎搶座) 作者：?liyuechun 簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視...
閱讀 2818·2021-11-24 09:39
閱讀 2794·2021-09-23 11:45
閱讀 3418·2019-08-30 12:49
閱讀 3368·2019-08-30 11:18
閱讀 1936·2019-08-29 16:42
閱讀 3356·2019-08-29 16:35
閱讀 1337·2019-08-29 11:21
閱讀 1931·2019-08-26 13:49
