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