BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
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: 21 Sep 2020
Location: Seattle
Status: Offline
Points: 7
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: 26 Sep 2020 at 01:50

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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5179
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 26 Sep 2020 at 03:21
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 - 26 Sep 2020 at 03:24
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5179
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 27 Sep 2020 at 03:24
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 - 27 Sep 2020 at 12:09
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankf
Status: Offline
Points: 616
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: 27 Sep 2020 at 13:24
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://digispics.com/_pers/resger2017.pdf
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5179
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 27 Sep 2020 at 14:54
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: 30 Dec 2015
Location: Germany Frankf
Status: Offline
Points: 616
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: 27 Sep 2020 at 21:09
Yes, it is YouTube Element.
Content could be anything else.


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

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

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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5179
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Sep 2020 at 14:36

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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5179
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Sep 2020 at 16:46
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5179
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Sep 2020 at 16:48
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 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,047 seconds.