DIY video player - 自定義video播放器樣式

Carbs 發布于2019-08-29 16:42 / 1907人閱讀

摘要：本文基于，自定義視頻播放器樣式。有的瀏覽器就是不支持，白名單都沒有。來個，打開為移動端模式，的事件是支持的，只是樣式需要自個兒來。

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的事件是支持的，只是樣式需要自個兒來。

手機掃描二維碼：

GPU云服務器云服務器 h5視頻播放器可自定義樣式 <video>如何播放webrtc視頻自定義按鈕樣式 video

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113927.html

DIY video player - 自定義video播放器樣式

摘要：本文基于，自定義視頻播放器樣式。有的瀏覽器就是不支持，白名單都沒有。來個，打開為移動端模式，的事件是支持的，只是樣式需要自個兒來。 DIY 本文基于HTML5 Video API，自定義Web視頻播放器樣式。其實吧，原生的video 標簽樣式挺好看的，但每個人的視覺感受不一樣，所以就會有需要改變原生樣式的時候。那就給它化個妝咯。淡妝，淡妝。【code here】添加play...

BlackHole1 2019-08-23 11:57 評論0 收藏0
Day11 - 自定義視頻播放器

摘要：自定義視頻播放器微信公眾號開發企業級產品全棧開發速成周末班首期班號正式開班，歡迎搶座作者簡介是推出的一個天挑戰。 Day11 - 自定義視頻播放器 (Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座) 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視...

SKYZACK 2019-08-20 18:26 評論0 收藏0