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 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?
<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.
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?
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: HTML5 Video Preload | High Performance Web Sites
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?
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: Chrome DevTools | Chrome for Developers