HTMLで360度の画像を認識して表示する

Question

私はthisのような360度の画像をウェブサイトに埋め込んでいます。私は見てきましたが、プラグインまたは（おそらく）HTML5メソッドをパノラマとして組み込み、再生するために使用されているものが見つかりませんでした。

「標準」jpgとは対照的に、これらのjpgイメージを検出し、360ビューとして表示する方法はありますか？ダウンロードボタンをクリックしてソースイメージを見ると、ファイルタイプがどのように普通のjpgであるのかを知ることができます。

私はこれらを認識し、非360のイメージに同じことをやっていないしながら、「プレーヤー」をプレイすることができるようにしたいと思います。

おかげ

Answer 1

あなたは、Googleのホスト型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に忘れてはいけません