識別並顯示HTML中的360度圖像

Question

我有一些360度圖像，例如this，我想將其嵌入到網站中。我一直在尋找，但沒有找到插件或（可能）HTML5方法用於嵌入和播放這些全景。

有沒有辦法檢測這些jpg圖像（而不是「標準」jpgs）並將它們顯示爲360視圖？如果你點擊下載按鈕並查看源圖像，你會看到我的意思是關於文件類型是一個普通的jpg。

我希望能夠認識到這些並播放「播放器」，而不是做同樣的非360張。

感謝

Answer 1

您可以使用谷歌的託管VR視圖https://developers.google.com/vr/concepts/vrview。例如，您可以在您的網頁中包含以下內容：

<iframe width="100%" 
    height="300px" 
    allowfullscreen 
    frameborder="0" 
    src="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg& 
    is_stereo=true"> 
</iframe> 

您也可以自己託管VR視圖。從https://github.com/googlevr/vrview下載代碼並將其託管在公共訪問的某個位置。如果你把它的服務器上稱爲「360view」文件夾中，然後你就可以在//yourdomain.com/360view/?image=examples/coral.jpg&is_stereo=true 這裏訪問它是一個例子：

<iframe width="100%" 
 
\t height="300px" 
 
\t allowfullscreen 
 
\t frameborder="0" 
 
\t src="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg& 
 
\t is_stereo=true"> 
 
</iframe>

或者在這裏plunker測試： https://plnkr.co/edit/tSUJdntHoshfi38HSxzL?p=preview

Answer 2

HTML：

<br>jQuery Pan-o-matic 
<br> 
<br> 
<div class="pan-wrap pan0"></div> 
<br> 
<div class="pan-wrap pan1"></div> 
<br> 
<div class="pan-wrap pan2"></div> 

的JavaScript：

$('.pan-wrap').append('<div class="play">play</div>'); 

var hoverInterval; 

function doStuff() { 
    $(this).animate({ 
    'background-position-x': '+=5%', 
    }, 250, 'linear'); 
} 

$(function() { 
    $('.pan-wrap').hover(
    function() { 
     $(this).empty(); 
     hoverInterval = setInterval($.proxy(doStuff, this), 250); 
    }, 
    function() { 
     // stop calling doStuff 
     $(this).append('<div class="play">play</div>'); 
     clearInterval(hoverInterval); 
     $('this').animate({ 
     'background-position-x': '+=5%', 
     }, 1000, 'easeOutQuint'); 
    }); 
}); 

CSS：

body { 
    background: rgb(240, 205, 97); 
    color: #fff; 
    font-size: 30px; 
    text-align: center; 
} 

.pan0 { 
    background: url('https://i.stack.imgur.com/suKT3.jpg'); 
    background-size: cover; 
} 

.pan1 { 
    background: url('http://kthornbloom.com/public/pan.jpg'); 
} 

.pan2 { 
    background: url('http://kthornbloom.com/public/pan2.jpg'); 
} 

.pan-wrap { 
    margin: 0 auto; 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
    color: #fff; 
    font-size: 20px; 
    text-align: center; 
    font-family: sans-serif; 
    border-radius: 10px; 
    border: 5px solid rgb(209, 126, 20); 
    cursor: e-resize; 
} 

.play { 
    display: inline-block; 
    background: rgba(0, 0, 0, 0.71); 
    height: 25px; 
    width: 75px; 
    border-radius: 15px; 
    padding-top: 5px; 
    font-size: 14px; 
    top: 50%; 
    left: 50%; 
    margin-top: -15px; 
    margin-left: -34px; 
    position: absolute; 
} 

的jsfiddle：http://jsfiddle.net/nikdtu/k7thyvon/

注意：不要忘了inclue jquery.easing.1.3.js到您的網頁