A 360º video viewer plugin for larkplayer
MIT License
larkplayer 360
CDN
<script type="text/javascript" src="https://unpkg.com/larkplayer-vr@latest/dist/larkplayer-vr.js"></script>
NPM
npm install larkplayer-vr
<!DOCTYPE html>
<html>
<head>
<title>larkplayer vr test</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/larkplayer@latest/dist/larkplayer.css">
<style type="text/css">
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<video id="video-el" src="https://dblate.github.io/larkplayer-vr/examples/mp4" loop></video>
<script type="text/javascript" src="https://unpkg.com/larkplayer@latest/dist/larkplayer.js"></script>
<script type="text/javascript" src="https://unpkg.com/larkplayer-vr@latest/dist/larkplayer-vr.js"></script>
<script type="text/javascript">
var width = Math.min(document.body.clientWidth, 640);
var options = {};
var player = larkplayer('video-el', {
width: width,
height: width * 9 / 16,
plugin: {
/**
* larkplayer-vr
*
* @param {Object=} options
* @param {number} options.height canvas
* @param {number} options.width canvas
* @param {number} options.initialYaw 45, 90, 180
* @param {Function} options.onError
* @param {Function} options.onDragStart
* @param {Function} options.onDragStop
* @param {boolean} options.verticalPanning false
*/
vr: options
}
});
//
// player.plugin.vr.centralize();
//
// player.plugin.vr.dispose();
</script>
</body>
</html>
__pc __
360 videos doesn't work in Safari, IE 11, Microsoft Edge, Android and iOS if the video is served from a different domain, due some CORS implementation bugs.
larkplayer-vr is under MIT LICENSE