前言：
现在大家对“web媒体扩展是什么”大体比较关注，朋友们都想要分析一些“web媒体扩展是什么”的相关内容。那么小编在网上汇集了一些对于“web媒体扩展是什么””的相关资讯，希望朋友们能喜欢，兄弟们快快来了解一下吧！介绍
在web开发中常常会遇到视频等媒体播放的问题，那么就需要一个好用的媒体播放器来提供基础技术支持，而clappr就很好的满足了我们的要求，它是一个Javascript实现的可扩展的Web媒体播放器，功能非常强悍，你可以在GitHub上查看它，下面我们就一起来看一看吧（下面只是截图）！
如何使用？
将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角度视频
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 pluginp.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"} ] }});视频进度条标记<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，或许会给你带来一些惊喜！
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #web媒体扩展是什么
