Video support in safari on ios 15

web/components/landingpage/effect/elevated-video-player/index.tsx

@@ -66,7 +66,7 @@ function ElevatedVideoPlayer() {
     <Frame style={{ scale }}>
       <div className="youtube-thumbnail">
         <ReactPlayer
-          url={require("public/videos/promotion-video-preview.fast.webm")}
+          url={require("public/videos/promotion-video-preview.fast.mp4")}
           loop
           playing={!actualVideoPlaying}
           muted

web/components/landingpage/motion/live-design-demo/index.tsx

@@ -42,19 +42,31 @@ export default function LiveDesignDemoFrame() {
           }
         }}
       /> */}
-      <ReactPlayer
-        url={require("public/videos/landingpage-section2-live-design-demo.min.webm")}
+
+      {/* READ ./ios-15-safari-video-issue.md */}
+      {/* https://github.com/cookpete/react-player/issues/1344 */}
+      <video
+        src={require("public/videos/landingpage-section2-live-design-demo.min.mp4")}
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="auto"
+      />
+      {/* <ReactPlayer
+        url={require("public/videos/landingpage-section2-live-design-demo.min.mp4")}
         loop
         playing
         muted
+        playsinline
         config={{
           file: {
             attributes: {
               preload: "auto",
             },
           },
         }}
-      />
+      /> */}
     </DesignFramePreview>
   );
 }

web/components/landingpage/motion/live-design-demo/ios-15-safari-video-issue.md

@@ -0,0 +1,40 @@
+## Why use html5 video instead of react-player in this place?
+
+_This document is explaining how to use pure HTML5 video instead of react-player, which is the video player used in the project only in the live-design-demo section._
+
+While updating to ios 15 version, some video stuttering in safari was found. For example, let's say you are using the tag below.
+
+```typescript
+<ReactPlayer
+  url={require("public/videos/video.mp4")}
+  loop
+  playing
+  muted
+  playsinline
+  config={{
+    file: {
+      attributes: {
+        preload: "auto",
+      },
+    },
+  }}
+/>
+```
+
+All use the same code as in the example, except for the url, but it has been confirmed that the problem occurs only in the specific location _(the video play only when the video is not visible on the screen)_.
+
+I've tried several tests, such as changing the parent's position, but it's still there. But when I used the video tag in pure html5 there was no problem.
+Below is an example used.
+
+```typescript
+<video
+  src={require("public/videos/video.mp4")}
+  autoPlay
+  muted
+  loop
+  playsInline
+  preload="auto"
+/>
+```
+
+So, until the video problem is stable in ios 15 safari, the problematic video from `live-design-demo` is replaced with pure html5 `video` tag.

web/sections/landingpage/products/index.tsx

@@ -123,6 +123,7 @@ const Products = () => {
             loop
             playing
             muted
+            playsinline
             config={{
               file: {
                 attributes: {

web/utils/landingpage/constants.ts

@@ -62,7 +62,7 @@ export const PRODUCT_LIST = [
       "With powerful Design2Code Engine, Grida generates production ready code that can also easily be used for existing projects. Supprt for components, various code styles, naming conventions and fille/directory structures are supported.",
     gradient: "linear-gradient(99.57deg, #6268FF 0%, #9039FF 100%)",
     type: "video",
-    path: require("public/videos/your-design-is-your-code.webm"),
+    path: require("public/videos/your-design-is-your-code.mp4"),
   },
   // {
   // title: "server",
@@ -77,7 +77,7 @@ export const PRODUCT_LIST = [
       "Intuitive content management for your app. Translations support is included. No more excel based text managin tools - we all know that just doesn’t work. With Bridged Globalization, translate where your deisgns are at and update your contents with no update time. Go live with a click.",
     gradient: "linear-gradient(99.57deg, #FBA33C 0%, #FFC700 100%)",
     type: "video",
-    path: require("public/videos/your-design-is-your-transation.webm"),
+    path: require("public/videos/your-design-is-your-transation.mp4"),
   },
   // {
   //     title: "insight",
@@ -93,7 +93,7 @@ export const PRODUCT_LIST = [
       "Built-in git support enables you to integrate your design as a pure component into your existing project. Experience all-in-sync workflow. Keep your code synced as a design. Finally, the code generation tool that supports git.",
     gradient: "linear-gradient(99.57deg, #0E1279 0%, #632655 100%)",
     type: "video",
-    path: require("public/videos/your-design-is-your-git.webm"),
+    path: require("public/videos/your-design-is-your-git.mp4"),
   },
   //  {
   //     title: "everything",