前端使用UtoVR Player全景视频播放器实现360°C全景VR视频

2023-07-30 12:44| 来源: 网络整理| 查看: 265

准备：

官网：http://www.utovr.com Web包git下载地址：https://github.com/u10k/utovr.git

UtoVR Player介绍：

UtoVR Player是一款全景视频播放器。它支持360度空间全景视频的播放。观看者通过与播放器的交互，可以体验到身临其境的视觉效果。UtoVR Player SDK可以帮助你在自己的应用中，快速实现全景视频的播放效果。

功能：

1，支持视频格式：h264编码的mp4等视频文件； 2，支持播放普通全景视频（2：1）； 3，支持2K高清、4K超高清的全景视频播放； 4，支持点播（mp4）、直播（RTMP格式）播放全景视频； 5，支持PC端的鼠标，移动端手指的上、下、左、右的滑动，放大、缩小全景视频的操作； 6，支持移动端的陀螺仪的上、下、左、右控制全景视频的操作； 7，支持单屏/双屏（VR模式）的操作； 8，支持全屏、非全屏的操作； 9，支持视频的播放、暂停、以及时间进度条的控制；

注：免费版本的SDK不支持直播功能，并且UI画面的右上角带有"UtoVR"字样的版权信息，具体免费版本和定制版本的功能区别请参见官网。

使用： 1，文件引用：

将获取到的开发包文件(lib目录下的player文件夹)放置在Web项目的目录下，在html页面标签内通过标签引入播放器的引导js即可。例如：

注意保证src的路径配置正确。

2，建立dom播放容器： 3，页面播放器参数的配置: /*播放器参数配置*/ var params = { container: document.getElementById("pano"), //播放器容器Dom对象 name: "SceneViewer", //播放器名称 dragDirectionMode: true, //播放器拖动模式 dragMode: true, // width: 800, //播放器的width // height: 500, //播放器的height // fullScreenMode:true,//全屏模式 ===>如果是配置了该参数，将忽略width和height的配置，播放器将取当前窗口的尺寸作为播放器的初始尺寸 scenesArr: [ //todo:注意修改视频路径，需要保证播放页面与视频属于同一域名下 { sceneId: "v1", sceneName: "VR全景", sceneFilePath: id, //视频url 为全景视频的路径配置 sceneType: "Video", //场景类型配置 isVideoAutoPlay: true //todo:注意isVideoAutoPlay 是H5 模式下的播放属性，不适用于移动端 } ], //播放器不支持全景播放回调 errorCallBack: function(e) { console.log("错误状态：" + e); }, //浏览器不支持全屏回调 fsCallBack: function(status, playObj) { alert("浏览器不支持全屏！"); } }; } 4，页面播放器实例化： /*根据页面配置参数，实例化播放器*/ window.onload = function () { initLoad(params); };

注意：initLoad 可以在window.onload 或者是其他点击事件的函数处理中进行调用。这个可以根据具体的功能需求进行操作，但必须保证调用前，页面引入了UtoVRPlayerGuide.js

说明：其他配置使用代码请参考官方SDK中sample文件夹中的案例！

【本文地址】

公司简介

联系我们