如何使用Clappr用J??avaScript创建360 Video Player

本文概述

1.包括Clappr和360视频插件
2.设置360 Video Player
最后的例子

360个视频以常规视频文件或流的形式提供。即使在较新的浏览器中, 它们通常也无法正常工作, 因为它们将显示为普通视频, 并且用户会在一个框中看到整个全景图。但是, 最好为用户提供通常的界面, 使他能够拖动视频并像当今许多视频播放器(FB, YouTube等)一样观看整个视频。然后, 交互式视频播放器将其重新映射以仅显示用户正在查看的整个视野??。
在本文中, 我们将向你展示如何使用Clappr来实现360视频播放器。
1.包括Clappr和360视频插件创建你自己的360视频播放器所需的唯一库是Clappr。 Clappr只是Web的可扩展媒体播放器。 Clappr正在进行大量开发, 但是已经可以投入生产, 因此你可以打开问题并发送拉取请求。
该项目位于npm上, 因此你可以使用以下命令将其安装为项目的依赖项：

npm install clappr

你将需要安装Clappr的360视频插件, 该插件可让你轻松在视频播放器上播放360视频：

npm install clappr-video360

【如何使用Clappr用J??avaScript创建360 Video Player】最后, 你需要包括播放器的主文件clappr.js和360视频播放器插件clappr-video360.min.js。另外, 如果你不使用软件包管理器, 请从此处的存储库下载clappr的缩小版本, 并在此处下载360视??频插件的副本。或者, 如果你仅愿意在项目上测试该库, 请使用CDN：

< !-- Include Clappr --> < script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"> < /script> < !-- Include the 360 videoplayer plugin --> < script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"> < /script>

有关Clappr播放器的更多信息和文档, 请访问Github上的官方存储库。有关360 Video Plugin的更多信息, 请访问Github上的存储库。包括这两个文件将为你的网页增加大约185KB的下载大小。
2.设置360 Video Player使用Clappr的视频播放器的实现非常简单, 你至少需要在源参数中提供要播放的视频的URL, 并在要创建视频播放器的文档中提供DIV元素的ID。。那将实现一个基本的播放器, 但是如果你想允许播放360度视频, 则需要在容器中注入Vide360插件。
以下示例显示了如何使用VanillaJS在浏览器中实现基本的360视频播放器, 以及如何在使用模块捆绑器(webpack, browserify等)时要求使用模块：
A.使用VanillaJS(直接在浏览器中)

// The URL to the 360 video player var Video360Url = 'video360.mp4'; // Configure your Clappr player.var PlayerInstance = new Clappr.Player({source: Video360Url, plugins: {container: [Video360], }, parentId: '#player', }); // Important to disable the click to pause native plugin of clappr// otherwise you won't be able to use correctly the playerPlayerInstance.getPlugin('click_to_pause').disable();

该插件在窗口中创建一个全局变量, 即Video360, 需要将其作为插件插入Clappr中。
B.使用模块捆绑器
如果使用模块捆绑器, 则将需要每个模块, 如以下示例所示：

// require modulesvar Clappr = require("clappr"); var Video360 = require("clappr-video360"); // The URL to the 360 video playervar Video360Url = 'video360.mp4'; // Configure your Clappr player.var PlayerInstance = new Clappr.Player({source: Video360Url, plugins: {container: [Video360], }, parentId: '#player', }); // Important to disable the click to pause native plugin of clappr// otherwise you won't be able to use correctly the playerPlayerInstance.getPlugin('click_to_pause').disable();

注意没有要测试的360度视频？下载以下任何免费的360视频, 你可以在此处从Vimeo下载。
最后的例子以下文档使用CDN文件创建了一个基本的360视频播放器, 因此你可以简单地复制代码并从本地服务器运行它。你只需要替换360视频的URL, 就是这样：

< !DOCTYPE html> < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=utf-8"> < title> Clappr Video360< /title> < /head> < body> < !-- 1. Create a div where the player will be placed --> < div id="player"> < /div> < !-- 2. Include Clappr and the 360 videoplayer plugin--> < script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"> < /script> < script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"> < /script> < !-- 3. Configure video player--> < script> // The URL to the 360 video player var Video360Url = 'video360.mp4'; // Configure your Clappr player.var PlayerInstance = new Clappr.Player({source: Video360Url, plugins: {container: [Video360], }, parentId: '#player', }); // Important to disable the click to pause native plugin of clappr// otherwise you won't be able to use correctly the playerPlayerInstance.getPlugin('click_to_pause').disable(); < /script> < /body> < /html>

编码愉快！