WebsiteBaker Community Forum (upd)

After the successfull miniHero Banner module there is now a special version that uses video backgrounds.

Tip: always upload a mp4 and a webm version of the video to ensure playing on all (modern) browsers.

Demo, information and download: https://dev4me.com/modules-snippets/opensource/minihero-video-banners/

Tested - Running smooth

Also tested. Works. Next cool module.  (Y)
No video sound hearable, good so.
Thanks for that.

nice one Ruud !  (Y)

Thanks man! (Y)

Quote from: Ruud on July 28, 2017, 05:23:58 PM
After the successfull miniHero Banner module there is now a special version that uses video backgrounds.

Tip: always upload a mp4 and a webm version of the video to ensure playing on all (modern) browsers.

Demo, information and download: https://dev4me.com/modules-snippets/opensource/minihero-video-banners/

You rule. :)

For those looking for nice videos to use in this excellent new module: check https://coverr.co/ (https://coverr.co/)

Thanks Rood for these cool MiniHero modules (Y)

But should video start automatically or from button? I tested the demo on my iPhone 7 and the video just  won't start.. or is the problem just iPhone? It didn't start with 4G and wifi connections.

I have no ways of testing on IOS. It seems there are a lot of poosible restrictions on autoplay video.

There is a nice story and testing page for video here: http://walterebert.com/blog/html5-video-autoplay-mobile-revisited/
Maybe you could do a small test there and tell us if the "playsinline" attribute helps on your device/

This plays well but no sound on iPhone7:

<video autoplay muted playsinline controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
</video>

First one plays from the start button on full screen, no sound. Second plays well but no sound. Third plays well from the start button, with sounds.

Tested with iOS Safari and iOS Chrome.

Part of the most recent policies for autoplaying videos on iOS that they must be muted or contain no audio.

Quote from: zirzy on August 13, 2017, 07:53:51 AM
This plays well but no sound on iPhone7:

Code Select Expand

<video autoplay muted playsinline controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
</video>

Could you check the demo on https://dev4me.com/modules-snippets/opensource/minihero-video-banners/demo/ again?
I added the missing playsinline parameter. Hopefully that fixes it for iPhones.

Note: It is not yet fixed in the download, I changed only the testpage to find out if it works!

QuoteCould you check the demo on https://dev4me.com/modules-snippets/opensource/minihero-video-banners/demo/ again?
I added the missing playsinline parameter. Hopefully that fixes it for iPhones.

Yes, now it works correct on iPhone7.  (Y) (Y)

Quote from: zirzy on August 15, 2017, 09:54:33 AM
Yes, now it works correct on iPhone7.  (Y) (Y)

Cool, I updated the module (v0.2) with this fix.
Download: https://dev4me.com/modules-snippets/opensource/minihero-video-banners/

Just tried this module out for the first time - but the video does not play on Android, it seems?

Best,
Astrid

Quote from: astricia on September 22, 2017, 12:40:25 PM
Just tried this module out for the first time - but the video does not play on Android, it seems?

Should be no problem on Android (recent versions) when using the MPEG-4/H.264 video format. (MP4)
You could also add a second version of the video encoded in "webm" format. That might help for some browsers. The browser will select the preferred video format.

You can test using your mobile by going to https://dev4me.com/demovideo/
This demo has both MP4 and WEBM video's available.

I have a fairly new Samsung Galaxy S7 edge with Android 7.0 and I am not seeimg your demo video. Just a big grey box with the text...

Astrid

I am also using Android 7 (Motorola phone) and it is working fine.
Using the "stock android" chrome browser!

I can't say about other browsers, but chrome should work.

(https://image.ibb.co/k6HMr5/screenshot.png)

Ok. I was using the preinstalled Samsung browser. With Chrome, I can see the video as well.

However if I go for example to www.coverr.co I can see their videos also with my Samsung browser. What are they doing differently? Samsung phones are rather popular, so I guess a big part of mobile users would use this browser.

Astrid

Just installed the Samsung Browser (version 6.2.00.38 beta) to test.

Both my demo page and coverr.co do not work. On coverr.co I get the "poster" jpg image but no video as well.

The initial video on coverr.co does not work (but shows at least a static image and not a blank box). But if you select any video below and set it to test as a cover, it will work.