【原创】HTML5视频播放器,超好看,自适应全终端支持!


半夜没事做了一款播放器,可以理解为算是把html5默认的播放器美化了一下吧!因为默认的视频播放器还是比较拉胯的~而且功能也不是很多,仅仅支持基础点击快进,播放/暂停,声音和全屏缩放。

你可以自定义图标按钮的大小,因为使用的是字体图标,所以直接用font-size来控制大小即可!可以自定义按钮的颜色以及控制条颜色,总之就是所有颜色和组件的大小都可以通过CSS来控制!

播放器演示

https://demo.shaosiming.net/player/index.html

图片展示

引入文件

<link rel="stylesheet" href="static/css/ssm-video.css">
<!--CSS文件引入在顶部<head>...</head>即可!-->
<script src="static/js/ssm-video.js"></script>
<!--JS文件引入在底部</body>,必须在播放器下方,否则播放器失效-->

添加播放器

<video poster="ssm.jpg" src="ssm.mp4" data-ssm="ssm-player"></video>
<!--
    poster = 播放前预览图片
    src = 视频地址,MP4连接
-->

下载地址

本站CDN加速下载



版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命个人博客

本文链接https://www.shaosiming.net/jskz/html5css3/8.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 0 条评论,你也快来参与吧!

还没有评论呢~快来一鸣惊人吧!

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主