Guillaume de Bure
10 years ago
3 changed files with 90 additions and 2 deletions
Split View
Diff Options
-
+10 -0examples/example-video.htm
-
+68 -0examples/example-video.json
-
+12 -2src/js/pannellum.js
+ 10
- 0
examples/example-video.htm
View File
| @@ -0,0 +1,10 @@ | |||
| <!DOCTYPE HTML> | |||
| <html> | |||
| <head> | |||
| <title>pannellum embed example</title> | |||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |||
| </head> | |||
| <body> | |||
| <iframe title="pannellum panorama viewer" width="480" height="390" webkitAllowFullScreen mozallowfullscreen allowFullScreen style="border-style:none;" src="../src/pannellum.htm?tour=../examples/example-video.json"></iframe> | |||
| </body> | |||
| </html> | |||
+ 68
- 0
examples/example-video.json
View File
| @@ -0,0 +1,68 @@ | |||
| { | |||
| "default": { | |||
| "author": "Matthew Petroff", | |||
| "firstScene": "pond", | |||
| "autoload": "yes" | |||
| }, | |||
| "scenes": { | |||
| "pondCube": { | |||
| "title": "Jordan Pond (Cube)", | |||
| "preview": "./examplepano-preview.jpg", | |||
| "type": "cubemap", | |||
| "cubeMap": [ | |||
| "./examplepanocube0.jpg", | |||
| "./examplepanocube1.jpg", | |||
| "./examplepanocube2.jpg", | |||
| "./examplepanocube3.jpg", | |||
| "./examplepanocube4.jpg", | |||
| "./examplepanocube5.jpg" | |||
| ], | |||
| "hotSpots": [ | |||
| { | |||
| "pitch": -12, | |||
| "yaw": -170, | |||
| "type": "info", | |||
| "text": "This is Jordan Pond, located in Acadia National Park." | |||
| }, | |||
| { | |||
| "pitch": -10, | |||
| "yaw": 50, | |||
| "type": "info", | |||
| "text": "This is a link.", | |||
| "URL": "https://github.com/mpetroff/pannellum" | |||
| }, | |||
| { | |||
| "pitch": 0, | |||
| "yaw": 60, | |||
| "type": "scene", | |||
| "text": "Pond", | |||
| "sceneId": "pond" | |||
| } | |||
| ] | |||
| }, | |||
| "pond": { | |||
| "title": "Jordan Pond", | |||
| "preview": "./examplepano-preview.jpg", | |||
| "panorama": "./examplepano.jpg", | |||
| "hotSpots": [ | |||
| { | |||
| "pitch": 0, | |||
| "yaw": -100, | |||
| "type": "scene", | |||
| "text": "Pond (cube)", | |||
| "sceneId": "pondCube" | |||
| }, | |||
| { | |||
| "pitch":0, | |||
| "yaw": -120, | |||
| "text": "Video Test ", | |||
| "type": "info", | |||
| "video": "../examples/big_buck_bunny_480p_h264.mov", | |||
| "width":200 | |||
| } | |||
| ] | |||
| } | |||
| } | |||
| } | |||
+ 12
- 2
src/js/pannellum.js
View File
| @@ -474,8 +474,11 @@ function createHotSpots() { | |||
| } else { | |||
| config.hotSpots.forEach(function(hs) { | |||
| var div = document.createElement('div'); | |||
| var span = document.createElement('span'); | |||
| div.setAttribute('class', 'hotspot tooltip sprite ' + hs.type); | |||
| var span = document.createElement('span'); | |||
| span.innerHTML = hs.text; | |||
| if(hs.URL) { | |||
| var a = document.createElement('a'); | |||
| a.setAttribute('href', hs.URL); | |||
| @@ -484,6 +487,13 @@ function createHotSpots() { | |||
| div.style.cursor = 'pointer'; | |||
| span.style.cursor = 'pointer'; | |||
| a.appendChild(div); | |||
| } else if (hs.video) { | |||
| var video = document.createElement('video'); | |||
| video.setAttribute('src',hs.video); | |||
| video.setAttribute('controls',true); | |||
| video.setAttribute('width',hs.width); | |||
| document.getElementById('page').appendChild(div); | |||
| span.appendChild(video) | |||
| } else { | |||
| if(hs.sceneId) { | |||
| div.onclick = function() { | |||
| @@ -495,7 +505,7 @@ function createHotSpots() { | |||
| } | |||
| document.getElementById('page').appendChild(div); | |||
| } | |||
| span.innerHTML = hs.text; | |||
| div.appendChild(span); | |||
| span.style.width = span.scrollWidth - 20 + 'px'; | |||
| span.style.marginLeft = -(span.scrollWidth - 26) / 2 + 'px'; | |||