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

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

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

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

1,文件引用:
将获取到的开发包文件(lib目录下的player文件夹)放置在Web项目的目录下,在html页面<head>标签内通过<script>标签引入播放器的引导js即可。
例如:
<!--引入引导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以及位置实现。

H5全景视频VR视频的更多相关文章

  1. VR视频外包公司(长年承接虚拟全景外包、虚拟现实视频外包)

    承接VR视频外包(虚拟全景外包),虚拟现实视频外包(北京公司) 我们制作各类型VR全景虚拟现实,增强现实视频制作.录制等项目! 品质保证,售后完备. 我们团队成立于2011年10月,是一个专业从事严肃 ...

  2. VR视频原理

    VR视频,这里指的是沉浸式全景视频,基本场景是观影者戴上显示头盔(如cardboard),在其中通过头部的转动可以看到全景视频的每个方向的图像.同时也能听到来自各个方向的声音,声音也会随着头部的转动而 ...

  3. Jaunt登陆索尼PSVR,为其提供大量VR视频

    索尼PS VR自从推出就广受用户青睐,当然不仅仅是其低于高端VR头显的价格,还在于PS VR提供的丰富游戏内容.近日,国外视频网站Jaunt还专门为PSVR推出了专版APP,为其提供超过 150 个沉 ...

  4. 优分享VR开源啦,优分享VR是基于Google VR开发的一款手机VR视频资源的聚合软件

    欢迎来到优分享VR开源项目 优分享VR 开源中国Git地址: http://git.oschina.net/xumingwang/youkes_vr 优分享VR是 优分享安卓APP VR视频播放开源部 ...

  5. 一张图看懂360°全景和VR的区别

    2016年开始,Facebook.谷歌.腾讯.阿里等互联网巨头都已开始抢食VR(虚拟现实)这块的大蛋糕,虚拟现实发展速度惊人.在这样强势发展的背景下,一些产品也开始打着VR的幌子,挂着VR的噱头卖起来 ...

  6. 使用you-get下载视频网站视频或其他

    使用you-get下载视频网站视频或其他 文/玄魂 目录 使用you-get下载视频网站视频或其他 前言 1.1 下载.安装 依赖 exe安装 pip安装 Antigen安装 Git 克隆源码 Hom ...

  7. 瑞蓝RL-NDVM-A16网络视频解码器 视频上墙解决方案专家--数字视频解码矩阵

    瑞蓝网络数字视频解码矩阵(简称RL-NDVM)是依据第三代开放式网络视频监控系统的实际需求,专为视频上墙显示而研制的一款新型数字解码上墙设备.RL-NDVM解码矩阵是集解码器和HDMI/DVI/VGA ...

  8. VR全景加盟、720全景、VR全景技术平台-全国招商模式疯狂开始

    VR全景:互联网与实体店的完美结合  VR元年已过,VR项目.VR创业潮转为理性,VR行业分为两个方向:硬件和内容.硬件又分为VR头显和辅助设备,内容又分为VR全景和VR虚拟内容,如游戏.娱乐.根据行 ...

  9. UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合

    本篇作为技术分享系列的第三篇,详细讲一下手绘视频中结合视频的处理方式. 随着近几年短视频和直播行业的兴起,视频成为了人们表达情绪和交流的一种重要方式,人们对于视频的创作.编辑和分享有了更多的需求.而视 ...

随机推荐

  1. Team Queue

    Team Queue Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 2471   Accepted: 926 Descrip ...

  2. 根据url获取网页内容

    PrintWriter out = null; out = response.getWriter(); try{ URL getUrl = new URL("http://www.kuaid ...

  3. java中的静态方法

    静态方法是属于类的,内存必须为它分配内存空间,这个空间一直由静态方法占用,内存管理器不会由于静态方法没有被调用而将静态方法的存储空间收回,这样如果将所有的方法都声明为静态方法,就会占用大量的内存空间, ...

  4. 关于win7系统中所有exe文件都被以word方式打开的解决方法

    手残一刻,电脑桌面所有的软件快捷方式都变成了word的打开方式,鼠标右键选中某exe文件也没打开方式那个选项, 第一次尝试: 在控制面板——默认程序中修改默认打开方式,但是没有找到解决方法

  5. CSS-Sprite-Generator丨CSS雪碧在线生成器

    http://cn.spritegen.website-performance.org/ Css Sprite Tools实现背景图片整合 http://www.onlinedown.net/soft ...

  6. [未完成][Mooc]关于IO总结

    整个课程的大纲:1.编码问题.2.File类的使用3.RandomAccessFile的使用4.字节流的使用.5.字符流的使用.6.对象的序列化和反序列化. 视频1:文件的编码Eclipse的一大特点 ...

  7. 【转】测试用例设计——WEB通用测试用例

    现在项目做完了,我觉得还是有必要总结一下,学习到的内容.毕竟有总结才能有提高嘛!总结一下通用的东西,不管什么项目基本都可能会遇到,有写地方也有重复的或者有的是按照个人的习惯来总结的不一定都对,有不对的 ...

  8. 使用C#动态生成Word文档/Excel文档的程序测试通过后,部署到IIS服务器上,不能正常使用的问题解决方案

    使用C#动态生成Word文档/Excel文档的程序功能调试.测试通过后,部署到服务器上,不能正常使用的问题解决方案: 原因: 可能asp.net程序或iis访问excel组件时权限不够(Ps:Syst ...

  9. Redis 命令 - Sets

    SADD key member [member ...] Add one or more members to a set 127.0.0.1:6379> SADD foo hello (int ...

  10. OpenMP多线程linux下的使用,简单化

    http://hi.baidu.com/diwulechao/item/bc6d865c411b813c32e0a932 http://www.cnblogs.com/yangyangcv/archi ...