运行效果：

使用方法：

<div id="player"></div><!--在页面中加入了一个#player元素用来加载播放器，你也可以把#player换成别的名字-->
<script src="https://cdn.bootcss.com/clappr/0.2.95/clappr.plainhtml5.min.js"></script>

加载播放器：

<script>
    var player = new Clappr.Player({
         width:,//播放器宽度，数字和百分比
         height:,//播放器高度，数字和百分比
        source: "https://jjjc.blonglee.me/Uploads/ueditor/20190410/15548814105302032841347470.mp4",//播放源地址，支持mp4，flv，m3u8等
        parentId: "#player",//指定关联的播放器容器，即对应的选择器元素，如player
        loop:true,//是否允许循环播放
        mute:false,//是否允许视频播放开始时静音
        actualLiveTime:true,在进度栏显示实际播放时间
        watermark:"https://jjjc.blonglee.me/front/res/static/img/logo.png",//水印图片,可以添加logo
        position: ['300px', '300px', '300px', '300px'],//水印位置，四个方向：bottom-left, bottom-right, top-left and top-right
        watermarkLink:"https://jjjc.blonglee.me",//水印链接，支持点击跳转
        audioOnly:false,//只播放声音音频
        events: {
            onReady: function() {
//                alert('当播放器准备好时');
            },
            onResize: function() {
//                alert('当播放器缩放时');
            },
            onPlay: function() {
//                alert('当播放时');
            },
            onPause: function() {
//                alert('当暂停时');
            },
            onStop: function() {
//                alert('当播放停止时');
            },
            onEnded: function() {
//                alert('放播放结束时');
            },
            onSeek: function() {
//                alert('当查找视频进度时');
            },
            onError: function() {
//                alert('当播放出错时');
            },
            onTimeUpdate: function() {
//                alert('当播放时间更新时');
            },
            onVolumeUpdate: function() {
//                alert('当音量更新时');
            },
        }
    });
</script>