How to set video play inline in a rectangle?


(Alex) #1

Hi

I am trying to set a video play by url, but not directly drag it into Hype project document:

and here is the code that I put in:

<video id="swimming" autobuffer="autobuffer" loop="" style="width: 100%; height: 100%; position:left">
<source src="https://www.lovcour.com/wp-content/uploads/sites/2/2018/12/swimming.iphone5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

and you may check that video by pushing the “play” button

on the homepage of our site: https://www.lovcour.com

On mac, the video play as “inline”, but it will not play as “inline” video on iPhone, I mean it will automatically enlarge and show Video controls on Smartphone.

So, what is right way to set it as Inline video both for iPhone and Android WITHOUT video control please?

Thanks.


#2

Here’s the manual way to do this:

     <video id="swimming" controls="false" autoplay loop muted playsinline style="width: 100%; height: 100%; position:left">
        <source src="https://www.lovcour.com/wp-content/uploads/sites/2/2018/12/swimming.iphone5.mp4" type="video/mp4">
        Your browser does not support the video tag.
        </video>

Note that the video needs to be muted for it to autoplay on a mobile device.


(Alex) #3

Hi @Daniel,

Very clear, and great thanks.

IF want it autoplay, it should be muted, if not, muted is optional.

I found even set controls="false"

There will be “Play progress bar” even if set controls=“false”

If my case, I just want control the video play or pause by custom “button”, and I do not want to show that " play progress bar", so I completely remove controls=“false”

so, what I my code as following, it works well both in mobile and PC:

     <video id="swimming" loop muted playsinline style="width: 100%; height: 100%; position:left">
        <source src="https://www.lovcour.com/wp-content/uploads/sites/2/2018/12/swimming.iphone5.mp4" type="video/mp4">
        Your browser does not support the video tag.
        </video>

By the way, it takes more than 10 second to open our the page, In order achieve high speed, I removed autobuffer="autobuffer"

is that right? I mean, autobuffer will cause delay?

Thanks and have a nice day.


#4

Autobuffer is deprecated: http://html5doctor.com/the-video-element/

The default is preload="auto" which tells the browser to download the first few seconds of the video. You don’t need to include that attribute, though. This page has info on that property: https://www.stevesouders.com/blog/2013/04/12/html5-video-preload/

Every video is different, but for your case, having ‘autoplay’ on will get the video to play as soon as it is able. If you really want to get into the weeds for buffering, have a look at canplaythrough and this workaround for getting videos to buffer: https://github.com/denisnazarov/canplaythrough

Removing the progress bar is a little trickier: https://stackoverflow.com/a/36293084
Whatever you do, make sure you respect the fact the some people don’t like videos to play without the ability to control them.


(Alex) #5

Wow, thanks for your update info, I still see there are autobuffer in lots of sample codes.

Great article.

if so, the preload might still cause delay, I prefer disable it by * preload="none" (tells the browser not to download any of the video. This saves bandwidth.) , am I right?


#6

It might slow down a mobile device since it increases the amount of network connections required (a new download is started for the video’s URL). But in most situations I don’t think you would notice. Removing that preload will make the video slower to start. You should test it out in Chrome’s developer tools and figure out your ideal tradeoff. You can even simulate 3G: https://developers.google.com/web/tools/chrome-devtools/device-mode/