Cannot embed or display a .mov file

Technical Questions
1

Builder content link

Builder public api key
2fe4147bb8c843bb8ebba475c8973899

What are you trying to accomplish
Display a .mov file

I can display an .mp4 file by either embedding or using the Custom Code block, however, doing the same for a .mov file does not work. Both files are uploaded to s3 the same way with the same permissions and available through cloudfront. I also tried editing a Video component through the JSON editor but again, the .mp4 file works but the .mov file does not.

Thanks in advance!

Code stack you are integrating Builder with
React and Rails

2

To display a .mov file in a web application built with React (and potentially using Builder.io), can be a bit tricky because .mov files are not as universally supported across browsers as .mp4 files. Browsers like Chrome, Firefox, and Edge have limited support for .mov files, primarily supporting .mp4, .webm, and .ogg formats for HTML5 video.

Here’s how you can approach this problem:

Option 1: Convert .mov to .mp4

Convert the .mov files to .mp4 format, which is universally supported across all modern browsers. This might be the simplest and most effective solution.

Option 2: Use HTML5 Video with Fallback

While .mov support is limited, you can attempt to use the HTML5 video element with a fallback mechanism. However, converting the .mov files to a more widely supported format is recommended.

Option 3: Custom Code Block with HTML5 Video

If you need to use .mov files, here’s how you can attempt to embed them using the Custom Code block in Builder.IO:

// Custom Code Block
<video controls>
  <source src="https://your-cloudfront-url/video.mov" type="video/quicktime" />
  Your browser does not support the video tag.
</video>

Complete Implementation with React Component:

Step 1: Create a Custom Video Component

Create a custom React component for video playback that can handle different video file types.

import React from 'react';

const VideoPlayer = ({ src, type }) => {
  return (
    <video controls width="600">
      <source src={src} type={type} />
      Your browser does not support the video tag.
    </video>
  );
};

export default VideoPlayer;

Step 2: Use the Custom Video Component

Use the custom VideoPlayer component wherever you want to embed the video.

import React from 'react';
import VideoPlayer from './VideoPlayer'; // Ensure the correct path to your VideoPlayer component

const ExamplePage = () => {
  return (
    <div>
      <h1>Video Test</h1>
      {/* Use .mp4 video */}
      <VideoPlayer src="https://your-cloudfront-url/video.mp4" type="video/mp4" />
      {/* Use .mov video */}
      <VideoPlayer src="https://your-cloudfront-url/video.mov" type="video/quicktime" />
    </div>
  );
};

export default ExamplePage;

Step 3: Embed the Video in Builder.io

You can use a Custom Code block in Builder.io to embed the video directly if needed:

  1. Drag a Custom Code block into your Builder.io page.
  2. Add the following HTML inside the Custom Code block:
<video controls width="600">
  <source src="https://your-cloudfront-url/video.mov" type="video/quicktime" />
  Your browser does not support the video tag.
</video>

Troubleshooting Tips:

  1. Browser Compatibility:

    • Ensure you’re using a browser that supports .mov files (e.g., Safari has better support compared to others).

  2. File Permissions and CORS:

    • Check the permissions on your S3 bucket and CloudFront distribution. Ensure that the files are publicly accessible, and the correct CORS settings are applied.

  3. Encoding Issues:

    • Ensure that the .mov file is properly encoded. Sometimes, encoding issues might prevent the video from playing correctly.

Converting .mov to .mp4:

If converting .mov to .mp4 is a viable solution, you can use tools like FFmpeg:

ffmpeg -i input.mov -vcodec h264 -acodec mp2 output.mp4

By following these steps, you should be able to embed and display video content from both .mp4 and .mov files, though converting .mov to .mp4 is generally recommended for broader compatibility. If you encounter further issues, please provide specific error messages or behavior details for more directed assistance.