vrview.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. /*!
  2. * MediaElement.js
  3. * http://www.mediaelementjs.com/
  4. *
  5. * Wrapper that mimics native HTML5 MediaElement (audio and video)
  6. * using a variety of technologies (pure JavaScript, Flash, iframe)
  7. *
  8. * Copyright 2010-2017, John Dyer (http://j.hn/)
  9. * License: MIT
  10. *
  11. */(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
  12. 'use strict';
  13. var VrAPI = {
  14. isMediaStarted: false,
  15. isMediaLoaded: false,
  16. creationQueue: [],
  17. prepareSettings: function prepareSettings(settings) {
  18. if (VrAPI.isLoaded) {
  19. VrAPI.createInstance(settings);
  20. } else {
  21. VrAPI.loadScript(settings);
  22. VrAPI.creationQueue.push(settings);
  23. }
  24. },
  25. loadScript: function loadScript(settings) {
  26. if (!VrAPI.isMediaStarted) {
  27. if (typeof VRView !== 'undefined') {
  28. VrAPI.createInstance(settings);
  29. } else {
  30. var script = document.createElement('script'),
  31. firstScriptTag = document.getElementsByTagName('script')[0];
  32. var done = false;
  33. settings.options.path = typeof settings.options.path === 'string' ? settings.options.path : 'https://googlevr.github.io/vrview/build/vrview.min.js';
  34. script.src = settings.options.path;
  35. script.onload = script.onreadystatechange = function () {
  36. if (!done && (!this.readyState || this.readyState === undefined || this.readyState === 'loaded' || this.readyState === 'complete')) {
  37. done = true;
  38. VrAPI.mediaReady();
  39. script.onload = script.onreadystatechange = null;
  40. }
  41. };
  42. firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
  43. }
  44. VrAPI.isMediaStarted = true;
  45. }
  46. },
  47. mediaReady: function mediaReady() {
  48. VrAPI.isLoaded = true;
  49. VrAPI.isMediaLoaded = true;
  50. while (VrAPI.creationQueue.length > 0) {
  51. var settings = VrAPI.creationQueue.pop();
  52. VrAPI.createInstance(settings);
  53. }
  54. },
  55. createInstance: function createInstance(settings) {
  56. var player = new VRView.Player('#' + settings.id, settings.options);
  57. window['__ready__' + settings.id](player);
  58. }
  59. };
  60. var VrRenderer = {
  61. name: 'vrview',
  62. options: {
  63. prefix: 'vrview'
  64. },
  65. canPlayType: function canPlayType(type) {
  66. return ~['video/mp4', 'application/x-mpegurl', 'vnd.apple.mpegurl', 'application/dash+xml'].indexOf(type.toLowerCase());
  67. },
  68. create: function create(mediaElement, options, mediaFiles) {
  69. var stack = [],
  70. vr = {},
  71. readyState = 4;
  72. var vrPlayer = null,
  73. paused = true,
  74. volume = 1,
  75. oldVolume = volume,
  76. bufferedTime = 0,
  77. ended = false,
  78. duration = 0,
  79. url = '';
  80. vr.options = options;
  81. vr.id = mediaElement.id + '_' + options.prefix;
  82. vr.mediaElement = mediaElement;
  83. var props = mejs.html5media.properties,
  84. assignGettersSetters = function assignGettersSetters(propName) {
  85. var capName = propName.substring(0, 1).toUpperCase() + propName.substring(1);
  86. vr['get' + capName] = function () {
  87. if (vrPlayer !== null) {
  88. var value = null;
  89. switch (propName) {
  90. case 'currentTime':
  91. return vrPlayer.getCurrentTime();
  92. case 'duration':
  93. return vrPlayer.getDuration();
  94. case 'volume':
  95. volume = vrPlayer.getVolume();
  96. return volume;
  97. case 'muted':
  98. return volume === 0;
  99. case 'paused':
  100. paused = vrPlayer.isPaused;
  101. return paused;
  102. case 'ended':
  103. return ended;
  104. case 'src':
  105. return url;
  106. case 'buffered':
  107. return {
  108. start: function start() {
  109. return 0;
  110. },
  111. end: function end() {
  112. return bufferedTime * duration;
  113. },
  114. length: 1
  115. };
  116. case 'readyState':
  117. return readyState;
  118. }
  119. return value;
  120. } else {
  121. return null;
  122. }
  123. };
  124. vr['set' + capName] = function (value) {
  125. if (vrPlayer !== null) {
  126. switch (propName) {
  127. case 'src':
  128. var _url = typeof value === 'string' ? value : value[0].src;
  129. vrPlayer.setContentInfo({ video: _url });
  130. break;
  131. case 'currentTime':
  132. vrPlayer.setCurrentTime(value);
  133. setTimeout(function () {
  134. var event = mejs.Utils.createEvent('timeupdate', vr);
  135. mediaElement.dispatchEvent(event);
  136. }, 50);
  137. break;
  138. case 'volume':
  139. vrPlayer.setVolume(value);
  140. setTimeout(function () {
  141. var event = mejs.Utils.createEvent('volumechange', vr);
  142. mediaElement.dispatchEvent(event);
  143. }, 50);
  144. break;
  145. case 'muted':
  146. volume = value ? 0 : oldVolume;
  147. vrPlayer.setVolume(volume);
  148. setTimeout(function () {
  149. var event = mejs.Utils.createEvent('volumechange', vr);
  150. mediaElement.dispatchEvent(event);
  151. }, 50);
  152. break;
  153. case 'readyState':
  154. var event = mejs.Utils.createEvent('canplay', vr);
  155. mediaElement.dispatchEvent(event);
  156. break;
  157. default:
  158. console.log('VRView ' + vr.id, propName, 'UNSUPPORTED property');
  159. break;
  160. }
  161. } else {
  162. stack.push({ type: 'set', propName: propName, value: value });
  163. }
  164. };
  165. };
  166. for (var i = 0, il = props.length; i < il; i++) {
  167. assignGettersSetters(props[i]);
  168. }
  169. var methods = mejs.html5media.methods,
  170. assignMethods = function assignMethods(methodName) {
  171. vr[methodName] = function () {
  172. if (vrPlayer !== null) {
  173. switch (methodName) {
  174. case 'play':
  175. return vrPlayer.play();
  176. case 'pause':
  177. return vrPlayer.pause();
  178. case 'load':
  179. return null;
  180. }
  181. } else {
  182. stack.push({ type: 'call', methodName: methodName });
  183. }
  184. };
  185. };
  186. for (var _i = 0, _il = methods.length; _i < _il; _i++) {
  187. assignMethods(methods[_i]);
  188. }
  189. var vrContainer = document.createElement('div');
  190. vrContainer.setAttribute('id', vr.id);
  191. vrContainer.style.width = '100%';
  192. vrContainer.style.height = '100%';
  193. window['__ready__' + vr.id] = function (_vrPlayer) {
  194. mediaElement.vrPlayer = vrPlayer = _vrPlayer;
  195. var iframe = vrContainer.querySelector('iframe');
  196. iframe.style.width = '100%';
  197. iframe.style.height = '100%';
  198. if (stack.length) {
  199. for (var _i2 = 0, _il2 = stack.length; _i2 < _il2; _i2++) {
  200. var stackItem = stack[_i2];
  201. if (stackItem.type === 'set') {
  202. var propName = stackItem.propName,
  203. capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
  204. vr['set' + capName](stackItem.value);
  205. } else if (stackItem.type === 'call') {
  206. vr[stackItem.methodName]();
  207. }
  208. }
  209. }
  210. vrPlayer.on('ready', function () {
  211. var events = mejs.html5media.events.concat(['mouseover', 'mouseout']);
  212. var _loop = function _loop(_i3, _il3) {
  213. vrPlayer.on(events[_i3], function () {
  214. var event = mejs.Utils.createEvent(events[_i3], vr);
  215. mediaElement.dispatchEvent(event);
  216. });
  217. };
  218. for (var _i3 = 0, _il3 = events.length; _i3 < _il3; _i3++) {
  219. _loop(_i3, _il3);
  220. }
  221. });
  222. };
  223. mediaElement.originalNode.parentNode.insertBefore(vrContainer, mediaElement.originalNode);
  224. mediaElement.originalNode.style.display = 'none';
  225. if (mediaElement.originalNode.getAttribute('data-360video-stereo') === 'false') {
  226. options.vrIsStereo = false;
  227. }
  228. var vrSettings = {
  229. path: options.vrPath,
  230. is_stereo: options.vrIsStereo,
  231. is_autopan_off: options.vrIsAutopanOff,
  232. is_debug: options.vrDebug,
  233. default_yaw: options.vrDefaultYaw,
  234. is_yaw_only: options.vrIsYawOnly,
  235. loop: options.loop
  236. };
  237. if (mediaFiles && mediaFiles.length > 0) {
  238. for (var _i4 = 0, _il4 = mediaFiles.length; _i4 < _il4; _i4++) {
  239. if (mejs.Renderers.renderers[options.prefix].canPlayType(mediaFiles[_i4].type)) {
  240. vrSettings.video = mediaFiles[_i4].src;
  241. vrSettings.width = '100%';
  242. vrSettings.height = '100%';
  243. break;
  244. }
  245. }
  246. }
  247. VrAPI.prepareSettings({
  248. options: vrSettings,
  249. id: vr.id
  250. });
  251. vr.hide = function () {
  252. vr.pause();
  253. if (vrPlayer) {
  254. vrContainer.style.display = 'none';
  255. }
  256. };
  257. vr.setSize = function () {};
  258. vr.show = function () {
  259. if (vrPlayer) {
  260. vrContainer.style.display = '';
  261. }
  262. };
  263. return vr;
  264. }
  265. };
  266. mejs.Renderers.add(VrRenderer);
  267. Object.assign(mejs.MepDefaults, {
  268. vrPath: null,
  269. vrIsStereo: true,
  270. vrIsAutopanOff: true,
  271. vrDebug: false,
  272. vrDefaultYaw: 0,
  273. vrIsYawOnly: false
  274. });
  275. Object.assign(MediaElementPlayer.prototype, {
  276. buildvrview: function buildvrview(player, controls, layers, media) {
  277. var t = this;
  278. if (!t.isVideo || t.isVideo && t.media.rendererName !== null && !t.media.rendererName.match(/(native\_(dash|hls)|html5)/)) {
  279. return;
  280. }
  281. if (player.node.getAttribute('data-360video') !== 'true') {
  282. return;
  283. }
  284. var button = document.createElement('div');
  285. player.detectFullscreenMode();
  286. button.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'vrview-button';
  287. button.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="VR" aria-label="VR" tabindex="0"></button>';
  288. button.addEventListener('click', function () {
  289. var isFullScreen = mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen;
  290. if (isFullScreen) {
  291. player.exitFullScreen();
  292. } else {
  293. player.enterFullScreen();
  294. }
  295. });
  296. t.globalBind('keydown', function (e) {
  297. var key = e.which || e.keyCode || 0;
  298. if (key === 27 && (mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen)) {
  299. player.exitFullScreen();
  300. }
  301. });
  302. // t.addControlElement(button, 'vrview');
  303. var url = media.getSrc(),
  304. mediaFiles = [{ src: url, type: mejs.Utils.getTypeFromFile(url) }],
  305. renderInfo = mejs.Renderers.select(mediaFiles, ['vrview']);
  306. media.changeRenderer(renderInfo.rendererName, mediaFiles);
  307. }
  308. });
  309. },{}]},{},[1]);