基于A-Frame 框架实现的移动端VR视频播放（可感知手机重力感应）

来源：互联网发布：天地诸神光翼进阶数据编辑：程序博客网时间：2024/05/16 08:43

当今，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 secondsvar ticks = 0;var checkTimer = setInterval(function () {if ($("#video")[0].readyState > 1) {clearInterval(checkTimer);//execute specified callbackcallback();}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' compatibilityvar 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>

阅读全文

0 0