# clappr
# 附图几张
# 用的二更视频做的演示
这张就是clappr 首样图
这张是加了插件预览图
全部插件
功能齐全 方便灵活 居家必备 工作所需
附代码----- 复制粘贴 看看效果 代码下方传送门开启！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/clappr.thumbnails-plugin/latest/clappr-thumbnails-plugin.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-markers-plugin@latest/dist/clappr-markers-plugin.js"></script>
</head>
<body>
<div id="player"></div>
<script>
var thumbs = [];
for (var i=0; i<104; i++) {
thumbs.push({
url: "http://tjenkinson.me/clappr-thumbnails-plugin/assets/thumbnails/thumb_"+(i+1)+".jpg",
time: 1 + (i*2)
});
}
var player = new Clappr.Player({
source: "http://v1.ergengtech.com/transcode/4942b6557a1cb960fb855da01947d62f/e64489d74762dc1ce536e545a5de4182.mp4",
parentId: "#player",
plugins: {
core: [ClapprThumbnailsPlugin,ClapprMarkersPlugin],
},
scrubThumbnails: {
backdropHeight: 64, // set to 0 or null to disable backdrop
spotlightHeight: 84, // set to 0 or null to disable spotlight
backdropMinOpacity: 0.4, // optional
backdropMaxOpacity: 1, // optional
thumbs: thumbs
},
markersPlugin: {
markers: [
new ClapprMarkersPlugin.StandardMarker(0, "The beginning!"),
new ClapprMarkersPlugin.StandardMarker(90, "Something interesting."),
new ClapprMarkersPlugin.StandardMarker(450, "The conclusion.")
],
tooltipBottomMargin: 17 // optional
}
});
</script>
</body>
</html>
传送门！
bootstrap-cdn 加速
https://www.bootcdn.cn/clappr/readme/
网友评论