Servus,
möchte aktuell einen 360° Video Viewer erstellen. Dies bewerkstellige ich mit Pannellum.
Aktuelles Problem: Das Video wird nicht als 360° Video dargestellt so wie im Beispiel: Pannellum Video Beispiel, sondern als normales Video (keine Rotation etc.). Beispielbild im Anhang.
Den Beispielcode habe ich von Pannellum entnommen (auch im Link hinterlegt):
HTML: Pannellum Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pannellum Video Demo</title>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
<script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>
<link href="https://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet"
type="text/css">
<script src="https://vjs.zencdn.net/5.4.6/video.js"></script>
<script src="/js/videojs-pannellum-plugin.js"></script>
</head>
<body>
<video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="none" style="width:100%;height:400px;"
poster="/images/video/jfk-poster.jpg" crossorigin="anonymous">
<source src="/images/video/jfk.webm" type="video/webm"/>
<source src="/images/video/jfk.mp4" type="video/mp4"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to
a web browser that <a href="http://videojs.com/html5-video-support/"
target="_blank">supports HTML5 video</a>
</p>
</video>
<script>
videojs('panorama', {
plugins: {
pannellum: {}
}
});
</script>
</body>
</html>HTML: Mein aktueller Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pannellum Video Demo</title>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
<script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>
<link href="https://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet"
type="text/css">
<script src="https://vjs.zencdn.net/5.4.6/video.js"></script>
<script src="/js/videojs-pannellum-plugin.js"></script>
</head>
<body>
<video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="none" style="width:100%;height:400px;"
poster="/images/video/jfk-poster.jpg" crossorigin="anonymous">
<source src="http://localhost/pannellum-2.4.0/examples/V0030004.MP4" type="video/mp4"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to
a web browser that <a href="http://videojs.com/html5-video-support/"
target="_blank">supports HTML5 video</a>
</p>
</video>
<script>
videojs('panorama', {
plugins: {
pannellum: {}
}
});
</script>
</body>
</html>Das Video wird geöffnet, aber bei der Darstellung liegt aktuell noch ein Problem vor.
Würde mich über Hilfe freuen.
Grüße
