Displaying .MOV video files using various video plugins

Need help Plugins
1

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!

2

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

3

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

4

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

5

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

6

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?

7

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!

1 Like
8

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>
2 Likes
9

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?

10

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.

11

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.

1 Like
12

@pork1977gm this worked for uploading videos from mobile phone for me. Is there any way the video can be limited to 30 seconds?

13

Great glad that worked, let me see if I can limit it. Give me a bit and I’ll come back to you.

1 Like
14

Thank you.

15

do you want it to just stop after 30secs or restart?

16

Restart would be awesome!

17

See the script section in my example?
Replace that with this…

<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();
               	}
         		});
          		video.addEventListener("timeupdate", function(){
    				if(this.currentTime >= 30) {
        			this.pause();
                    this.currentTime = 0;
                    this.play();
    			}
});
          
      </script>

It’s just got an extra bit in it which adds the “timeupdate” event listener.

18

Excellent! Thank you so much.

I’m wondering one other thing if you don’t mind…currently, when the file is uploaded, there’s no still image of the video, you have to tap the empty element and then the video will play. Is there a way to reveal that the video is there?

19

There is a way yes, 2 ways infact. You can either jump the video forward by like 0.1s so the blank part is bypass’d (so to speak) and you’re displaying the first frame., or you can use a cover image, a thumbnail I suppose which would be some image of your choice.

For the first option, you can replace the 3 lines which look like this…

<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">

to this… (notice it has #t=0.1 on the end, you could change that to 0.5,1,2,3 etc)

<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mov-file.mov#t=0.1" type="video/webm">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mov-file.mov#t=0.1" type="video/mp4">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mov-file.mov#t=0.1" type="video/ogg">

The second option is to set the “poster” value like so…

<video class="video" id="video" preload="auto" playsinline poster="URL to your thumbnail image">

20

Ok, so here for the first option, I’m putting the “file upload value”. Are you saying to add this in addition to?