H5全景视频VR视频

公司的有个专题页面涉及到全景视频展示这个技术点，找到一个相关的库。

http://www.utovr.com/sdk/download 这里有个免费的SDK可以下载。

里面也有案例可以看，代码就照着引用就可以。

播放器的使用遵循简单实用的原则，只需3步操作即可完成配置。

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

<script language="javascript" type="text/javascript" src="./player/UtoVRPlayerGuide.js"></script>

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

2，页面参数的配置:

<script language="javascript" type="text/javascript">
/*播放器参数配置*/
var params = {
container:document.body, //播放器容器Dom对象
name:"SceneViewer", //播放器名称
dragDirectionMode:true, //播放器拖动模式
width:800, //播放器的width
height:500, //播放器的height
/*fullScreenMode:true,//全屏模式 ===>如果是配置了该参数，将忽略width和height的配置，播放器将取当前窗口的尺寸作为播放器的初始尺寸*/
scenesArr:[
{sceneId:"test1k", sceneFilePath:"./panoVideo/960p.mp4", sceneType:"Video", initPan:0, initFov:100}
]
};
//sceneFilePath:为全景视频的路径配置，sceneType：场景类型配置
</script>

3，页面播放器实例化：

<script language="javascript" type="text/javascript">
/*根据页面配置参数，实例化播放器*/
window.onload = function () {
initLoad(params);
};
</script>

做的使用插件的问题：

1、在H5页面中插入全景视频，最好是引用iframe插入，不然永远都在创建一个又一个新的播放器容器，消除不了；使用iframe后可以滑到下一页重新加载iframe。

2、H5插入一个局部全景视频，点击右下角全屏放大，再点击缩回去。依然还是通过控制iframe页面的width和height以及位置实现。

转载于:https://www.cnblogs.com/juehong/p/5389835.html

H5全景视频VR视频相关推荐

3d,全景和vr视频的区别
3D视频: ·通过左右画面给予人眼重合的立体感: ·可以通过普通的摄像机拍摄,然后转换压制成适合VR头戴显示器.VR手机盒子看的视频格式: ·技术门槛最低. 全景视频: ·通过360°全景摄像机拍摄: ...
为什么VR视频的清晰度不高？
VR内容的清晰度一直以来广受关注,也是提升用户沉浸感体验的重要因素.不过,体验过VR视频的不少用户都会抱怨:我们看的明明是4K甚至是8K内容,可实际观感还不如手机1080P的画质.是我买了个假VR设备 ...
VR制作流程有哪些，新手如何制作VR视频？
VR视频是VR技术和全景拍摄技术的综合应用.VR视频能720度全方位记录场景实况,用户可以通过手机身临其境般进行线上体验,让用户能够更加全面的观赏拍摄场景.并且可以自主调整观看角度,带来更好的沉浸感和 ...
mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍
[2018-10-20 重要更新] 支持VR直播功能支持全景视频poster 支持全景图和视频和场景之间随意切换全景模式切换回默认主视角播放列表优点: 1.全景图支持全景模式和VR模式 2.支 ...
html全景直播播放器,HTML5：网页如何播放VR视频？
VR视频和普通视频有什么区别? VR即虚拟现实,VR视频又名全景视频,是指使用全景摄像机拍摄的,观看时可以自由变换视角的视频. 戴上VR眼镜,随着头部转动看到的图像也随之变化,仿佛身处一个虚拟的世界中 ...
【科普】VR视频与全景视频有什么不同？
很多人把360度全景视频和VR视频等同起来,这其实是一个概念上的误解.一张图来说明360度全景视频和VR视频的不同很多人把360度全景视频和VR视频等同起来,这其实是一个概念上的误解. 我们用一张 ...
GLSurfaceView+openGL播放VR视频/全景视频（VR解码器）
OpenGL ES/SDL渲染,FFmpeg :VR分屏之OpenGL-OpenGL ES来播放视频.MediaPlayer+GLSurfaceView+openGL (推荐 )MD360 VR- ...
什么是全景vr视频？怎么制作VR视频？
全景vr视频,顾名思义就是能够使我们看到拍摄点周围360°景致的视频.传统视频拍摄受限于镜头视角,所以我们只能看到镜头前方180°内的景物.而全景vr视频能够看到周围360°以及上下180°各个角度的 ...
全景vr视频是什么播放原理？怎么制作vr视频
近年来,vr开始进入生活,有更多的用户对vr的需求越来越大,而随着5G时代的来临,全景vr视频的形式必定也会越来越普及,体验感也会越来越真实,全景视频可以称为vr视频或360度视频,让我们的视野不再局 ...

H5全景视频VR视频

H5全景视频VR视频相关推荐

最新文章

热门文章