# VR/360°
Note
ฟีเจอร์นี้ของ ByteArk Player รองรับเฉพาะผู้ใช้ ByteArk Video Cloud for Business หากท่านต้องการใช้งานกรุณาติดต่อ sales@byteark.com
ByteArk Player รองรับการเล่นวิดีโอแบบ VR/360° ซึ่ง player จะทำการเล่นวิดีโอด้วย videojs-vr plugin (opens new window)
# รองรับการทำงานบน Browser
- Desktop
- Chrome
- Firefox
- Safari
- Mobile
- Chrome บน Android
- Safari บน iOS
# การเปิดใช้งาน VR/360° บน ByteArk Player
การเปิดใช้งาน VR/360° บน ByteArk Player สามารถทำได้โดยระบุ plugins.vr ใน options เมื่อทำการสร้าง video player โดยสามารถตั้งค่าพารามิเตอร์ต่างๆ ตามตาราง options ด้านล่าง
{
plugins: {
vr: {
// TODO: add your options here
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# การปรับตั้งค่า options
| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| forceCardboard | Boolean | No | false | บังคับแสดงปุ่ม Card Board บนทุกอุปกรณ์ |
| motionControls | Boolean | No | true on iOS and Android | เปิดใช้งาน motion/gyro บน iOS และ Android |
| projection | String | No | 'AUTO' | ตั้งค่า Projection ของวิดีโอ สามารถดูรายละเอียดเพิ่มเติมได้ที่ ตาราง ประเภทของ Projection |
| sphereDetail | Number | No | 32 | ตั้งค่าจำนวน segment ของ spherical mesh รายละเอียดเพิ่มเติม (opens new window) |
| debug | Boolean | No | false | เปิด/ปิด debug |
| omnitone | Object | No | - | Omnitone library object สำหรับใช้งาน Spatial Audio Rendering on the Web |
| omnitoneOptions | Object | No | - | Options สำหรับ Omnitone library รายละเอียดเพิ่มเติม (opens new window) |
| disableIOSNativeFullscreen | Boolean | No | true | ปิดการใช้งาน Fullscreen แบน Native บน iOS |
# ประเภทของ Projection
รายละเอียดบน videojs-vr plugin Github repository (opens new window)
| Name | Description |
|---|---|
| '180' | The video is half sphere and the user should not be able to look behind themselves |
| '180_LR' | Used for side-by-side 180 videos The video is half sphere and the user should not be able to look behind themselves |
| '180_MONO' | Used for monoscopic 180 videos The video is half sphere and the user should not be able to look behind themselves |
| '360', 'Sphere', 'equirectangular' | The video is a sphere |
| 'Cube' or '360_CUBE' | The video is a cube |
| 'NONE' | This video is not a 360 video |
| 'AUTO' | Auto |
| '360_LR' | Used for side-by-side 360 videos |
| '360_TB' | Used for top-to-bottom 360 videos |
| 'EAC' | Used for Equi-Angular Cubemap videos |
| 'EAC_LR' | Used for side-by-side Equi-Angular Cubemap videos |
# การตั้งค่าที่แนะนำ (Recommended Settings)
การตั้งค่าที่แนะนำ
- ปิดการใช้งาน Picture in Picture เนื่องจากโหมด Picture in Picture นั้นไม่รองรับการเล่นวิดีโอแบบ VR/360°
- ตั้งค่า
crossoriginเป็น'anonymous'ใน options ตอนสร้าง video player รายละเอียดเพิ่มเติม (opens new window) - ตั้งค่า video source ด้วยคำสั่ง
player.srcในonReadycallback
# ตัวอย่างซอร์สโค้ด
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="video-player"></div>
<script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
<script>
var player = bytearkPlayer('video-player', {
fluid: true,
// hide picture in picture button
disablePictureInPicture: true,
// workaround for play VR/360° video on Safari macOS/iOS
// set crossorigin for Safari macOS/iOS
crossorigin: 'anonymous',
plugins: {
vr: {
projection: '360',
motionControls: true,
sphereDetail: 128,
debug: true,
}
}
}, function() {
var player = this;
// workaround for play VR/360° video on Safari macOS/iOS
// set source after player create
player.src({
src: VIDEO_SOURCE_URL,
type: "application/x-mpegURL",
});
});
</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
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