DIY video player - 自定义video播放器样式

Carbs 发布于2019-08-29 16:42 / 1933人阅读

摘要：本文基于，自定义视频播放器样式。有的浏览器就是不支持，白名单都没有。来个，打开为移动端模式，的事件是支持的，只是样式需要自个儿来。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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