Streaming live at 10am (PST)

HTML video help


#1

Hi @vincent,

I needed some help with HTML videos and I found your forum post. I (thought I) followed your instructions here and have downloaded the programme but it doesn’t seem to be working!

  1. I created the various formats
  2. Saved it directly to my dropbox
  3. Added the HTML code to the ‘embed widget’ on my page

And nothing :confused: I’ve tried different things but I’m at my wit’s end and need professional help!

If you could shed some light on this, I would REALY appreciate it!

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Can you copy here the exact embed code you’re using please?


#3

Yes, it’s this:

<style type="text/css">.easyhtml5video .eh5v_script{display:none}</style>
<div class="easyhtml5video" style="position:relative;max-width:640px;"><video  autoplay="autoplay" poster="01-s.files/html5video/01._Showreel_2018_-_S.jpg" style="width:100%" title="01. Showreel 2018 - S" loop="loop" onended="var v=this;setTimeout(function(){v.play()},300)">
<source src="01-s.files/html5video/01._Showreel_2018_-_S.m4v" type="video/mp4" />
<source src="01-s.files/html5video/01._Showreel_2018_-_S.webm" type="video/webm" />
<source src="01-s.files/html5video/01._Showreel_2018_-_S.ogv" type="video/ogg" />
<source src="01-s.files/html5video/01._Showreel_2018_-_S.mp4" />
<object type="application/x-shockwave-flash" data="01-s.files/html5video/flashfox.swf" width="640" height="480" style="position:relative;">
<param name="movie" value="01-s.files/html5video/flashfox.swf" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=true&loop=true&poster=01-s.files/html5video/01._Showreel_2018_-_S.jpg&src=01._Showreel_2018_-_S.m4v" />
 <embed src="01-s.files/html5video/flashfox.swf" width="640" height="480" style="position:relative;"  flashVars="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=true&loop=true&poster=01-s.files/html5video/01._Showreel_2018_-_S.jpg&src=01._Showreel_2018_-_S.m4v"	allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
<img alt="01. Showreel 2018 - S" src="01-s.files/html5video/01._Showreel_2018_-_S.jpg" style="position:absolute;left:0;" width="100%" title="Video playback is not supported by your browser" />
</object>
</video><div class="eh5v_script"><a href="http://easyhtml5video.com">html5 video converter</a> by EasyHtml5Video.com v3.9.1</div></div>
<script src="01-s.files/html5video/html5ext.js" type="text/javascript"></script>

#4

All the URLs to your files must work. Here they are not, because they’re relative URLs and the site can’t find any video file to play them. The link to files in your code is just what EasyHTML5 produce depending on where your files are locally (on your computer).

Now you need to host the files somewhere on the internet: via FTP or on a cloud service, or on Dropbox…

The video files must be accessible on the internet for the code to work. Webflow doesn’t host your video files yet.


#5

Okay thank you! I will try that

In the mean I’ve just been using Webflow’s Background Video. Am I right to assume that background videos won’t show up on certain browsers and that’s why I should be using the HTML code?


#6

No. Webflow’s BG Video component is working like the one you’re trying to build with code and custom resources. It even works a bit better: better centering and simpler in the code. So if Webflow’s component doesn’t work on mobile, your code won’t either.

If you are happy with what you have with Webflow’s component, keep using it, it’ll make your life easier. Test for mobile and if it doesn’t work, hide the element and use a duplicate with a different experience for mobile.

Wether it will work on mobile or not depends on the browser apps editors, mainly Apple (Safari) and Google Chrome. They’ve been blocking those behaviors until now because of performance and energy issues. The situation tends to evolve. a bit but it’s not fully there yet. At the moment there are a few mobile devices/OS supporting this.

If mobile video bg is what you’re absolutely after, some JS solutions exist, like http://dfcb.github.io/BigVideo.js/ You will still have to host your video files somewhere in that case.


#7

Oh I see! I shall stick with that then! And try to make it work on mobile too. Or I may use a GIF for mobile. I think I saw you mention that in one of the other posts!

Thank you so much!


#8

Hi @vincent. I’m going to try and do it through HTML, because the video quality isn’t good enough through background video, and also sizing background video is a struggle.

I’ve replaced the links you highlighted with the dropbox links of the videos, but still no luck. Here’s how the code looks now.

<style type="text/css">.easyhtml5video .eh5v_script{display:none}</style>
<div class="easyhtml5video" style="position:relative;max-width:640px;"><video  autoplay="autoplay" poster="https://www.dropbox.com/s/i4t1jm7swx80cqz/01._Showreel_2018_-_S.jpg" style="width:100%" title="01. Showreel 2018 - S" loop="loop" onended="var v=this;setTimeout(function(){v.play()},300)">
<source src="https://www.dropbox.com/s/e1mthqvnrp1efmn/01._Showreel_2018_-_S.m4v" type="video/m4v" />
<source src="https://www.dropbox.com/s/1o49u0rs07qe0iv/01._Showreel_2018_-_S.webm" type="video/webm" />
<source src="https://www.dropbox.com/s/71o6n8bfjnvwt7g/01._Showreel_2018_-_S.ogv" type="video/ogv" />
<source src="https://www.dropbox.com/s/uvofivgi9cjbm0d/01._Showreel_2018_-_S.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="01-s.files/html5video/flashfox.swf" width="640" height="480" style="position:relative;">
<param name="movie" value="01-s.files/html5video/flashfox.swf" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=true&loop=true&poster=01-s.files/html5video/01._Showreel_2018_-_S.jpg&src=01._Showreel_2018_-_S.m4v" />
 <embed src="01-s.files/html5video/flashfox.swf" width="640" height="480" style="position:relative;"  flashVars="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=true&loop=true&poster=01-s.files/html5video/01._Showreel_2018_-_S.jpg&src=01._Showreel_2018_-_S.m4v"	allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
<img alt="01. Showreel 2018 - S" src="01-s.files/html5video/01._Showreel_2018_-_S.jpg" style="position:absolute;left:0;" width="100%" title="Video playback is not supported by your browser" />
</object>
</video><div class="eh5v_script"><a href="http://easyhtml5video.com">html5 video converter</a> by EasyHtml5Video.com v3.9.1</div></div>
<script src="01-s.files/html5video/html5ext.js" type="text/javascript"></script>

Where else am I going wrong?

Thank you


#9

Okay that’s normal, your links aren’t correct.

But first:

That’s one limitation yes. This component is cool but meant for short video loops. As for the quality, if you target the same dimensions and the same weight as the component outputs, then you realize it’s doing a very good job. I mean I can produce better quality than it, but not so much better. It’s hardly noticeable. So when I use short loops I never hesitate and use the WF component.

Ok your links aren’t corrects. In your code you must use the real links to the files. Here instead you’re using a link that showcases the video inside of a Dropox page. Page that gives infos on the file along download links etc.

To produce a correct direct link to a Dropbox file:

1 grab the link from a contextual menu

2 edit the link: pass the 0to a 1

From: https://www.dropbox.com/s/0ihi8u7nsc8croi/test.mp4?dl=0
To: https://www.dropbox.com/s/0ihi8u7nsc8croi/test.mp4?dl=1

3 use the resulting link in your code

So in your case a proper link to the file is:
https://www.dropbox.com/s/uvofivgi9cjbm0d/01._Showreel_2018_-_S.mp4?dl=1

Your code fixed:

<source src="https://www.dropbox.com/s/e1mthqvnrp1efmn/01._Showreel_2018_-_S.m4v?dl=1" type="video/m4v" />
<source src="https://www.dropbox.com/s/1o49u0rs07qe0iv/01._Showreel_2018_-_S.webm?dl=1" type="video/webm" />
<source src="https://www.dropbox.com/s/71o6n8bfjnvwt7g/01._Showreel_2018_-_S.ogv?dl=1" type="video/ogv" />
<source src="https://www.dropbox.com/s/uvofivgi9cjbm0d/01._Showreel_2018_-_S.mp4?dl=1" type="video/mp4" />

#10

Thank you so much @vincent it has worked!

Just one last question. Which bit of code makes the video smaller? I’ve been playing around with this:

<div class="easyhtml5video" style="position:relative;max-width:640px;"> and style="width:100%"

But the video isn’t actually getting any smaller!

Thanks again


#11

Do you mind sharing your site’s read-only link please?

1 - On your site’s dashboard, click the Share icon:

2 - Generate and Copy the link:

3 - Then edit your post here, and paste the link inside.


#12

I found it! it was when I changed the 100% to px that it worked! Sorry for the bother! and thank you for your help :smiley:


#13

Hi again @vincent!

Me again! :rofl: I’ve successfully resized the videos and added the GIFs as poster images so they work on mobile - YAY!

BUT now I have an ugly play button right in the middle of them, is there any way of getting rid of this please?

Here’s the code for one of the vids:

> <style type="text/css">.easyhtml5video .eh5v_script{display:none}</style>
> <div class="easyhtml5video" style="position:relative;max-width:640px;"><video  autoplay="autoplay" poster="https://www.dropbox.com/s/80agqv5aplvemcw/Kneel.gif?dl=1" style="width:100%" title="Kneel" loop="loop" onended="var v=this;setTimeout(function(){v.play()},300)">
> <source src="https://www.dropbox.com/s/4q60nwms2p35g2i/Kneel.m4v?dl=1" type="video/mp4" />
> <source src="https://www.dropbox.com/s/rxse9898tnk7iqy/Kneel.webm?dl=1" type="video/webm" />
> <source src="https://www.dropbox.com/s/ynlaqh5ylgig4h2/Kneel.ogv?dl=1" type="video/ogg" />
> <object type="application/x-shockwave-flash" data="eh5v.files/html5video/flashfox.swf" width="640" height="640" style="position:relative;">
> <param name="movie" value="eh5v.files/html5video/flashfox.swf" />
> <param name="allowFullScreen" value="true" />
> <param name="flashVars" value="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=true&loop=true&poster=eh5v.files/html5video/Kneel.jpg&src=Kneel.m4v" />
>  <embed src="eh5v.files/html5video/flashfox.swf" width="640" height="640" style="position:relative;"  flashVars="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=true&loop=true&poster=eh5v.files/html5video/Kneel.jpg&src=Kneel.m4v"	allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
> <img alt="Kneel" src="eh5v.files/html5video/Kneel.jpg" style="position:absolute;left:0;" width="100%" title="Video playback is not supported by your browser" />
> </object>
> </video><div class="eh5v_script"><a href="http://easyhtml5video.com">html5 video converter</a> by EasyHtml5Video.com v3.9.1</div></div>
> <script src="eh5v.files/html5video/html5ext.js" type="text/javascript"></script>

And a screenshot of the problem

Thank you!


#14

No, video background is hardly supported on mobile devices. For performance issues. Some combination of OS and Device (modern iOS and iPhone for example) supports it.

The solution here is to completely hide the whole section for mobile and make a special one that you will hide for desktop.


#15

If you absolutely must have a short, no audio video that will also reliably autoplay on mobile devices - you can host the mp4 video on cloudinary.com and use two separate embeds in Webflow - one for desktop/laptop and one for tablets and down. The cool thing about cloudinary.com is that you can adjust the crop, size, quality and the automatically generated poster image dynamically via settings in the url string. Upload one video, then dynamically resize for multiple device sizes and types. Below is an example of a dummy embed referencing a cloudinary.com hosted video.

Desktop Embed

<video src="http://res.cloudinary.com/demo/video/upload/ar_3,c_crop/v1520954512/example-video.mp4" width="100%" autoplay loop muted playsinline poster="http://res.cloudinary.com/demo/video/upload/ar_3,c_crop/v1520954512/example-video.jpg">
</video>

Mobile Embed

<video src="http://res.cloudinary.com/demo/video/upload/w_0.40/v1520954512/example-video.mp4" width="100%" autoplay loop muted playsinline poster="http://res.cloudinary.com/demo/video/upload/w_0.40/v1520954512/example-video.jpg">
</video>

If you want to stay native Webflow and use the background video element, this very helpful script allows background videos to play on many mobile devices, and you can even overlay a slideshow on top of the background video.