愛招飛幫助手冊
目录

3D球形實景-全景視訊

# FastWeb 3D球形實景-全景視訊

  egjs-view360是全景顯示的庫，可用於展示360環繞全景影像或球形全景影像，在移動設備上支援陀螺儀顯示，可帶給使用者身臨其境的感受。本示例將引入球形環繞全景視訊示例，帶大家瞭解如何使用以及製作全景視訊。

# 1. 下載示例

  點選https://naver.github.io/egjs-view360/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js (opens new window)以下載庫js檔案，在library/js中建立目錄egjs-view360，將下載的js檔案放置於此。

# 2. 確認參數

  使用的線上示例的樣式內容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VideoJs</title>
        <link rel="stylesheet" type="text/css" href="https://naver.github.io/egjs-view360/common/css/demo.css">
        <link rel="stylesheet" type="text/css" href="https://naver.github.io/egjs-view360/common/css/PanoControls.css">
        <script src="https://naver.github.io/egjs-view360/release/latest/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/PanoControls.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/PieView.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/jquery-2.2.4.js"></script>
        <script src="https://naver.github.io/egjs-view360/common/js/screenfull.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.7.2/dist/sweetalert2.all.min.js"></script>
        <link href="https://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet" type="text/css">
        <script src="https://vjs.zencdn.net/5.4.6/video.js"></script>
        <style>
            .icon {
                width: 275px;
                height: 60px;
            }
            .icon .videojs {
                position: absolute;
                width: 80px;
                height: 60px;
            }
            .icon .videojs .left, .icon .videojs .right {
                position: absolute;
                width: 50px;
                height: 60px;
            }
            .icon .videojs .left {
                left: 0;
            }
            .icon .videojs .left:before, .icon .videojs .left:after, .icon .videojs .right:before, .icon .videojs .right:after {
                position: absolute;
                content: "";
                left: 0;
                width: 100%;
                height: 50%;
                border: 5px solid #73777E;
                box-sizing: border-box;
            }
            .icon .videojs .left:before, .icon .videojs .left:after {
                background: #ECEEF1;
                border-left-width: 7px;
                border-right-width: 4px;
                /* transform-origin: 0% 50%; */
            }
            .icon .videojs .left:before {
                transform: skew(-40deg);
                border-bottom: 0;
            }
            .icon .videojs .left:after {
                top: 50%;
                transform: skew(40deg);
                border-top: 0;
            }
            .icon .videojs .right {
                right: 0%;
                width: 55px;
            }
            .icon .videojs .right:before, .icon .videojs .right:after {
                background: #C9CCD1;
                border-right-width: 7px;
                border-left-width: 20px;
                transform-origin: 100% 50%;
            }
            .icon .videojs .right:before {
                transform: skew(40deg);
                border-bottom: 0;
            }
            .icon .videojs .right:after {
                top: 50%;
                transform: skew(-40deg);
                border-top: 0;
            }
            .icon .view360 {
                position: absolute;
                font-family: 'Zilla Slab', serif;
                right: 0px;
                font-size: 40px;
                top: 50%;
                transform: translateY(-50%);
            }
            .viewer video {
                width: 100%;
            }
            .viewer #video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .viewer video {
                /* z-index: -1; */
            }
        </style>
	</head>
	<body>
        </div>
        <div class="viewer">
            <video id="video" class="video-js  vjs-fluid vjs-default-skin vjs-big-play-centered vjs-controls-enabled" crossorigin="anonymous" playsinline="playsinline" controls="" loop="">
                <!-- mp4視訊源地址引入-->
                <source src="https://naver.github.io/egjs-view360/examples/panoviewer/etc/img/seven.mp4" type="video/mp4">  
                <!--webm視訊源地址引入-->
                <source src="https://naver.github.io/egjs-view360/examples/panoviewer/etc/img/seven.webm" type="video/webm"> 
                <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">supports HTML5 video</a>
                </p>
            </video>
        </div>
        <script>
            var video = document.querySelector(".viewer video");
            
            videojs("video").ready(function () {
                var videoContainer = document.querySelector("#video");
                var view360Container = document.createElement('div');
            
                view360Container.className = "container";
                videoContainer.insertBefore(view360Container, videoContainer.firstChild);
                // video.style.display = "none";
            
                var panoViewer = new eg.view360.PanoViewer(view360Container,
                    {
                        video: video,  
                        projectionType: "equirectangular", /* 全景型別*/
                        useZoom: false, /* 是否啟用縮放*/
                        yawRange: [-180, 180], /* horizontal FOV by degree is 360. */
                        pitchRange: [-90, 90], /* vertical FOV by degree is 70. */
                        fovRange: [30, 70] /* max fov should vertical FOV of the image. 70 */
                    }
                );
                window.panoViewer;
                window.addEventListener("resize", function() {
                    panoViewer.updateViewportDimensions();
                });
            
                PanoControls.init(document.querySelector("#video"), panoViewer);
                PanoControls.showLoading();
            });
        </script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

  從上述的內容中可以解析出幾個可以進行參數替換的位置，其中mp4與webm視訊的地址可使用param_mp4與param_webm來代替。projectionType處的設定可使用param_type來代替，useZoom部分可使用param_useZoom來代替。yawRange部分可使用param_yawRange代替，pitchRange部分可使用param_pitchRange來代替，fovRange部分可使用param_fovRange來代替。

# 3. 修改模板

# 3.1. 本地化處理

  可以看到上述的html文件中引入了外部鏈接庫檔案，上述檔案已經在FastWeb的示例庫中引用，如需要自行建立，請將整理的以下鏈接指向的檔案下載下來並按照指示放入指定目錄中。

以下檔案請放入library/js/egjs-view360/common/css/目錄
https://naver.github.io/egjs-view360/common/css/demo.css
https://naver.github.io/egjs-view360/common/css/PanoControls.css
https://vjs.zencdn.net/5.4.6/video-js.css

以下檔案請放入library/js/egjs-view360/common/js/目錄
https://naver.github.io/egjs-view360/common/js/PanoControls.js
https://naver.github.io/egjs-view360/common/js/PieView.js
https://naver.github.io/egjs-view360/common/js/jquery-2.2.4.js
https://naver.github.io/egjs-view360/common/js/screenfull.min.js
https://cdn.jsdelivr.net/npm/sweetalert2@9.7.2/dist/sweetalert2.all.min.js
https://vjs.zencdn.net/5.4.6/video.js

以下檔案下載下來后請將檔案放入library/js/egjs-view360/examples/img/目錄
https://naver.github.io/egjs-view360/examples/panoviewer/etc/img/seven.mp4
https://naver.github.io/egjs-view360/examples/panoviewer/etc/img/seven.webm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  部分庫檔案需依賴圖示檔案，從以下地址下載圖示檔案並將其放入指定目錄中。

以下檔案請放入library/js/egjs-view360/common/img/目錄
https://naver.github.io/egjs-view360/common/img/sp_component.png
https://naver.github.io/egjs-view360/common/img/common_loading_mo_white.gif
1
2
3

  將html文件中對應的鏈接修改爲本地的相對鏈接，修改後的示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VideoJs</title>
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/demo.css">
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/PanoControls.css">
        <script src="library/js/egjs-view360/view360.panoviewer.pkgd.min.js"></script>
        <script src="library/js/egjs-view360/common/js/PanoControls.js"></script>
        <script src="library/js/egjs-view360/common/js/PieView.js"></script>
        <script src="library/js/egjs-view360/common/js/jquery-2.2.4.js"></script>
        <script src="library/js/egjs-view360/common/js/screenfull.min.js"></script>
        <script src="library/js/egjs-view360/common/js/sweetalert2.all.min.js"></script>
        <link href="library/js/egjs-view360/common/css/video-js.css" rel="stylesheet" type="text/css">
        <script src="library/js/egjs-view360/common/js/video.js"></script>
        <style>
            .icon {
                width: 275px;
                height: 60px;
            }
            .icon .videojs {
                position: absolute;
                width: 80px;
                height: 60px;
            }
            .icon .videojs .left, .icon .videojs .right {
                position: absolute;
                width: 50px;
                height: 60px;
            }
            .icon .videojs .left {
                left: 0;
            }
            .icon .videojs .left:before, .icon .videojs .left:after, .icon .videojs .right:before, .icon .videojs .right:after {
                position: absolute;
                content: "";
                left: 0;
                width: 100%;
                height: 50%;
                border: 5px solid #73777E;
                box-sizing: border-box;
            }
            .icon .videojs .left:before, .icon .videojs .left:after {
                background: #ECEEF1;
                border-left-width: 7px;
                border-right-width: 4px;
            }
            .icon .videojs .left:before {
                transform: skew(-40deg);
                border-bottom: 0;
            }
            .icon .videojs .left:after {
                top: 50%;
                transform: skew(40deg);
                border-top: 0;
            }
            .icon .videojs .right {
                right: 0%;
                width: 55px;
            }
            .icon .videojs .right:before, .icon .videojs .right:after {
                background: #C9CCD1;
                border-right-width: 7px;
                border-left-width: 20px;
                transform-origin: 100% 50%;
            }
            .icon .videojs .right:before {
                transform: skew(40deg);
                border-bottom: 0;
            }
            .icon .videojs .right:after {
                top: 50%;
                transform: skew(-40deg);
                border-top: 0;
            }
            .icon .view360 {
                position: absolute;
                font-family: 'Zilla Slab', serif;
                right: 0px;
                font-size: 40px;
                top: 50%;
                transform: translateY(-50%);
            }
            .viewer video {
                width: 100%;
            }
            .viewer #video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
  </head>
  <body>
        <div class="viewer">
            <video id="video" class="video-js  vjs-fluid vjs-default-skin vjs-big-play-centered vjs-controls-enabled" crossorigin="anonymous" playsinline="playsinline" controls="" loop="">
                <source src="library/js/egjs-view360/examples/img/seven.mp4" type="video/mp4">
                <source src="library/js/egjs-view360/examples/img/seven.webm" type="video/webm">
                <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">supports HTML5 video</a>
                </p>
            </video>
        </div>
        <script>
            var video = document.querySelector(".viewer video");
                videojs("video").ready(function () {
                var videoContainer = document.querySelector("#video");
                var view360Container = document.createElement('div');
                view360Container.className = "container";
                videoContainer.insertBefore(view360Container, videoContainer.firstChild);
                  /* video.style.display = "none"; */
                var panoViewer = new eg.view360.PanoViewer(view360Container,
                    {
                        video: video,
                        projectionType: "equirectangular",
                        useZoom: false,
                        yawRange: [-180, 180], /* horizontal FOV by degree is 360. */
                        pitchRange: [-90, 90], /* vertical FOV by degree is 70. */
                        fovRange: [30, 70] /* max fov should vertical FOV of the image. 70 */
                    }
                );
                window.panoViewer;
                window.addEventListener("resize", function() {
                    panoViewer.updateViewportDimensions();
                });
            
                PanoControls.init(document.querySelector("#video"), panoViewer);
                PanoControls.showLoading();                              
            });
        </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

# 3.2. 標記參數

  將上述的參數取值分別用參數名稱來代替，替換后的內容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VideoJs</title>
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/demo.css">
        <link rel="stylesheet" type="text/css" href="library/js/egjs-view360/common/css/PanoControls.css">
        <script src="library/js/egjs-view360/view360.panoviewer.pkgd.min.js"></script>
        <script src="library/js/egjs-view360/common/js/PanoControls.js"></script>
        <script src="library/js/egjs-view360/common/js/PieView.js"></script>
        <script src="library/js/egjs-view360/common/js/jquery-2.2.4.js"></script>
        <script src="library/js/egjs-view360/common/js/screenfull.min.js"></script>
        <script src="library/js/egjs-view360/common/js/sweetalert2.all.min.js"></script>
        <link href="library/js/egjs-view360/common/css/video-js.css" rel="stylesheet" type="text/css">
        <script src="library/js/egjs-view360/common/js/video.js"></script>
        <style>
            .icon {
                width: 275px;
                height: 60px;
            }
            .icon .videojs {
                position: absolute;
                width: 80px;
                height: 60px;
            }
            .icon .videojs .left, .icon .videojs .right {
                position: absolute;
                width: 50px;
                height: 60px;
            }
            .icon .videojs .left {
                left: 0;
            }
            .icon .videojs .left:before, .icon .videojs .left:after, .icon .videojs .right:before, .icon .videojs .right:after {
                position: absolute;
                content: "";
                left: 0;
                width: 100%;
                height: 50%;
                border: 5px solid #73777E;
                box-sizing: border-box;
            }
            .icon .videojs .left:before, .icon .videojs .left:after {
                background: #ECEEF1;
                border-left-width: 7px;
                border-right-width: 4px;
            }
            .icon .videojs .left:before {
                transform: skew(-40deg);
                border-bottom: 0;
            }
            .icon .videojs .left:after {
                top: 50%;
                transform: skew(40deg);
                border-top: 0;
            }
            .icon .videojs .right {
                right: 0%;
                width: 55px;
            }
            .icon .videojs .right:before, .icon .videojs .right:after {
                background: #C9CCD1;
                border-right-width: 7px;
                border-left-width: 20px;
                transform-origin: 100% 50%;
            }
            .icon .videojs .right:before {
                transform: skew(40deg);
                border-bottom: 0;
            }
            .icon .videojs .right:after {
                top: 50%;
                transform: skew(-40deg);
                border-top: 0;
            }
            .icon .view360 {
                position: absolute;
                font-family: 'Zilla Slab', serif;
                right: 0px;
                font-size: 40px;
                top: 50%;
                transform: translateY(-50%);
            }
            .viewer video {
                width: 100%;
            }
            .viewer #video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
  </head>
  <body>
        <div class="viewer">
            <video id="video" class="video-js  vjs-fluid vjs-default-skin vjs-big-play-centered vjs-controls-enabled" crossorigin="anonymous" playsinline="playsinline" controls="" loop="">
                <source src="param_mp4" type="video/mp4">
                <source src="param_webm" type="video/webm">
                <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">supports HTML5 video</a>
                </p>
            </video>
        </div>
        <script>
            var video = document.querySelector(".viewer video");
                videojs("video").ready(function () {
                var videoContainer = document.querySelector("#video");
                var view360Container = document.createElement('div');
                view360Container.className = "container";
                videoContainer.insertBefore(view360Container, videoContainer.firstChild);
                  /* video.style.display = "none"; */
                var panoViewer = new eg.view360.PanoViewer(view360Container,
                    {
                        video: video,
                        projectionType: "param_type",
                        useZoom: param_useZoom,
                        yawRange: param_yawRange, /* horizontal FOV by degree is 360. */
                        pitchRange: param_pitchRange, /* vertical FOV by degree is 70. */
                        fovRange: param_fovRange /* max fov should vertical FOV of the image. 70 */
                    }
                );
                window.panoViewer;
                window.addEventListener("resize", function() {
                    panoViewer.updateViewportDimensions();
                });
            
                PanoControls.init(document.querySelector("#video"), panoViewer);
                PanoControls.showLoading();                              
            });
        </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

  至此，模板內容已設定完成，可進入JQueryFrame元件管理界面，將上述內容填寫入模板中。此庫由於引用了較多的外部的css與js檔案，為保證其不被FastWeb框架影響，建議使用URLFrame容器引入。

# 3.3. 設定參數

  在參數界面中，設定上述參數，分別為其設定預設值：

# 3.4. 與資料庫欄位聯動

  可以設定數據來源於資料庫欄位，此示例可留空不設定。

# 4. 設定檔案

  全景視訊建議使用全景相機來進行拍攝。在拍攝全景視訊時注意拍攝模式要設定為球狀全景模式。球狀全景視訊導出后請調整視訊解析度至合適大小以適應網路傳輸。

3D球形實景-熱點追蹤
3D球形全景-汽車內飾

← 3D球形全景-汽車內飾→

Copyright © 2021-2024 愛招飛IsoFace | ALL Rights Reserved