BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Suggestion Box
  New Posts New Posts RSS Feed - NEEDED: HTML5 video responsive video play-button-o
  FAQ FAQ  Forum Search   Register Register  Login Login

NEEDED: HTML5 video responsive video play-button-o

 Post Reply Post Reply Page  12>
Author
Message
runjay View Drop Down
Newbie
Newbie
Avatar

Joined: Sep 21 2020
Location: Seattle
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote runjay Quote  Post ReplyReply Direct Link To This Post Topic: NEEDED: HTML5 video responsive video play-button-o
    Posted: Sep 26 2020 at 12:50am

NEEDED: HTML5 video responsive video play-button-overlay that will work will the HTLM 5 Video in openElement 1.57 R9

I am building a children’s educational site with over 100 videos.  Four-year old’s need to easily click a button for a video to play.  Because HTML5 video will no longer auto-load with sound on browsers like Chrome, after the student clicks on the video’s button, the HTML 5 video player loads and the student must scroll down to find the small play button of the HTML 5 video player.

I tried to use a large play-button-overlay that will be easy for the child to click.  Spent a last three days trying numerous overlays like the ones Douglas Green offers

https://douglasgreen.com/create-a-responsive-video-play-button-overlay/

Most do not work at all with the player openElements uses.  At best, Douglas’ load above the page header instead of overlaying the video, then open the video in a separate page.

Thus, what is needed is a play-button-overlay suitable for four-year-old’s that will work with the HTML 5 video player openElement uses. 

I have a sample project of one of my music videos for teaching English that I can email. 

Thanks - Jay  

 

 

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 26 2020 at 2:21am
Unless someone already did it and is willing to share it, it will need hours of researches and development.

There might be a solution with CSS and Javascript based on something like this:  https://jsfiddle.net/carmijoon/pZbkX/







Edited by Hobby001 - Sep 26 2020 at 2:24am
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 27 2020 at 2:24am
I just realized that you don't need an overlay.


You need to configure an Mp4 video, an OGG video and an image.

If you unselect 6-Muted and/or 7-Autoplay.  The selected image is displayed.  Make sure that the image looks like overlayed with a play button.

As soon as someone clicks on the image the video starts to play.

No need of fancy programming.  It's simply HTML5 video





Edited by Hobby001 - Sep 27 2020 at 11:09am
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Sep 27 2020 at 12:24pm
Exactly what I did for a sound.
So I was confused about the question.
I used YoutTube, but could be anything else.
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 27 2020 at 1:54pm
Originally posted by digizar digizar wrote:

Exactly what I did for a sound.
So I was confused about the question.
I used YoutTube, but could be anything else.

Was it done using Youtube Video Element ?
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Sep 27 2020 at 8:09pm
Yes, it is YouTube Element.
Content could be anything else.


Edited by digizar - Sep 27 2020 at 10:19pm
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
runjay View Drop Down
Newbie
Newbie
Avatar

Joined: Sep 21 2020
Location: Seattle
Status: Offline
Points: 12
Post Options Post Options   Thanks (0) Thanks(0)   Quote runjay Quote  Post ReplyReply Direct Link To This Post Posted: Sep 29 2020 at 2:31am

I am new to openElement and am likely making some mistakes.

https://jsfiddle.net/carmijoon/pZbkX/ opens the video in a full screen window and plays the it above the video it is supposed to overlay.

https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm worked with a single page project adding it on top of an “HTML 5 video” element.   As soon as I tried to test it in a “responsive” mode for scaling it would no longer work.  Trying to paste the element into my web page’s “Element” folder, it would not work at all.   The overlay will not work and covers the HTML 5 video controls so they can not play.   Tried for 5 hours to figure out why and failed.   Hopeful I’m just making some mistakes that can be corrected.   

YouTube is unworkable for my children’s educational site because after the video finishes playing, it suggests an offsite video.

Suggestions?

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 29 2020 at 1:36pm

https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm 

The image displayed when the page is opened is a "replacement image"  it's not an overlay.

I changed the old image with one showing a start button over it.

If you look at it, you will see how it works and it is fully responsive.  Just play with the page width or test it here https://responsivedesignchecker.com/.


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 29 2020 at 3:46pm
Your example shows an overlay with text displayed and staying displayed during video play.

By definition an overlay will prevent access to controls.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 29 2020 at 3:48pm
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.