BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
Forum Home Forum Home >

openElement

> Suggestion Box
  New Posts New Posts RSS Feed - upgrade HTML 5 Video element with Videojs
  FAQ FAQ  Forum Search   Register Register  Login Login

upgrade HTML 5 Video element with Videojs

 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: upgrade HTML 5 Video element with Videojs
    Posted: 22 Dec 2020 at 12:33
Originally posted by runjay runjay wrote:

The image of the video box above has two difference to the one I am currently using.

 

3. Image (None)   The videos I have are less than 2 minutes long so they load fast enough that I think the  "Image" may be redundant.  

It s not mandatory but allows to use something different from the video first frame,   Imagine when this first frame is totally single color, it can be confusing.

Originally posted by runjay runjay wrote:

2. OGG Video (None)  I created my children's videos over ten years ago using Flash and used Swival to convert the .swf to MP4.  I tried to convert the MP4 to OGG using Mirco Video Converter and the quality was unworkably poor.  Do I need OGG or is MP4 enough?

This option is there as part as the HTML5 standard but is not mandatory

Originally posted by runjay runjay wrote:

I understand that the video will not play sound if the auto-load box is checked.  When adding a new Responsive HTML 5 video to a project, why is the default setting in the video box have checks in 6-Mute, 7-Auto-play, and 8-Loop?

Thanks - Jay

Before that, poeple tought that it does not work, now they have to tweak it to their convenience.



Edited by Hobby001 - 22 Dec 2020 at 12:35
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: 22 Dec 2020 at 02:02

The image of the video box above has two difference to the one I am currently using.

 

3. Image (None)   The videos I have are less than 2 minutes long so they load fast enough that I think the  "Image" may be redundant.  

 

2. OGG Video (None)  I created my children's videos over ten years ago using Flash and used Swival to convert the .swf to MP4.  I tried to convert the MP4 to OGG using Mirco Video Converter and the quality was unworkably poor.  Do I need OGG or is MP4 enough?

 

I understand that the video will not play sound if the auto-load box is checked.  When adding a new Responsive HTML 5 video to a project, why is the default setting in the video box have checks in 6-Mute, 7-Auto-play, and 8-Loop?

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: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 20 Dec 2020 at 16:31
Following this discussion, I added invalid file name with white space warning to the element

Edited by Hobby001 - 20 Dec 2020 at 16:31
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: 20 Dec 2020 at 12:33
Originally posted by runjay runjay wrote:

First, it is critical that there be NO SPACES in the file name.  I spent 50 hours plus trying everything I could think of and finally found that it was the spaces in the file name of my children’s music video “We Love You” that caused your element not to work.  Change the file name to WeLoveYou and all’s well.  This is not a problem in the HTML 5 Video element, so it just did not occur to me that your element would be different.

Sadly OpenElement is aging.  There must be no space in folders nor file name used in OE.  Folders and file names with two dots such as my_file.good.js are prohibited too.  Sometimes I forget about it, I should have think about it when you asked about your issue but it became some sort of automatic for me.   Sorry about that.

Originally posted by runjay runjay wrote:

Second, I am not able as yet to get “IMAGE” to the full width of the video player.  The image width is noticeably narrower.

So as a solution, I create the video with only in the first frame of the video with a “play” icon, thus it disappears as soon as the video is clicked on and reaches frame 2.

In Properties:

Resizing: Set the width to 100% with “Keep width and height aspect ratio.  

When you mentionned IMAGE, are you talking about the image property?


It correspond to the poster property for Video tag.  It use to fill the space used by the element but will not be distorsed if the image proportions are not the same as the video.  

The image will be displayed untill the video is displayed once and will not come back after.  I was disapointed to see that too.

It's straight HTML5 standard.

Originally posted by runjay runjay wrote:

Video:  I select the video mp4 and leave the “Image” setting at the default setting “None”. Select “Default Controls” and leave all oth other boxes blank.

When in page loads, the first frame of the video shows with its video “play” icon.  Your element covers the whole player so when you click anywhere on the image of the video it plays with sound – THANKS!!!!!!!!!!!

When a video is set to autostart it will be muted by default no mather what setting you use for mute.  

Again it's straight HTML5 standard.



Edited by Hobby001 - 20 Dec 2020 at 13:02
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: 20 Dec 2020 at 00:04

The core of your element works OK, there are two problems that I sorted out.

First, it is critical that there be NO SPACES in the file name.  I spent 50 hours plus trying everything I could think of and finally found that it was the spaces in the file name of my children’s music video “We Love You” that caused your element not to work.  Change the file name to WeLoveYou and all’s well.  This is not a problem in the HTML 5 Video element, so it just did not occur to me that your element would be different.

When I saw your example of 6 videos on a page, I started over from scratch.  Download your .dll, used another video that by chance did not have any spaces in the file name.  It worked😊

Second, I am not able as yet to get “IMAGE” to the full width of the video player.  The image width is noticeably narrower.

So as a solution, I create the video with only in the first frame of the video with a “play” icon, thus it disappears as soon as the video is clicked on and reaches frame 2.

In Properties:

Resizing: Set the width to 100% with “Keep width and height aspect ratio.  

Video:  I select the video mp4 and leave the “Image” setting at the default setting “None”. Select “Default Controls” and leave all oth other boxes blank.

When in page loads, the first frame of the video shows with its video “play” icon.  Your element covers the whole player so when you click anywhere on the image of the video it plays with sound – 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: 19 Dec 2020 at 11:45
Originally posted by Hobby001 Hobby001 wrote:

I took a look at videojs and it runs over html5 standard video tag.  It simply adds javascript code on top of html5 video tag.

The element that I built is also using and is limited to html5 standard video tag.

If you allready have issues with my element it might be caused by your host.

Try the following test:

Download the following file: https://we.tl/t-JJK3ReHpzJ

Unzip the content on your site root directory or any folder of your choice.

Open Movietest.htlml with your favourite browser and come back with the result.

Movietest.html is a plain html file without css nor javascript code.

This should be working on your server ass it works on mine: https://denislafrance.net/videotest/Movietest.html

it is made 7 video tag and 6 different videos

Make sure that your browser is up to date


Edited by Hobby001 - 19 Dec 2020 at 12:05
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: 18 Dec 2020 at 14:52
You may also download the Html5 video element version 3.1, I just made a minor fix on it.


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: 18 Dec 2020 at 14:39
I took a look at videojs and it runs over html5 standard video tag.  It simply adds javascript code on top of html5 video tag.

The element that I built is also using and is limited to html5 standard video tag.

If you allready have issues with my element it might be caused by your host.

Try the following test:

Download the following file: https://we.tl/t-JJK3ReHpzJ

Unzip the content on your site root directory or any folder of your choice.

Open Movietest.htlml with your favourite browser and come back with the result.

Movietest.html is a plain html file without css nor javascript code.
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: 17 Dec 2020 at 14:26
Originally posted by runjay runjay wrote:

I have tryed 
Would the creators of videojs be interested in developing a new element?

videojs creators are not involved with OpenElement's forum as far as I know

Originally posted by runjay runjay wrote:

What skills will I need to learn to help build it?

You need html, js and css knowledge.  You also need to learn how to use OE's element editor but there is no documentation on it.  I went trough that frustrating exercice of taking existing supplemental elements and trying to create some new ones.

Go to this page: https://denislafrance.net/index.en-us.htm

And click on OE Elements


Edited by Hobby001 - 17 Dec 2020 at 14:26
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: 17 Dec 2020 at 13:57
Originally posted by runjay runjay wrote:

I have tryed 
I email the creator on his web site and got no answer.  

There was an issue with the email service on my web site, sorry for that


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.