html5自定义皮肤的在线视频播放器插件

html5自定义皮肤的在线视频播放器插件

HTML5原生支持在网页中插入一个视频播放器,支持视频播放的全部功能。这次我们分享一款自定义皮肤的HTML5在线视频播放器,一共有4种皮肤供大家选择。它简化了一些原生播放器的功能,比如上一个、下一个,但是它对播放器默认的皮肤做了优化,让播放器的外观变得更加简洁漂亮。

使用方法
在页面引入相关CSS样式文件

1
2
3
4
5
<!--布局样式,意义不大-->
<link rel="stylesheet" href="css/demo.css">

<!--核心样式-->
<link rel="stylesheet" href="dist/css/ckin.css">

HTML机构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<section class="demo-section demo-section--light" id="skins">
    <div class="container">
        <h2 class="title heading">Skins</h2>
        <ul class="demo-list">
            <li class="demo-list__item">
                <p>Default Ckin without overlay</p>
                <video poster="ckin.jpg" src="ckin.mp4" data-ckin="default"></video>
            </li>
            <li class="demo-list__item">
                <p>Minimal Ckin with overlay</p>
                <video poster="ckin.jpg" src="ckin.mp4" data-ckin="minimal" data-overlay="1"></video>
            </li>
            <li class="demo-list__item">
                <p>Compact Ckin with overlay</p>
                <video poster="ckin.jpg" src="ckin.mp4" data-ckin="compact" data-overlay="2"></video>
            </li>
            <li class="demo-list__item">
                <p>Compact Ckin with custom color</p>
                <video poster="ckin.jpg" src="ckin.mp4" data-color="#fff000" data-ckin="compact" data-overlay="2"></video>
            </li>
            <li class="demo-list__item">
                <img src="logo.png" class="nav__logo" alt="Ckin">
                <h2 class="coming-soon">More ckins coming soon...</h2>
            </li>
        </ul>
    </div>
</section>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论