Forum Academy Marketplace Showcase Pricing Features

Displaying .MOV video files using various video plugins

I’m building an app where different users upload videos and contribute to a game, and all other players can view the previously submitted videos. This will primarily be used on mobile.

The problem I’m running into is that iPhones upload the videos in .MOV file format, and I can’t figure out a way to play those videos on the page. From what I’ve researched, I think this is an inherent restriction with browser-based video plugins. In Bubble, I’ve looked into or tried: Video.JS, Video Player, and HTLM5 Video Player - and none seem to support it.

Does anyone have any workarounds or suggestions to get the desired experience?

I looked into uploading the file in it’s raw format, then converting it to MP4 using something like CloudConvert, but apparently you can’t bring that converted file back into Bubble and it felt like I was going down a rat hole trying to get that approach to work.

If that’s my best bet, I can continue down that path and see if it’l work, but figured I’d check with the community first.

Thank you!

I am no expert with video, but I have a feeling you will need to go to Stackoverflow or a more specialized community for help, as I don’t think there is a simple solution.

Either trying to convert the video into the file type you want, which it seems you are exploring with CloudConvert, or if you expect to have a lot of video files uploaded you may want to think ahead and host the video files elsewhere as it can get expensive quick with Bubble’s storage pricing.

If you can directly upload the file to Vimeo, Wistia, Youtube, etc then their systems automatically convert the file for you and you know the video file is viewable in most video players

The Mux API has been helpful for me. You send the .MOV url to them and they can store the video for you and return a video url in .mp4 format

Yep as Ryley said - you need to convert it to mp4. There are a bunch of services that do this via API - cloudconvert being one.

You can’t do this in real-time so you will need to email or alert the user once it is converted and downloaded back into Bubble.

Simon

Thanks for the suggestion on Mux API. I’ll look into them. If you have any tips or stuff that you’ve used before that could help me, that would be really appreciated.

I’ve made some decent progress using Cloudinary to achieve the goal outlined above. Have you used it or had any success with it? I ran into one issue getting it up and running that I outlined here: Using API connector with cloudinary - upload file request - might be syntax issue

did u try just renaming mov to mp4? works for me and plays fine, unfortunately i cannot rename the files ones they are on the server, any idea?

Anyone come up w/any better approaches w/this? Have the same problem w/the VideoJS player - mp4 files play fine but after uploading video from phone, the mov file doesn’t play.

This seems like this should be a somewhat common issue w/mobile video uploads that should have a somewhat easier solution (other than sending files out to be converted or renaming them).

Would love to know if anyone’s come up w/an elegant way to play both mp4 and mov files…thanks!

Have you tried creating an HTML element and using code like the below?
Tap it once and it should play, tap again and it will pause.

<!DOCTYPE html>
<html>
   <body>
      <div class="wrapper">
         <video class="video" id="video" preload="auto" playsinline>
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mov-file.mov" type="video/webm">
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mov-file.mov" type="video/mp4">
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mov-file.mov" type="video/ogg">
            Your browser does not support HTML5 video
         </video>
         <div id="playButton" class="playButton"></div>
      </div>
      <style>
         .video {
         position: relative;
         top: 0;
         left: 0;
         width: 100%; 
         height: 100%;
         object-fit: cover;
         }
         .wrapper {
         width:auto;
         }
         .playButton {
         display: block;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 25px 0 25px 50px;
         border-color: transparent transparent transparent #C7C7C7;
         opacity: 0.7;
         position: absolute;
         top:0;
         left:0;
         right:-10px;
         bottom:0;
         margin: auto;
         pointer-events: none;
         }
      </style>
      <script>
         var video = document.getElementById("video");
         		video.addEventListener("click", function(event) { 
               	if (video.paused == true) {
                   	$('.playButton').css('display','none');
                   	video.play();
               	}
               	else {
                   	$('.playButton').css('display','block');
                       video.pause();
               	}
         		});
          
      </script>
   </body>
</html>

Wasn’t really sure how to replace my Video.js element and inputs to that w/an HTML element.
I tested and found if I simply renamed a file.mov to file.mp4, the file plays in the Video.js player.

So…is there a way to simply rename a file either before uploading or after a file’s been uploaded? Right now I can upload a file.mp4 fine. Just need to rename a file.mov (for mobile video uploads). Is this doable?

Hi @davidm, apologies for the week’s delay in getting back to you, am right in the middle of a house move. I can try to modify it to rename the file before hand if you still need it just as soon as I get some time.

Thanks - no worries!
What I’m trying to figure out is how to rename a file (that’s being uploaded from a mobile device) either before or after it’s uploaded. mp4 files play fine but mov files do not play in video.js. However, if a mp4 file is renamed (I tested my simply manually renaming one before uploading) to mov, that ‘renamed’ file plays fine.

The prob is how do I rename (change extension) of these files.