您现在的位置是:网站首页 > 心得笔记

clappr一个开源的Web网页播放器

盛悦2019-05-16318人围观
简介clappr是一个开源的Web网页播放器,支持大部分现代浏览器,拥有丰富的扩展插件,如进度条缩略图、标记、播放速率、水印广告、360度视角等

运行效果:

b6.png


使用方法:

<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>