HTML5 Video gadgets using the open source video.js player

  • 3
  • Idea
  • Updated 4 years ago
  • Not Planned
For those of you interested in using HTML5 for video playback, I have recently updated my Video Gadget and mRSS Video Gadget using the open source video.js player instead of the jwplayer.

Though I do like the the JWPlayer which I use for streaming video, and my previous HTML5 gadget, it seemed to have some sort of memory leak issue or something which would stop video from playing after awhile and so I found it unreliable.

The Video.js player will also use flash in HTML5 video is unavailable.

The main benefit to me is that it runs at almost 50% of the CPU usage than with a flash player, which means I get smooth video playback on low power machines.

I have had this new gadget running non-stop for almost a week, with scheduled off times and a daily reboot and it has been running flawlessly.

If my internet connection slows for whatever reason, I prefer to not display the video if it is loading slowly. This gadget includes a feature which hides the video and mutes the audio if it is less than 70% buffered. I use a background image on the video placeholder with some branding and a loading image for when the video is still being downloaded.

Note:

-Because I have set the video to hide unless 70% or more is buffered you will most likely not see or hear the video the first time it plays

-Volume for this gadget is 0-1 not 0-100. If you'd like 50% volume type 0.5

-I've removed the option to display or hide the control bar, it won't appear

Looking forward to some feedback.

Video Gadget

Video Media RSS Gadget

Bonus

SWF Media RSS Gadget

Enjoy
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb

Posted 6 years ago

  • 3
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Awesome.
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
Thanks Robb,

I noticed recently that the ability for the "Video Item" to play .webm, .ogg, & .ogv files in html5 was removed.

I wonder if you guys would take a look at this gadget and consider using the video.js player vs the jwplayer.

So far I've only this with .mp4 files so not sure if it's perfect but it's definitely worth considering
Photo of jay

jay

  • 162 Points 100 badge 2x thumb
The video Gadget can solve IADEA players video problem?
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
I'll certainly bring it to the Developers attention, and I am going to test this myself with WebM, OGG and OGV. We never really supported those file formats, as we found even though we could play them, it was never reliable. From what you describe above, this is much more reliable. I'm looking forward to testing!

I'll use this to test video on the IAdea Player, and I will let everyone know how it turns out.

Thanks!
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Travis,

I was fooling around with this for a bit this morning, and I noticed that when the first video starts up (in my case a webm), I get the JPWPlayer icon in the bottom left of the screen for a few seconds.

Here's a screenshot: http://screencast.com/t/7LHpiY6Pr0yH

Are you sure this is using the video.js player?
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
Sorry my mistake, if you are using the link I provided for the gadget try refreshing and it should be fixed.
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
If you open the gadget is should say this at the top:

"This gadget uses the open source video.js video player which can be found at www.videojs.com"
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Yes, I can confirm that is at the top now.

Thanks!
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
Very sorry to everyone for the slip up
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
No problem. No need for apologies.
Photo of David Perelman

David Perelman, Champion

  • 2,008 Points 2k badge 2x thumb
Asukuluk,

This is Fantastic! Thank you so much for this!

They better change your status from champ to Risevision GOD!

I'm going to be playing around with this all day.

Thanks again.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
This was working great for me earlier today, but now I can't get it to display anything. I get warning messages about a "video error" in the log in on my Linux box, and no errors on the Windows box, but the Placeholder continues to be blank. I noticed a while ago that if I let it sit on the blank screen for a long time, eventually a video started playing, but I can't remember how long I waited.

Here is the error I am getting in the log: http://screencast.com/t/hHztJ3bS

Regardless, I will bring the video.js player to our Developer's attention when he returns from holiday to see what he thinks.

Thanks!
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
Hi Robb,

That is an error generated by the video.js player itself. If you click on the arrow to expand you can search through to find which source file it is and maybe it will give further detail.

Again, the gadget is designed to hide the content unless it is 70% buffered at the moment, you could easily edit this as I have commented it in the code.

Try opening the network tab in the Chrome toolkit and refresh the page, this might help you see how things are being downloaded or not.

I haven't done any testing on Ubuntu yet but I will shortly.

Hope that helps,

Travis
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Thanks Travis, I'll fool around with it a bit more later.
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
I've now tested this gadget on Ubuntu and can confirm the same issue you are seeing.

It works great on Ubuntu in preview using Google Chrome but the both the Rise player (chromium) and firefox both get blank screens and a Video error

The video.js player itself is compatible with both Chromium and Firefox on Linux so not sure what the conflict is.

Currently working great on Windows 7 - Rise Player
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
I've updated the gadget and so far it's working great on Ubuntu and it even plays on iOS (tested on an iPad).

Apple has disabled the ability to autoplay or preload and requires user interaction.

I found a great iOS kiosk app which claims to cache websites for offline viewing. It doesn't seem to cache video and I've read that caching on iOS devices may be limited to 5MB but it may be great for text, image or RSS interactive presentations.

http://www.mokitouch.com/touch/

I added my iPad as a player by creating a new display and copying the ID.

Then pasting http://rvashow.com.appspot.com/Viewer...= (DISPLAY_ID) into the MokiTouch app.

It still needs some work so any feedback would be greatly appreciated.

https://dl.dropbox.com/u/54744266/Ris...
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
If you're wanting to try Rise Vision on an iPad.

The resolution of a full screen browser on an iPad 3 is supposed to be 1024 x 768
but I found it to be a bit smaller than that.

If your presentation has one full screen placeholder I recommend switching to HTML mode and changing both the presentation and the placeholder to height="100% and width ="100%"
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Nice.

I agree with changing it around so that the Presentation references percentages and not pixels.
Photo of David Perelman

David Perelman, Champion

  • 2,008 Points 2k badge 2x thumb
Hello Asukuluk,

Just a heads up the first html video gadget you created is no longer working. I had it running on presentation and it shows xml error.

Just wanted to let you know.

Regards,
David
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
Sorry about that David,

Use the most recent one it works much better, and I recommend hosting it yourself at the moment if you intend on using it on a public display.

Thanks,

Trav
Photo of David Perelman

David Perelman, Champion

  • 2,008 Points 2k badge 2x thumb
Travis,

No need to worry, to be honest I appreciate all the work and effort you've put into your gadgets!

However, to be honest I like your first html video gadget!

a) I've never had the gadget fail on me once!

b) Vs. your second gadget, there is no play button icon that shows up like in the HTML video 2 gadget.

Was there any specific reason you abandoned the first gadget?

Plus my team, and I have been trying to host the gadget, but we can't seem to get it up an running.

The gadget loads, in WSWG editor,but it doesn't play.

I'm going to take another stab at it today.
Photo of Vincent Luyet

Vincent Luyet

  • 150 Points 100 badge 2x thumb
Hi, I found your gadget today and this is really great !

I juste have an issue, maybe do I it wrong...

- I put the gadget in my placeholder with the first video
- than a second gadget with de seconde video
- etc...

1. Is that right ?

When all the videos were played one time, the place holder doesn't show anything more...

Thank you in advance for your help ;)

Regards,

Vincent
Photo of Asukuluk

Asukuluk

  • 3,272 Points 3k badge 2x thumb
What are you trying to do Vincent?
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Vincent,

Glad to hear you're liking the platform.

It is perfectly fine to add multiple items to a Placeholder. Is it only videos you are adding to this Placeholder?

Can you verify that all your video file names contain no spaces?

Thanks.
Photo of Vincent Luyet

Vincent Luyet

  • 150 Points 100 badge 2x thumb
Hi,

Thanks for the replies.

I try to setup a presentention with two placeholders. One with text on the left and second with videos and images. (the first one described what the second show...)

I try different things :

- videos and images => videos are just showing one time
- only 2 videos => the same issue

I tried also to give specific duration or "play untile done"... I always have the same issue.

The player is running on Windows 7 for information, maybe is it that ?

Sorry for my bad english ;)

Regards

Vincent