srcmini本文概述
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.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 player
PlayerInstance.getPlugin('click_to_pause').disable();该插件在窗口中创建一个全局变量, 即Video360, 需要将其作为插件插入Clappr中。
B.使用模块捆绑器
如果使用模块捆绑器, 则将需要每个模块, 如以下示例所示：
// require modules
var Clappr = require("clappr");
var Video360 = require("clappr-video360");
// 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 player
PlayerInstance.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 player
PlayerInstance.getPlugin('click_to_pause').disable();
</script>
</body>
</html>编码愉快！
评论前必须登录！
注册