Print Page | Close Window

upgrade HTML 5 Video element with Videojs

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=1781
Printed Date: Mar 29 2024 at 10:15am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: upgrade HTML 5 Video element with Videojs
Posted By: runjay
Subject: upgrade HTML 5 Video element with Videojs
Date Posted: Dec 15 2020 at 7:38pm

https://videojs.com/" rel="nofollow - https://videojs.com/ is an open-source video player that could be an excellent update for the current HTML 5 Video element.  Would someone far more knowledgeable than I please look into the videojs code and see if it can used be use to create an openElement MEDIA element?

The current HTML 5 Video element is so out of date that you have to scroll down to the bottom left hand corner of the player to click on a small play icon.  It lacks the standard play button that you see on YouTube videos. Videojs looks like it has all the latest upgrades, capability to change skins and extensive code to play on numerous browsers.

Thanks !

 




Replies:
Posted By: Hobby001
Date Posted: Dec 15 2020 at 10:57pm
Using javascript when HTML5 standard propose a clean video interface isn't the best idea.

Try using this one:   https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm" rel="nofollow - https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm

This is pure HTML5


-------------
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: Dec 15 2020 at 10:58pm
On the other hand, developping a new element with video.js takes some time.

-------------
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: Dec 17 2020 at 8:17am
I have tryed 
https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm
and spend days of frustration.
I could not get it to work for more than three vidoes in a project before it stops working.  I email the creator on his web site and got no answer.  
  I have over a hundred children's videos that need to be easily used by 5 year olds, like the current youTube player. youTube is not an option because it takes the students off the web site ditracting them with numerous off site video suggestion.
As HTML 5  video is a major part of web sites, it will be a valueable addition to upgrade the current openElement HTML 5 Video element. So it is worth the time.
Would the creators of videojs be interested in developing a new element?
What skills will I need to learn to help build it?


Posted By: Hobby001
Date Posted: Dec 17 2020 at 12:43pm
Can you give us a link to a page where the videos does not work?

-------------
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: Dec 17 2020 at 12:54pm
On this page, I can run 6 videos without any issues

I copied and renamed the same video so they are different video files.

https://www.denislafrance.net/pagetest.htm" rel="nofollow - https://www.denislafrance.net/pagetest.htm


-------------
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: Dec 17 2020 at 12:57pm
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




-------------
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: Dec 17 2020 at 1:26pm
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" rel="nofollow - https://denislafrance.net/index.en-us.htm

And click on OE Elements


-------------
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: Dec 18 2020 at 1:39pm
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" rel="nofollow - 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.


-------------
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: Dec 18 2020 at 1:52pm
You may also download the https://denislafrance.net/Element/ResponsiveHTML5Video.en-us.htm" rel="nofollow - Html5 video element version 3.1 , I just made a minor fix on it.




-------------
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: Dec 19 2020 at 10:45am
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" rel="nofollow - 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" rel="nofollow - 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


-------------
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: Dec 19 2020 at 11:04pm

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!!!!!!!!!!!

 

 



Posted By: Hobby001
Date Posted: Dec 20 2020 at 11:33am
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?

https://zupimages.net/viewer.php?id=20/51/rtea.jpg" rel="nofollow">

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.



-------------
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: Dec 20 2020 at 3:31pm
Following this discussion, I added invalid file name with white space warning to the 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


Posted By: runjay
Date Posted: Dec 22 2020 at 1:02am

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

 



Posted By: Hobby001
Date Posted: Dec 22 2020 at 11:33am
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.



-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net