zoukankan      html  css  js  c++  java
  • H5全景视频VR视频

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

    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, //播放器拖动模式
    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以及位置实现。

  • 相关阅读:
    搞笑的菜名
    sad news
    转载:比尔盖茨给adobe CEO的五点意见(歪版)/ 很搞笑 ;)
    [ZZ]TDSCDMA试商用网已经建成 开始向用户放号
    关于Java IDE
    候捷要来南京了吗?
    读书笔记:《Java2 教程》(二)
    [ZZ]当今世界十大定律
    久违了,博客园
    解决小型局域网中xp系统的机器不能共享资源的问题
  • 原文地址:https://www.cnblogs.com/juehong/p/5389835.html
Copyright © 2011-2022 走看看