Fixed autoplay issue for iOS

Author: Philipp

demo/public/js/app.js

@@ -1489,6 +1489,17 @@ module.exports = function (bitmap, value) {
 };
 
 
+/***/ }),
+
+/***/ "6094":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_fc38aede_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("d2b2");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_fc38aede_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_fc38aede_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+ /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_fc38aede_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
+
 /***/ }),
 
 /***/ "60ae":
@@ -1813,17 +1824,6 @@ module.exports = function (NAME) {
 module.exports = {};
 
 
-/***/ }),
-
-/***/ "76ae":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_5eaa139b_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("d66b");
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_5eaa139b_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_5eaa139b_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
- /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_VideoPlayer_vue_vue_type_style_index_0_id_5eaa139b_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
-
 /***/ }),
 
 /***/ "77b2":
@@ -2729,21 +2729,6 @@ module.exports = function (argument) {
 };
 
 
-/***/ }),
-
-/***/ "a876":
-/***/ (function(module, exports, __webpack_require__) {
-
-exports = module.exports = __webpack_require__("2350")(false);
-// imports
-
-
-// module
-exports.push([module.i, ".video-wrapper[data-v-5eaa139b]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;overflow:hidden;z-index:0}.fade[data-v-5eaa139b]{backface-visibility:hidden}.fade-enter-active[data-v-5eaa139b],.fade-leave-active[data-v-5eaa139b]{transition:opacity 1s}.fade-enter[data-v-5eaa139b],.fade-leave-to[data-v-5eaa139b]{opacity:0}video[data-v-5eaa139b]{visibility:visible;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:100%}", ""]);
-
-// exports
-
-
 /***/ }),
 
 /***/ "ac1f":
@@ -3197,6 +3182,21 @@ exports.f = NASHORN_BUG ? function propertyIsEnumerable(V) {
 } : nativePropertyIsEnumerable;
 
 
+/***/ }),
+
+/***/ "d2b2":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("f70c");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("62e8aa78", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "d44e":
@@ -3215,21 +3215,6 @@ module.exports = function (it, TAG, STATIC) {
 };
 
 
-/***/ }),
-
-/***/ "d66b":
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__("a876");
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = __webpack_require__("499e").default
-var update = add("5a4848a4", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ "d784":
@@ -3531,6 +3516,21 @@ module.exports = Array.isArray || function isArray(arg) {
 })(document);
 
 
+/***/ }),
+
+/***/ "f70c":
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__("2350")(false);
+// imports
+
+
+// module
+exports.push([module.i, ".video-wrapper[data-v-fc38aede]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;overflow:hidden;z-index:0}.fade[data-v-fc38aede]{backface-visibility:hidden}.fade-enter-active[data-v-fc38aede],.fade-leave-active[data-v-fc38aede]{transition:opacity 1s}.fade-enter[data-v-fc38aede],.fade-leave-to[data-v-fc38aede]{opacity:0}video[data-v-fc38aede]{visibility:visible;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:100%}", ""]);
+
+// exports
+
+
 /***/ }),
 
 /***/ "f772":
@@ -3775,12 +3775,12 @@ var exists = function exists(obj, key) {
     "default": ''
   }
 }, playerProps));
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2dd602f9-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VideoPlayer.vue?vue&type=template&id=5eaa139b&scoped=true&
-var VideoPlayervue_type_template_id_5eaa139b_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"fade"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.showVideo),expression:"showVideo"}],staticClass:"video-wrapper"},[_c('video',{ref:"video",style:(_vm.styleObject),attrs:{"playsinline":"","loop":_vm.loop,"preload":_vm.preload},domProps:{"muted":_vm.muted}},[_c('source',{attrs:{"src":_vm.src,"type":_vm.getMediaType(_vm.src)}})])])])}
-var VideoPlayervue_type_template_id_5eaa139b_scoped_true_staticRenderFns = []
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2dd602f9-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VideoPlayer.vue?vue&type=template&id=fc38aede&scoped=true&
+var VideoPlayervue_type_template_id_fc38aede_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"fade"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.showVideo),expression:"showVideo"}],staticClass:"video-wrapper"},[_c('video',{ref:"video",style:(_vm.styleObject),attrs:{"autoplay":"","playsinline":"","loop":_vm.loop,"preload":_vm.preload},domProps:{"muted":_vm.muted}},[_c('source',{attrs:{"src":_vm.src,"type":_vm.getMediaType(_vm.src)}})])])])}
+var VideoPlayervue_type_template_id_fc38aede_scoped_true_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/VideoPlayer.vue?vue&type=template&id=5eaa139b&scoped=true&
+// CONCATENATED MODULE: ./src/components/VideoPlayer.vue?vue&type=template&id=fc38aede&scoped=true&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.exec.js
 var es_regexp_exec = __webpack_require__("ac1f");
@@ -3819,6 +3819,7 @@ var web_timers = __webpack_require__("4795");
 //
 //
 //
+//
 
 /* harmony default export */ var VideoPlayervue_type_script_lang_js_ = ({
   props: playerProps,
@@ -3844,6 +3845,9 @@ var web_timers = __webpack_require__("4795");
     }
   },
   methods: {
+    pause: function pause() {
+      this.$refs.video.pause();
+    },
     load: function load() {
       var _this = this;
 
@@ -3873,6 +3877,9 @@ var web_timers = __webpack_require__("4795");
       return !!this.$refs.video.canPlayType;
     },
     videoReady: function videoReady() {
+      // Unfortunately we have the iOS bug, that we need to set autoplay always to true.
+      // That means we need to first pause the video, and later check if we want to autoplay or not
+      this.pause();
       this.$emit('ready');
     },
     videoError: function videoError() {
@@ -3892,8 +3899,8 @@ var web_timers = __webpack_require__("4795");
 });
 // CONCATENATED MODULE: ./src/components/VideoPlayer.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_VideoPlayervue_type_script_lang_js_ = (VideoPlayervue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/VideoPlayer.vue?vue&type=style&index=0&id=5eaa139b&scoped=true&lang=css&
-var VideoPlayervue_type_style_index_0_id_5eaa139b_scoped_true_lang_css_ = __webpack_require__("76ae");
+// EXTERNAL MODULE: ./src/components/VideoPlayer.vue?vue&type=style&index=0&id=fc38aede&scoped=true&lang=css&
+var VideoPlayervue_type_style_index_0_id_fc38aede_scoped_true_lang_css_ = __webpack_require__("6094");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -4001,11 +4008,11 @@ function normalizeComponent (
 
 var component = normalizeComponent(
   components_VideoPlayervue_type_script_lang_js_,
-  VideoPlayervue_type_template_id_5eaa139b_scoped_true_render,
-  VideoPlayervue_type_template_id_5eaa139b_scoped_true_staticRenderFns,
+  VideoPlayervue_type_template_id_fc38aede_scoped_true_render,
+  VideoPlayervue_type_template_id_fc38aede_scoped_true_staticRenderFns,
   false,
   null,
-  "5eaa139b",
+  "fc38aede",
   null
 
 )