准备:

官网: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页面标签内通过

注意保证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文件夹中的案例!