First working version of video in hotspots

преди 10 години · 317fa24114
--- a/examples/example-video.htm
+++ b/examples/example-video.htm
@@ -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>
--- a/examples/example-video.json
+++ b/examples/example-video.json
@@ -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
                }
            ]
        }
    }
 }
--- a/src/js/pannellum.js
+++ b/src/js/pannellum.js
@@ -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';