Pannellum Vidéo 360 sur site WordPress

Vidéo 360

YouTube supporte également les vidéos 360.
Pannellum Video Demo
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pannellum Video Demo</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.5/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.5/pannellum.js"></script>

    <link href="https://vjs.zencdn.net/7.1.0/video-js.css" rel="stylesheet"
      type="text/css">
    <script src="https://vjs.zencdn.net/7.1.0/video.js"></script>
<!--     <script src="/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:600px;"
  poster="https://dev.westindiespixels.fr/wp-content/uploads/2023/08/video_preview-scaled.jpg" crossorigin="anonymous">
    <source src="https://dev.westindiespixels.fr/wp-content/uploads/2023/08/20230802_170143_164-Trim.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" rel="noopener">supports HTML5 video</a>
    </p>
</video>

<script>
    /*
 * Video.js plugin for Pannellum
 * Copyright (c) 2015-2018 Matthew Petroff
 * MIT License
 */

(function(document, videojs, pannellum) {
'use strict';

var registerPlugin = videojs.registerPlugin || videojs.plugin;  // Use registerPlugin for Video.js >= 6
registerPlugin('pannellum', function(config) {
    // Create Pannellum instance
    var player = this;
    var container = player.el();
    var vid = container.getElementsByTagName('video')[0],
        pnlmContainer = document.createElement('div');
    pnlmContainer.style.zIndex = '0';
    config = config || {};
    config.type = 'equirectangular';
    config.dynamic = true;
    config.showZoomCtrl = true;
    config.showFullscreenCtrl = true;
    config.autoLoad = true;
    config.panorama = vid;
    pnlmContainer.style.visibility = 'hidden';
    player.pnlmViewer = pannellum.viewer(pnlmContainer, config);
    container.insertBefore(pnlmContainer, container.firstChild);
    vid.style.display = 'none';

    // Handle update settings
    player.on('play', function() {
        if (vid.readyState > 1)
            player.pnlmViewer.setUpdate(true);
    });
    player.on('canplay', function() {
        if (!player.paused())
            player.pnlmViewer.setUpdate(true);
    });
    player.on('pause', function() {
        player.pnlmViewer.setUpdate(false);
    });
    player.on('loadeddata', function() {
        pnlmContainer.style.visibility = 'visible';
    });
    player.on('seeking', function() {
        if (player.paused())
            player.pnlmViewer.setUpdate(true);
    });
    player.on('seeked', function() {
        if (player.paused())
            player.pnlmViewer.setUpdate(false);
    });
});

})(document, videojs, pannellum);
videojs('panorama', {
    plugins: {
        pannellum: {}
    }
});
</script>

</body>
</html>
Sorting by

Vidéo 360

Leave a Reply Cancel reply
