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: