gkreidl
Posts: 6119
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Howto: Play Web Video from any Browser with omxplayerGUI

Fri Sep 22, 2017 3:09 pm

Note: There are already a number of threads about this topic, but special to certain browser or describing methods which require additional software or plugins etc. This new method is very simple and will work in almost any browser. I've successfully tested it with Firefox, Chromium and Midori. It will work on both Raspbian Jessie and Stretch.

What's this all about:
Whenever you are not happy with web video performance within your browser, you just click a (newly created) bookmark button in your browser toolbar and a few (2 - 3 on a RPi 3) seconds later an omxplayerGUI video window will open and play the video in high quality without any lagging and using very low resources.

What you need:
You have to install the kweb suite (either for Jessie or Stretch) which includes omxplayerGUI and all the other bits and pieces we'll need for this.
You also need a full installation of youtube-dl, but this will be installed during the installation of the kweb suite.
If you have already installed the kweb suite, update to the latest version (using the button on kweb's menu page).

Configuring your browser:
You have to add a bookmark which should appear as a button in the browser toolbar. In Firefox and Chromium this is in the “Bookmarks Toolbar” section. In Midori you have to enable “Show in toolbar” in the “Add Bookmark” form.

A new Bookmark requires a title and an URL. As title use something like “Play Video” or “omxplayerGUI” or whatever you like. In the URL field enter the following (one line):

Code: Select all

javascript:(function(){var%20target_url=window.location.href;var%20ytsvr="http://localhost:9192/play?url=";var%20final=ytsvr.concat(encodeURIComponent(target_url));var%20myWindow=window.open(final,'_top')})();
A new button with the title you have chosen should now appear in the browser toolbar.

How to use it:
Whenever you decide to use the new button, you have to start omxplayerGUI (the frontend) first from the application menu and let it run in the background as long as you want to use it. Now you can navigate to any kind of video page and click the new toolbar button to play the video with omxplayerGUI (it will use the already running instance and not start a new player). In the browser tab you will see something like this:
webv2.png
webv2.png (12.38 KiB) Viewed 17901 times
I know that some people would prefer to stay on the original video page instead (and in fact there is a method that does it), but there are a lot of advantages using this method: the browser will stop buffering and playing the video inside the browser window and all the Javascript crap running in the background and eating resources will be stopped.

To return to the original video page after watching the video with omxplayerGUI, click the “Go Back” button.

Additional Notes:
This works for all websites supported by youtube-dl ( http://rg3.github.io/youtube-dl/supportedsites.html ) and for web pages containing simple HTML5 video. As the websites are always changing, you have to update youtube-dl regularly (There's a button on kweb's application page).

This doesn't work for web pages which contain embedded (youtube, vimeo etc.) web video. You have to go to the original video web page first (which is offered as an option by the embedded player).

youtube-dl also supports youtube search results, playlists and channels, but this will take some time (up to a minute). The frontend window of omxplayerGUI will appear frozen during this time. You will simply need some patience. The resulting video window of omxplayerGUI will contain all the videos from the search list and will start playing the first one. If you stop the video you will see the playlist containing all titles. Each one can be played immediately.

How it works (for the more technically minded):
If you start omxplayerGUI from the application menu, it will not only open the player's frontend, but also run the youtube-dl-server in the background (in an embedded mode in version 1.7.9.5 or newer). This is a small specialized web server, which can do a number of things:
1) Control and run youtube-dl and its hundreds of modules in the background (much faster access than using the command line version). Youtube-dl is used to extract the video URL(s) from a web page for direct playing.
2) Send messages to omxplayerGUI (to play something, for example).
3) Display simple web pages like the one you are redirected to when you use the "Play Video" function explained above.

There's even more to it: You can use it to browse you local media files, play any file by just clicking on it, create playlists (ordered or shuffled) on the fly etc. Check the omxplayerGUI manual for more details.
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

gkreidl
Posts: 6119
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Mon Nov 19, 2018 3:00 am

If you install my latest kweb hotfix ( viewtopic.php?f=66&t=40860&start=1450#p1392789 ) you can also use the new hardware accelerated version of VLC instead of omxplayerGUI to display web video.
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

samoud
Posts: 13
Joined: Thu May 03, 2018 10:05 pm

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat May 25, 2019 12:17 am

Hello,

Thanks for all the work you've done. I have a question how can I use omxplayergui to play a local video from an electron app ?

gkreidl
Posts: 6119
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat May 25, 2019 6:26 am

samoud wrote:
Sat May 25, 2019 12:17 am
Hello,

Thanks for all the work you've done. I have a question how can I use omxplayergui to play a local video from an electron app ?
The ytdl-server must be running (standalone might be better for your case). If you have a local video like
/home/pi/myvideo.mkv
it can be played with the following URL:
http://localhost:9192/dplay?url=%2Fhome ... yvideo.mkv
If the file name contains spaces they have to be escaped by %20.
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

samoud
Posts: 13
Joined: Thu May 03, 2018 10:05 pm

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat May 25, 2019 9:56 am

Thanks to you I can display the video. but it's always above the web page.

What I want to do if to make the video below the webpage (that have transparent area) to make an overlay.
something like this for example : https://i.ytimg.com/vi/sKyZuGWLU6Q/maxresdefault.jpg

gkreidl
Posts: 6119
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat May 25, 2019 10:58 am

samoud wrote:
Sat May 25, 2019 9:56 am
Thanks to you I can display the video. but it's always above the web page.

What I want to do if to make the video below the webpage (that have transparent area) to make an overlay.
something like this for example : https://i.ytimg.com/vi/sKyZuGWLU6Q/maxresdefault.jpg
This can also be done but requires special settings. Read the developer's section of the omxplayerGUI manual, starting on page 36.
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

samoud
Posts: 13
Joined: Thu May 03, 2018 10:05 pm

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat May 25, 2019 11:06 am

Yes that's I tried but the video stay always on top.

index.html

Code: Select all

<div style="width:100%;height:50%;background:#F00;color:#FF0000;position:relative;z-index:100;">TOTO</div>

<iframe src="http://localhost:9192/dplay?url=%2Fapp%2F1557013221510.mp4&omxoptions=--loop;--layer;-127;--win;0,0,1000,1000;stop" width="0" height="0" name="video"></iframe>
and my start.sh

Code: Select all

bgstart_ytdl_server.sh &
NODE_ENV='production' startx /app/node_modules/electron/dist/electron --no-sandbox --enable-logging /app/

gkreidl
Posts: 6119
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat May 25, 2019 11:22 am

samoud wrote:
Sat May 25, 2019 11:06 am
Yes that's I tried but the video stay always on top.

index.html

Code: Select all

<div style="width:100%;height:50%;background:#F00;color:#FF0000;position:relative;z-index:100;">TOTO</div>

<iframe src="http://localhost:9192/dplay?url=%2Fapp%2F1557013221510.mp4&omxoptions=--loop;--layer;-127;--win;0,0,1000,1000;stop" width="0" height="0" name="video"></iframe>
and my start.sh

Code: Select all

bgstart_ytdl_server.sh &
NODE_ENV='production' startx /app/node_modules/electron/dist/electron --no-sandbox --enable-logging /app/
I'm beginning to understand. You want to run the omxplayer output behind your (more or less transparent) application running in the frame buffer. I don't think that this is possible with omxplayer.
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

samoud
Posts: 13
Joined: Thu May 03, 2018 10:05 pm

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat May 25, 2019 11:26 am

Yes that's the idea.

I have to go with QT then ? look at this video : https://www.youtube.com/watch?v=6jSQh84apgw

milkbot200
Posts: 1
Joined: Sun Aug 11, 2019 5:59 pm

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sat Aug 31, 2019 4:40 pm

When I try to open omxplayerGUI nothing happens. Do you know why this could be?

gkreidl
Posts: 6119
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sun Sep 01, 2019 6:10 am

milkbot200 wrote:
Sat Aug 31, 2019 4:40 pm
When I try to open omxplayerGUI nothing happens. Do you know why this could be?
No.
Which OS, which RPi board, which version of the kweb suite?
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

ProDigit
Posts: 374
Joined: Tue Aug 30, 2011 1:24 am

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sun Sep 01, 2019 9:41 am

The only pi I own, that has issues with streaming YouTube, is the pi zero. The rest do 720p or below just fine. The 3B+ does 1080 just fine as well.

gkreidl
Posts: 6119
Joined: Thu Jan 26, 2012 1:07 pm
Location: Germany

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sun Sep 01, 2019 10:11 am

ProDigit wrote:
Sun Sep 01, 2019 9:41 am
The only pi I own, that has issues with streaming YouTube, is the pi zero. The rest do 720p or below just fine. The 3B+ does 1080 just fine as well.
This is simply wrong. Just watch a youtube movie at full screen in chromium with a fast moving camera and you'll see the "tearing".
Although VLC is much more efficient, it still has a lot of lost frames (maximized screen) for HD stuff, as long as you don't switch to full screen mode (using the X11-MMAL-Splitter). Only the RPi 4 is fast enough (faster memory access, I suppose) to avoid lost frames inside a VLC window.

Some people simply can't see the difference.
Minimal Kiosk Browser (kweb)
Slim, fast webkit browser with support for audio+video+playlists+youtube+pdf+download
Optional fullscreen kiosk mode and command interface for embedded applications
Includes omxplayerGUI, an X front end for omxplayer

ProDigit
Posts: 374
Joined: Tue Aug 30, 2011 1:24 am

Re: Howto: Play Web Video from any Browser with omxplayerGUI

Sun Sep 01, 2019 12:49 pm

gkreidl wrote:
Sun Sep 01, 2019 10:11 am
ProDigit wrote:
Sun Sep 01, 2019 9:41 am
The only pi I own, that has issues with streaming YouTube, is the pi zero. The rest do 720p or below just fine. The 3B+ does 1080 just fine as well.
This is simply wrong. Just watch a youtube movie at full screen in chromium with a fast moving camera and you'll see the "tearing".
Although VLC is much more efficient, it still has a lot of lost frames (maximized screen) for HD stuff, as long as you don't switch to full screen mode (using the X11-MMAL-Splitter). Only the RPi 4 is fast enough (faster memory access, I suppose) to avoid lost frames inside a VLC window.

Some people simply can't see the difference.
I think VLC works well with OpenGL enabled.
I don't really notice any screen tearing, but I haven't specifically looked for it either.

Return to “Raspbian”