鬼谷子和单双中特
Web开源好物——开源可扩展媒体播放器clappr.js
电?#30333;?#35810;
15503299979
微信咨询

Web开源好物——开源可扩展媒体播放器clappr.js

发布时间:2019-7-15 9:55:09作者:总管理员

介绍


在web开发中常常会遇到视频等媒体播放的问题,那么就需要一个好用的媒体播放器来提供基础技术支持,而clappr就很好的满足了我们的要求,它是一个Javascript实现的可扩展的Web媒体播放器,功能


非常强悍,你可以在GitHub上查看它,下面我们就一起来看一看吧。


如?#38382;?#29992;?


将Javascript标签引入html

<head>


 <script type="text/javascript" src="clappr.min.js"></script>


</head>


使用它创建一个播放器实例

<body>


 <div id="player"></div>


 <script>


 var player = new Clappr.Player({source: "url", parentId: "#player"});


 </script>


</body>


典型示例


由于clappr是可扩展的,所以会有一些非常不错的插件

360角度视频


Web开源好物——开源可扩展媒体播放器clappr.js


npm install clappr clappr-video360


<script type="text/javascript" charset="utf-8" src="clappr.min.js"></script>


<script type="text/javascript" charset="utf-8" src="clappr-video360.min.js"></script>


var p = new Clappr.Player({


 source: 'url',


 plugins: {


 container: [Video360],


 },


 parentId: '#player',


});


// for better usability, disable clappr's click_to_pause plugin


p.getPlugin('click_to_pause').disable();


代码量很少就能实现一个类似于这样的功能

缩略图模式


<head>


 <script type="text/javascript" src="clappr.min.js"></script>


 <script type="text/javascript" src="clappr-thumbnails-plugin.js"></script>


</head>


var player = new Clappr.Player({


 source: "url",


 plugins: {


 core: [ClapprThumbnailsPlugin]


 },


 scrubThumbnails: {


 backdropHeight: 64,


 spotlightHeight: 84,


 thumbs: [


  {time: 0, url: "url"},


  {time: 2, url: "url"},


  {time: 4, url: "url"}


 ]


 }


});


视?#21040;?#24230;条标记


<head>


 <script type="text/javascript" src="clappr.min.js"></script>


 <script type="text/javascript" src="clappr-markers-plugin.js"></script>


</head>


var player = new Clappr.Player({


 source: "url",


 plugins: {


 core: [ClapprMarkersPlugin]


 },


 markersPlugin: {


 markers: [


 new ClapprMarkersPlugin.StandardMarker(0, "The beginning!"),


 new ClapprMarkersPlugin.StandardMarker(90, "Something interesting."),


 new ClapprMarkersPlugin.StandardMarker(450, "The conclusion.")


 ],


 tooltipBottomMargin: 17 // optional


 }


});


清晰度调整


<head>


 <script type="text/javascript" src="clappr.min.js"></script>


 <script type="text/javascript" src="level-selector.js"></script>


</head>


var player = new Clappr.Player({


 source: "url",


 plugins: [LevelSelector]


});


你还可以自定义标题等


var player = new Clappr.Player({


 source: "url",


 plugins: [LevelSelector],


 levelSelectorConfig: {


 title: 'Quality',


 labels: {


 2: 'High', // 500kbps


 1: 'Med', // 240kbps


 0: 'Low', // 120kbps


 },


 labelCallback: function(playbackLevel, customLabel) {


 return customLabel + playbackLevel.level.height+'p'; 


 }


 },


});


<head>


 <script type="text/javascript" src="clappr.min.js"></script>


 <script type="text/javascript" src="clappr-stats.min.js"></script>


 <script type="text/javascript" src="clappr-nerd-stats.min.js"></script>


</head>


<body>


 <div id="player"></div>


 <script>


 window.player = new Clappr.Player({


 parentId: '#player',


 plugins: [ClapprNerdStats, ClapprStats],


 // source: 'url',


 source: 'url',


 height: 607.5,


 width: 1080,


 clapprNerdStats: {


 // Optional: provide multiple combination of keyboard shortcuts to show/hide the statistics.


 // Default: ['command+shift+s', 'ctrl+shift+s']


 shortcut: ['command+shift+s', 'ctrl+shift+s'],


 // Optional: position of the icon to show/hide the statistics.


 // Values: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'none'


 // Default: 'top-right'


 iconPosition: 'top-right'


 }


 })


 </script>


</body>


总结


clappr的最大优点就在于起扩展性,你可以在其基础上通过插件的方式实现更多有趣和实用的功能,而且你还可以自定义UI,或许会给你带来一些惊喜!

鬼谷子和单双中特