Print Page | Close Window

NEEDED: HTML5 video responsive video play-button-o

Printed From: Forum openElement
Category:

openElement


Forum Name: Suggestion Box
Forum Description: Suggest features and other ideas for future versions of the openElement software
Please do not post support questions in this section.
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=1752
Printed Date: 22 Sep 2021 at 14:19
Software Version: Web Wiz Forums 10.11 - http://www.webwizforums.com


Topic: NEEDED: HTML5 video responsive video play-button-o
Posted By: runjay
Subject: NEEDED: HTML5 video responsive video play-button-o
Date 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/" rel="nofollow - 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  

 

 




Replies:
Posted By: Hobby001
Date 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/







-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: Hobby001
Date Posted: 27 Sep 2020 at 03:24
I just realized that you don't need an overlay.

If you use this element:  https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm" rel="nofollow - https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm

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





-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: digizar
Date 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.
https://blumendigi.com/Clips/clips_1.gb.htm" rel="nofollow - https://blumendigi.com/Clips/clips_1.gb.htm


-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date 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.
https://blumendigi.com/Clips/clips_1.gb.htm" rel="nofollow - https://blumendigi.com/Clips/clips_1.gb.htm

Was it done using Youtube Video Element ?


-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: digizar
Date Posted: 27 Sep 2020 at 21:09
Yes, it is YouTube Element.
Content could be anything else.


-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: runjay
Date Posted: 29 Sep 2020 at 03:31

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

https://jsfiddle.net/carmijoon/pZbkX/" rel="nofollow - 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" rel="nofollow - YouTube is unworkable for my children’s educational site because after the video finishes playing, it suggests an offsite video.

Suggestions?



Posted By: Hobby001
Date Posted: 29 Sep 2020 at 14:36

https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm" rel="nofollow - 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/" rel="nofollow - https://responsivedesignchecker.com/ .




-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: Hobby001
Date 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.


-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: Hobby001
Date Posted: 29 Sep 2020 at 16:48
Look here for available HTML5 video options  https://blog.addpipe.com/10-advanced-features-in-html5-video-player/#showingcaptionsorsubtitlesduringplayback" rel="nofollow - https://blog.addpipe.com/10-advanced-features-in-html5-video-player/#showingcaptionsorsubtitlesduringplayback

-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: runjay
Date Posted: 29 Sep 2020 at 20:18
Thanks for  https://responsivedesignchecker.com/" rel="nofollow - https://responsivedesignchecker.com/ .
I see that  https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm" rel="nofollow -   is fully responsive.  Also see the the replacement image will not start the image after it responds to the different sizes.  Only the default controls work.
Plus I can only get it to work for two videos in an openElement project and it stops working when I try to add it to three or more.
I did not see a topic for a start button overlay in  
https://blog.addpipe.com/10-advanced-features-in-html5-video-player/#showingcaptionsorsubtitlesduringplayback" rel="nofollow - https://blog.addpipe.com/10-advanced-features-in-html5-video-player/#showingcaptionsorsubtitlesduringplayback

Still looking - thanks.


Posted By: Hobby001
Date Posted: 30 Sep 2020 at 02:26
Originally posted by runjay runjay wrote:

Thanks for  https://responsivedesignchecker.com/" rel="nofollow - https://responsivedesignchecker.com/ .
I see that  https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm" rel="nofollow -
Originally posted by runjay runjay wrote:

Plus I can only get it to work for two videos in an openElement project and it stops working when I try to add it to three or more.

I could run 5 videos on the same page without issue

Originally posted by runjay runjay wrote:

I did not see a topic for a start button overlay in  
https://blog.addpipe.com/10-advanced-features-in-html5-video-player/#showingcaptionsorsubtitlesduringplayback" rel="nofollow - https://blog.addpipe.com/10-advanced-features-in-html5-video-player/#showingcaptionsorsubtitlesduringplayback
Still looking - thanks.

There is no such thing available as part of the HTML5 video




-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big



Print Page | Close Window

Forum Software by Web Wiz Forums® version 10.11 - http://www.webwizforums.com
Copyright ©2001-2012 Web Wiz Ltd. - http://www.webwiz.co.uk