当今，VR应用方兴未艾，最近接到客户的一个小需求，要求可以在产品宣传页实现移动端VR video播放，既有360度全景，又有VR视频播放，视频播放根据用户手机翻转，播放不同方向的内容。
为实现该需求，多方查证，发现Mozilla开发的A-Frame可以一用，功能很强大。
现将该应用的全部代码共享出来，请大家指正：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brand USA - 360</title>
<style>
#btnPlay, #loadingIcon {
position: fixed;
top: calc(50% - 1em);
left: calc(50% - 2em);
width: 4em;
height: 4em;
z-index: 11;
}
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no">
<script src="https://api.html5media.info/1.1.8/html5media.min.js"></script>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/aframe-master.min.js"></script>
</head>
<body style="background-image:url(F2.png);background-size:100% 100%;background-repeat:no-repeat;">
<a-scene>
<a-assets>
@{
System.Text.RegularExpressions.Regex regMacOriOS = new System.Text.RegularExpressions.Regex("iPad|iPhone|iPod|Mac");
}
@if ( regMacOriOS.IsMatch(Request.ServerVariables["HTTP_USER_AGENT"]) ) {
<video id="video" src="/UploadFiles/VRBrandUSA3.mp4" width="100%" height="200" style="object-fit:fill" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto" autobuffer loop autoplay>
<source src="/UploadFiles/VRBrandUSA3.mp4" type="video/mp4" />
</video>
}
else {
<video id="video" src="/Video3d/VRVideo.mp4" preload="auto" crossorigin="anonymous" style="object-fit: fill" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" autobuffer loop autoplay>
<source src="/Video3d/VRVideo.mp4" type="video/mp4" />
</video>
}
</a-assets>
<a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
<a-sky src="F2.png" transparent="false"></a-sky>
</a-scene>
<img src="~/Content/images/play-button.png" id="btnPlay" style="display:none;" />
<img src="~/Content/images/loading.gif" id="loadingIcon" />
<script type="text/javascript">
var vrVideoPlayer = vrVideoPlayer || {};
(function (o) {
o.playVRVideo = function () {
var videoBox = $("#video")[0];
videoBox.play();
document.querySelector("a-sky").setAttribute("material", "opacity", 0);
$("#btnPlay").hide();
};
o.IsIOS10OrPlus = function () {
return (AFRAME.utils.device.isIOS() && !AFRAME.utils.device.isIOSOlderThan10());
};
o.checkFileLoadingProgress = function (callback) {
var maxTimeout = 5 * 1000; //Waiting 5 seconds
var ticks = 0;
var checkTimer = setInterval(function () {
if ($("#video")[0].readyState > 1) {
clearInterval(checkTimer);
//execute specified callback
callback();
}
if (ticks * 1000 > maxTimeout) {
clearInterval(checkTimer);
callback();
}
ticks++;
}, 1000);
};
})(vrVideoPlayer);
$(function () {
$("#btnPlay").click(function () {
$(this).hide();
vrVideoPlayer.playVRVideo();
});
vrVideoPlayer.checkFileLoadingProgress(function () {
$("#btnPlay").show();
$("#loadingIcon").hide();
document.querySelector("a-scene").addEventListener('enter-vr', function () {
vrVideoPlayer.playVRVideo();
});
document.querySelector("a-scene").addEventListener('loaded', function () {
$("#loadingIcon").hide();
});
});
var devWidth, devHeight;
devWidth = screen.width;
devHeight = screen.height;
$(window).on("orientationchange", function (event) {
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;
//$("<p>iw=" + iw + ";ih=" + ih + ";" + (event.orientation || "undefined") + ";window.orientation=" + window.orientation+"</p>").insertBefore("a-scene");
var ticks = 0;
//$("body").css("background-image","url()");
var orientationTimer = setInterval(function () {
if (window.orientation == 180 || window.orientation == 0) {
$("canvas").css({ "width": Math.min(devWidth, devHeight) + "px", "height": Math.max(devWidth, devHeight) + "px", "z-index": "10" });
$("a-scene").css({ "width": Math.min(devWidth, devHeight) + "px" });
clearInterval(orientationTimer);
}
if (window.orientation == 90 || window.orientation == -90) {
$("canvas").css({ "width": Math.max(devWidth, devHeight) + "px", "height": Math.min(devWidth, devHeight) + "px", "z-index": "10" });
$("a-scene").css({ "width": Math.max(devWidth, devHeight) + "px" });
clearInterval(orientationTimer);
}
if (ticks > 10) {
clearInterval(orientationTimer);
}
ticks++;
}, 300);
});
});
// Fix js 'console' compatibility
var console = window.console || {};
(function (o) {
var funcs = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml',
'error', 'exception', 'group', 'groupCollapsed', 'groupEnd',
'info', 'log', 'markTimeline', 'profile', 'profileEnd',
'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
for (var i = 0, l = funcs.length; i < l; i++) {
var func = funcs[i];
o[func] = o[func] || function () { };
}
o.memory = o.memory || {};
})(console);
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-xxxx', 'auto');
ga('send', 'pageview');
ga('send', {
hitType: 'event',
eventCategory: 'Videos',
eventAction: 'play',
eventLabel: 'VR Video'
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
