NEEDED: HTML5 video responsive video play-button-o
Printed From: openElement Website
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: https://forums.openelement.uk/en/forum_posts.asp?TID=1752
Printed Date: Apr 19 2024 at 8:05pm
Software Version: Web Wiz Forums 12.04 - 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: 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/" 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: 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/ ------------- https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video |
Posted By: Hobby001
Date Posted: Sep 27 2020 at 2:24am
|
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.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video |
Posted By: digizar
Date 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. 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://blumendigi.com |
Posted By: Hobby001
Date Posted: Sep 27 2020 at 1:54pm
Was it done using Youtube Video Element ? ------------- https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video |
digizar wrote:Posted By: digizar
Date Posted: Sep 27 2020 at 8:09pm
|
Yes, it is YouTube Element. Content could be anything else. ------------- ___________________________________ Ask questions only if there is no answer yet. https://blumendigi.com |
Posted By: runjay
Date Posted: Sep 29 2020 at 2:31am
|
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: Sep 29 2020 at 1:36pm
|
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.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video |
Posted By: Hobby001
Date 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. ------------- https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video |
Posted By: Hobby001
Date Posted: Sep 29 2020 at 3:48pm
|
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.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video |
Posted By: runjay
Date Posted: Sep 29 2020 at 7:18pm
|
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: Sep 30 2020 at 1:26am
I could run 5 videos on the same page without issue
There is no such thing available as part of the HTML5 video ------------- https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video |