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 Reverse Sort Order
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Topic: NEEDED: HTML5 video responsive video play-button-o
    Posted: 30 Sep 2020 at 02:26
Originally posted by runjay runjay wrote:

Thanks for https://responsivedesignchecker.com/.
I see that https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm  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.

When I resize the page the video window resize accordingly without issue.  After resizing, I can start the video without issue.

once the video ran the poster (replacement image) is not displayed anymore untill you refresh the page.  Again it's standard HTML5.  You have to cope with it or find yourself a player that will suit your needs better.

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  
Still looking - thanks.

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


Back to Top
runjay View Drop Down
Newbie
Newbie
Avatar

Joined: 21 Sep 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: 29 Sep 2020 at 20:18
Thanks for https://responsivedesignchecker.com/.
I see that https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm  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  

Still looking - thanks.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
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
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
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: 5718
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
runjay View Drop Down
Newbie
Newbie
Avatar

Joined: 21 Sep 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: 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
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankfu
Status: Offline
Points: 654
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
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
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 Frankfu
Status: Offline
Points: 654
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: 5718
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
 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,031 seconds.