H5全景視頻VR視頻

時間 2019-11-12

標籤 h5 全景視頻简体版

原文原文鏈接

公司的有個專題頁面涉及到全景視頻展現這個技術點，找到一個相關的庫。javascript

http://www.utovr.com/sdk/download 這裏有個免費的SDK能夠下載。html

裏面也有案例能夠看，代碼就照着引用就能夠。java

播放器的使用遵循簡單實用的原則，只需3步操做便可完成配置。ide

1，文件引用：
將獲取到的開發包文件(lib目錄下的player文件夾)放置在Web項目的目錄下，在html頁面<head>標籤內經過<script>標籤引入播放器的引導js便可。
例如：

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

注意保證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>htm

作的使用插件的問題：對象

一、在H5頁面中插入全景視頻，最好是引用iframe插入，否則永遠都在建立一個又一個新的播放器容器，消除不了；使用iframe後能夠滑到下一頁從新加載iframe。ip

二、H5插入一個局部全景視頻，點擊右下角全屏放大，再點擊縮回去。依然仍是經過控制iframe頁面的width和height以及位置實現。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。