H5全景视频VR视频
公司的有個專題頁面涉及到全景視頻展示這個技術(shù)點，找到一個相關(guān)的庫。
http://www.utovr.com/sdk/download ?這里有個免費的SDK可以下載。
里面也有案例可以看，代碼就照著引用就可以。
?
播放器的使用遵循簡單實用的原則，只需3步操作即可完成配置。
1，文件引用：
將獲取到的開發(fā)包文件(lib目錄下的player文件夾)放置在Web項目的目錄下，在html頁面<head>標簽內(nèi)通過<script>標簽引入播放器的引導js即可。
例如：
<!--引入引導js 動態(tài)下載播放器-->
<script language="javascript" type="text/javascript" src="./player/UtoVRPlayerGuide.js"></script>
注意保證src的路徑配置正確。
2，頁面參數(shù)的配置:
<script language="javascript" type="text/javascript">
/*播放器參數(shù)配置*/
var params = {
container:document.body, //播放器容器Dom對象
name:"SceneViewer", //播放器名稱
dragDirectionMode:true, //播放器拖動模式
width:800, //播放器的width
height:500, //播放器的height
/*fullScreenMode:true,//全屏模式 ===>如果是配置了該參數(shù)，將忽略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">
/*根據(jù)頁面配置參數(shù)，實例化播放器*/
window.onload = function () {
initLoad(params);
};
</script>
做的使用插件的問題：
1、在H5頁面中插入全景視頻，最好是引用iframe插入，不然永遠都在創(chuàng)建一個又一個新的播放器容器，消除不了；使用iframe后可以滑到下一頁重新加載iframe。
2、H5插入一個局部全景視頻，點擊右下角全屏放大，再點擊縮回去。依然還是通過控制iframe頁面的width和height以及位置實現(xiàn)。
?
轉(zhuǎn)載于:https://www.cnblogs.com/juehong/p/5389835.html
總結(jié)
以上是生活随笔為你收集整理的H5全景视频VR视频的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webpack 生产环境打包后 浏览器自
- 下一篇： BUUCTF Misc 穿越时空的思念