NEEDED: HTML5 video responsive video play-button-o |
Post Reply | Page 12> |
Author | |
runjay
Newbie Joined: Sep 21 2020 Location: Seattle Status: Offline Points: 12 |
Post Options
Thanks(0)
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
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Post Options
Thanks(1)
|
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 |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Post Options
Thanks(1)
|
I just realized that you don't need an overlay.
If you use this element: 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 Edited by Hobby001 - Sep 27 2020 at 11:09am |
|
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Online Points: 742 |
Post Options
Thanks(0)
|
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 |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Post Options
Thanks(0)
|
Was it done using Youtube Video Element ?
|
|
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Online Points: 742 |
Post Options
Thanks(0)
|
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 |
|
runjay
Newbie Joined: Sep 21 2020 Location: Seattle Status: Offline Points: 12 |
Post Options
Thanks(0)
|
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? |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Post Options
Thanks(0)
|
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/. |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Post Options
Thanks(0)
|
Your example shows an overlay with text displayed and staying displayed during video play.
By definition an overlay will prevent access to controls.
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Post Options
Thanks(0)
|
Look here for available HTML5 video options https://blog.addpipe.com/10-advanced-features-in-html5-video-player/#showingcaptionsorsubtitlesduringplayback
|
|
Post Reply | Page 12> |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |