Zum Inhalt springen

Play Html 5 Videos on Raspberry Pi

  • von

Update: Check this out: http://www.raspberrypi.org/web-browser-released/

This manual is tested with raspbian, but I got the info it should also run on bodhi linux

#0 If you have already an early version installed

sudo rm -r /opt/media-berry
sudo rm /opt/media-berry/server/media-berry-server

#1 Download Media berry package and dependencies

sudo apt-get install subversion
cd /opt
sudo svn co http://media-berry.googlecode.com/svn/branches/stable media-berry

#2 Setup little Python socket to start the native player (omxplayer)

cd /etc/init.d
sudo ln -s /opt/media-berry/server/media-berry-server media-berry-server
sudo update-rc.d media-berry-server defaults
sudo reboot

#3 Enable Midori Userscripts to replace HTML5 Video Tag. This example is about midori, but there are also other browser supporting userscripts
Open Midori > Menu > Preferences > Extensions
enable „User addons“

mkdir ~/.local/share/midori
mkdir ~/.local/share/midori/scripts
cp /opt/media-berry/userscript/replace_video.user.js ~/.local/share/midori/scripts

#4 Check if it plays a video

open: http://www.w3.org/2010/05/video/mediaevents.html

Et voilá … you will get a play button instead of the orginal video, after clicking omxplayer starts to play the video

You can control the video with q – „quit“ and p – „pause/play“

100 Gedanken zu „Play Html 5 Videos on Raspberry Pi“

  1. Is this possible to link with UZBL rather than Midori? UZBL is a much better browser on the Pi but as everything else does not support HTML5 which I would REALLY like, even if it is a work around such as this. Possible to make another or outline steps to do with that browser? Thanks!

  2. Thanks for the great post. This worked flawlessly. I am trying to use the Raspberry Pi as a display for a TV. The Pi just cycles through some webpages on a TV then it gets to a video page, I couldn’t get it to play HTML5 without lag until I found this. However there will be no one to click on the link to play the video so I was wondering if you could recommend a way to auto play the video when the user goes to the page? I tried using the autoplay tag in HTML5 but to no avail… I have created all of the pages from scratch so if there is a Javascript method you would recommend I can do that but I just wondered if there would be a way in the script that midori uses to make it autoplay? May be wishful thinking but you have already got me way further ahead than where I was.

  3. thanks for your respond. I added an autoplay option to the userscript. Please update your userscript:

    cd /opt/media-berry
    sudo svn update

    replace the user script (#3)
    the video should start to play 🙂

  4. Thanks for the quick reply. It looks like the video is attempting to play, but the page only loaded half way then stopped. The video doesn’t play at all now even If I click on it. Any ideas?

  5. Hi Jonathon, can you provide me the console output from midori (Inspect Element) -> Console. Maybe there is an error output. If it is an public url, this would be also interesting

  6. Well it seems I needed to do a reboot because I did that and it works fine now. The only last thing that would make this perfect is if it didn’t turn everything black after the video is done. This isn’t that big of an issue though as when it goes to the next page after the video page, it clears it out because it is all white. Your help is immensely appreciated. You have saved me a good deal of time and effort.

  7. Tried this out, didn’t have any luck with UZBL. Followed the steps, then copied „@cbind dr = script @scripts_dir/replace_video.user.js“ into the config.

    Then copied „replace_video.user.js“ into „/usr/share/uzbl/examples/data/scripts/“

    Made a simple html file with a .webm (), checked that it ran on my desktop, then shot that over to the Pi but still no video frame or even error, just blank page.

    Any insight to what Im missing would be great, thanks!

  8. @Jonathon yes you are right this would be nice. After a video plays the omxplayer does not clear the screen by default. Maybe there is a workaround to refresh the screen from x-server side.

  9. Hi, I have the same problem as John, even after reboot, the page starts loading but then stops, here is the console output:

    Resource interpreted as Image but transferred with MIME type text/x-cross-domain-policy: „http://r8—sn-8qu-t0as.c.youtube.com/crossdomain.xml“.
    watch:6Resource interpreted as Image but transferred with MIME type text/html: „http://r8—sn-8qu-t0as.c.youtube.com/generate_204?signature=404726BB4E052D236DC865244DD1212C13E69CA6.45F0CA95F1569B8C1C7134B028C1DFE9CA143FF7&algorithm=throttle-factor&burst=40&mt=1363452018&sver=3&id=9f19c3915469062e&sparams=algorithm%2Cburst%2Ccp%2Cfactor%2Cid%2Cip%2Cipbits%2Citag%2Csource%2Cupn%2Cexpire&mv=m&ms=au&key=yt1&factor=1.25&newshard=yes&ip=“.
    watch:404Resource interpreted as Image but transferred with MIME type text/html: „http://www.youtube-nocookie.com/gen_204?attributionpartner=bozemanbiology%2Buser“.
    watch:2252Resource interpreted as Image but transferred with MIME type text/html: „http://www.youtube-nocookie.com/gen_204?attributionpartner=bozemanbiology%2Buser“.
    www-watch-extra-vflQhBSUg.js:422TypeError: ’null‘ is not an object (evaluating ‚a.addEventListener‘)
    watch:52start video: http://www.youtube.com/watch?v=nxnDkVRpBi4&list=PL22FB36EAEA0D2DF0
    localhost:29876/youtube/http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DnxnDkVRpBi4%26list%3DPL22FB36EAEA0D2DF0:1GET http://localhost:29876/youtube/http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DnxnDkVRpBi4%26list%3DPL22FB36EAEA0D2DF0 Cannot connect to destination (localhost)

  10. I am using svn version 47 and i have mix results. the w3.org video is playing fine, except there is no audio on HDMI.

    if i try to run a youtube video this stops the server and if restarts the sever and try a youtube video again i get this message.

    i@raspberrypi /etc/init.d $ sudo ./media-berry-server start
    Starting media-berry-server …
    pi@raspberrypi /etc/init.d $ Traceback (most recent call last):
    File „/opt/media-berry/server/server.py“, line 184, in
    File „/usr/lib/python2.7/subprocess.py“, line 679, in __init__
    errread, errwrite)
    File „/usr/lib/python2.7/subprocess.py“, line 1259, in _execute_child
    raise child_exception
    OSError: [Errno 13] Permission denied

    For any help thanks in advance.

  11. Hello Gabe, can you check if the media-berry server is running:
    ps-aux | grep 29876
    You can try to start the server manually:
    sudo /opt/media-berry/server/media-berry-server start
    Hope that helps

  12. Hello tabularasa, please try to make the script executable. I think by svn update it will loose the permission:
    sudo chmod +x /opt/media-berry/server *.sh
    If it works I will update the manual

    For HDMI output please add „-o hdmi“ to
    /opt/media-berry/server/omxplayer.sh and

    For example:
    /usr/bin/omxplayer -o hdmi „$videoPath“ < "$controlFilePath"

  13. @Jojen

    Many thanks for your support. I did not yet test any hdmi audio – sorry.
    If i try sudo chmod +x /opt/media-berry/server *.sh then i get this

    pi@raspberrypi ~ $ sudo chmod +x /opt/media-berry/server *.sh
    chmod: Zugriff auf „*.sh“ nicht möglich: Datei oder Verzeichnis nicht gefunden
    pi@raspberrypi ~ $

    (It says access to „*.sh“ denied, File or Path/Directory can’t be found.)

    So i chgmod any file i could catch manually and after this the server keeps running and html 5 videos are played fine, but no youtube videos. I spend endless time using version 46, 45, … but no youtube.
    In youtube everything seems fine, the omxplayer starts but immediately stops.

    This is the last line of /opt/omxplayer.log

    00:00:00 T:0 ERROR: COMXCoreComponent::DecoderEventHandler OMX.broadcom.audio_mixer – OMX_ErrorPortUnpopulated port 0, cannot parse input stream

    What should i try next? Which svn version is more stable?

  14. It tells me that the server is running:
    pi@raspberrypi ~ $ sudo /opt/media-berry/server/media-berry-server start
    media-berry-server is already running

    and after I tried watching a youtube video, I tried restarting the server and got something similar to tabularasa:

    pi@raspberrypi ~ $ sudo /opt/media-berry/server/media-berry-server start
    Starting media-berry-server …
    pi@raspberrypi ~ $ Traceback (most recent call last):
    File „/opt/media-berry/server/server.py“, line 102, in
    File „/usr/lib/python2.7/socket.py“, line 224, in meth
    return getattr(self._sock,name)(*args)
    socket.error: [Errno 98] Address already in use

    I tried your command but apparently there are no .sh files:
    pi@raspberrypi ~ $ sudo chmod +x /opt/media-berry/server *.sh
    chmod: cannot access `*.sh‘: No such file or directory

  15. I don’t know if you have tried this:
    I am running ubuntu on my PC and use youtube-dl all the time.

    Sometimes I have to run „youtube-dl -U“ a couple of times to get the latest SVN version which has a large number of bugfixes.

    Don’t know if this is the case on the Pi version, give it a go and see if it fixes the „it doesn’t work for me“ errors.


  16. Hello tabularasa,
    in my last comment there was one space to much. sorry. please try to do
    sudo chmod +x /opt/media-berry/server/*.sh
    and restart the server after:
    sudo /etc/init.d/media-berry-server stop
    5s pause
    sudo /etc/init.d/media-berry-server stop

  17. Hello,

    First, thanks for this cool post.

    Is it possible to play the video in a windowed mode instead of fullscreen? I would like to display a web page with an hd-ready video in it played by omxplayer to benefit from gpu.

    So, it will be great if I can autoplay the video + specify the top-left-width-height coordinates.

    Any ideas?


  18. Hi Nick,
    yes this would be nice, but at the moment it is not supported by the omxplayer.
    If anyone knows more … please feel free to post.

  19. Hi Jojen,

    Thanks for such a manual! However, I’m quite the amateur and got lost in #3… I’v activated „User addons“ and opened the sidepanel, but cannot (don’t know) how/where to ad the command!?!?? Ive got some options; such as „pi“ or „File system“, but cannot add anything nor do I understand where.

    Very thankful for some additional help!!!

    Best Regards

    Ps. Wish you a Happy Easter holliday! 😀

  20. Hello Johan,
    on the bottom of the side panel there is an icon for usersscripts.
    There you can add the user script from the media-berry package.

    Best regards 🙂

  21. Hello Jojen,

    thanks for this tutorial it looks very interesting, but unfortunately doesnt work for me. I tried to use some tips from your comments but it doesnt help too…

    Can you help me please?

    There is trackback after clicking on video element:

    pi@raspberrypi /opt/media-berry $ sudo /etc/init.d/media-berry-server start
    Starting media-berry-server …

    pi@raspberrypi /opt/media-berry $ Traceback (most recent call last):
    File „/opt/media-berry/server/server.py“, line 98, in
    subprocess.Popen([„/usr/bin/omxgtk“,“–windows“, url])
    File „/usr/lib/python2.7/subprocess.py“, line 679, in __init__
    errread, errwrite)
    File „/usr/lib/python2.7/subprocess.py“, line 1259, in _execute_child
    raise child_exception
    OSError: [Errno 2] No such file or directory

  22. I see omxgtk is not instlled on the official image
    whan i change the server.py to use omxplayer instead it works…

  23. Hi Jan,
    i did some tests with a window mode for the omxplayer. Now there is a stable branch, and I updated the manual. It should work now.

  24. Hello Jojen!
    http://www.w3.org/2010/05/video/mediaevents.html is working. Youtube and other sites does not work. Tell me please, what could be wrong? Version 54. In the server.log –
    Start listening for video urls on host ‚‘ and port ‚29876‘ …
    Opening url ‚http://media.w3.org/2010/05/sintel/trailer.mp4‘ in omxplayer …
    Sending key code ‚q‘ to omxplayer …
    Stopping omxplayer …
    that is All good, but where but where the opening YouTube and other sites? Please help me

  25. Thank you so much for doing this, at the moment mine plays the HTML 5 test site, but not youtube (my best guess due to browser being detected as unsupported) my scripts are +x . but still HTML 5 on a Pi – nice 😉

  26. Jojen,
    I just setup my Raspberry Pi and have literally never touched anything related to Linux before. Your simple instructions made getting this element very simple. Thanks for taking the time and sharing.

  27. Hi Jojen,
    I must have screwed something up. The video on the W3 page plays fine, but I can’t seem to get the YouTube videos to work. Thoughts?

  28. Jon , I suspect the problem is you get plugin missiong?
    you shuld make youtube believe your brwsr supports html5
    see manual

  29. The idea is nice however if someone knows or has an idea how to emulate

    or simulate rigth arrow? i don’t want to change the src an
    \x1b\x5b\x43 codes don’t seem to work

  30. Hello all,
    thanks for your interesting in this video project. I recognized … youtube is not working anymore. I suppose there is an transportation problem of the youtube link. This component uses youtube-dl. If you have installed it you can start youtube videos via console: omxplayer $(youtube-dl -g http://www.youtube.com/watch?v=c6pcRR5Uy6w)
    Currently I’m working on the window mode, Nick has requested. An early version is working in trunk, but I have to do some tests bevor porting this to stable. Youtube will be the next step..

  31. Hi Shay,
    Thanks for the reply. I thought that was it earlier too, but I did add the plugin on the browser. Seems as Jojen notes that some other issue is happening now. I’m sure you smarter heads will prevail. God knows I’m outside of my ken.

  32. Jojen:

    Thank you very much for a crystal clear and very helpful explanation. I have followed your steps faithfully, and get the „play“ arrow on the w3 site, just as shown on your screenshot. However, nothing happens when I click on the play arrow. I have confirmed that media-berry-server is running. Could you advise where to go from here to troubleshoot, please?

    Thank you

  33. W3 site working but youtube doesn’t work, found out after reading most reply that it is known by now, please update the head section with currect status, could have saved a bit of time (esp for a linux newbie like me). Any ETA on possible fixes?

  34. i am running mine on a tv and it keep givig me this:
    update-rc.d: error: unable to read /etc/init.d/media-berry-server

  35. Hi,

    Got console mode working. Thanks for the great help!
    Just adding -o hdmi to get sound was not helpful, some googling suggested to also add -r and with that option it played the sound as well.

  36. Hi Jojen,

    Please delete my previous comments, they are wrong and will just confuse people.

    Like many others, I have the w3 test site working, but most other sites do not work. The server.log file shows that the video file name is not resolved. I downloaded some videos, crafted my own html and messed around with the html a bit. Here is my conclusion:

    The apparent reason why the file name is not getting resolved, is because something in this software stack (Midori?) does not like specifying the video file name (attribute src) as an attribute of the html video element. It likes src as an attribute of a source element within the video element. The html specification says that src can be an attribute of video if there is only one source, but if there are more than one, then specify them in source elements. (The W3 test site supports mp4, ogg and webm, three separate sources, this way.) Here are examples where I have replaced the brackets around elements (normally less than and greater than…but WordPress gets confused with that) with { and }.

    What does not work for us but works elsewhere and conforms to the html5 spec:

    controls preload=whatever
    {p}Error message for video unsupported.{/p}

    What works here and in other html5 environments (and is the syntax used on the W3 test site):

    controls preload=whatever}
    {p}Error message for video unsupported.{/p}

    If I am correct, this is not Jojen’s problem, but a community problem. However, Jojen’s solution will not work well until this problem gets resolved. (It will work for me, because I am working with various people supplying offline educational servers to remote areas. I can control the html that they use. THANK YOU, JOJEN.)


  37. Thanks for the update on the video elements and attributes. The educational project I am working with is PoweringPotential (www.poweringpotential.org). The video content we are using is Rachel-Pi (www.worldpossible.org) and we are hoping to include the new Khan Academy offering, KA-Lite as well. One of the big features of KA-Lite is sub-titles. I have not gotten far enough to test that with RPi and your exits, but I have a bad feeling. If you are interested in conversing further, perhaps you could email me.

    A colleague of mine (Denis) found you can eliminate the black screen after omxplayer finishes if you edit /usr/bin/omxplayer by inserting the „exit 0“ as shown below:

    exit 0
    if [ -e $FBSET ]; then

  38. For newbies reading my edit to /usr/bin/omxplayer, just insert the „exit 0“. Do not break the previous line as shown, it only appears that way here because the text width here is too narrow for it to fit on one line.

  39. Hi Jojen,

    Have you tried putting subtitles into this? It is part of the html5 video specification. I see in the help for omxplayer that it does support subtitles, but I don’t know about streaming them. PoweringPotential is excited about KA-Lite (http://kalitewiki.learningequality.org/home) partly because it has subtitles and some of the students would understand the Khan Academy teachers better with subtitles. Also KA-Lite has subtitles in lots of languages other than English.


  40. Hi Manny,
    that’s a good issue. I will take a look at it. But the next weeks I will travel from germany to nepal by train, so my time to work on the project will be restricted 😉


  41. Hi!

    This script is really nice, but I’m having some problems with commands. As soon as I send a command (like ‚q‘) the log just shows „Sending key code ‘q’ to omxplayer …“ and then nothing more. The server.py seems to hang during the system call to omxplayer and stops working until I manually kill it (and the control file process) and restart the service. Just playing a video from beginning to end works fine. Im running the latest Raspbian on a model B Pi. Any ideas?


  42. Hi Eric, yes I know the commands works not 100 % perfect. But I think there is no perfect way to solve it. Maybe you can take a look at the trunk, there is a draft version of a window mode of the video, you need to install an additional package (more on the top of the comments). My time is very limited, because currently i’m traveling from mongolia to nepal. Hops that helps.
    Regards Jochen

  43. Hi Jojen,

    I was wondering is the windows mode still work? I tried and it come out fullscreen. How do I enable windows mode?


  44. Hi Jojen,
    I just checked and found that the new omxplayer uses a different windows command. The command is –win „x1 y1 x2 y2“.
    I tried testing it in the omxplayer.sh file but the display go to screen 1 (not the graphic screen 7).
    Any clue on how can I pass the position parameters to the parameter to show on the graphic screen?
    Many thanks,

  45. Hi Valentino, yes some versions ago this worked, but there have be some changes to the omxplayer, youtube-dl and youtube. My time to work on his project is very limited. Maybe someone out there can also help. This is released free and open source!

  46. Hello. it will not work. #2 step 2. The computer says ln: failed to create symbolic link `media-berry-server`: File exists. What should i do ????

  47. Hello Simon, i think you already created the symbolic link. If you start at #0 (sudo rm -r /opt/media-berry) This should solve your problem

  48. Hi Jojen,
    Is there anyway to get the video playing in loop? I used the loop in html5 but it still only play once.

  49. Hello Simon, at the moment loops are not supported. maybe in one of the next versions. If you need to play only loops you can try to edit the python server file.

  50. Hello I have no trouble playing the sample video but when I goto youtube for eg it only says missing plug in,]; will not execute the python code like it will on the sample page? I have tried several times on fresh raspians am I missing something a checked box or something?

  51. What’s Going down i’m new to this, I stumbled upon this I’ve discovered It absolutely helpful and it has aided me out loads.
    I hope to contribute & aid different users like its aided me.
    Good job.

  52. You can play youtube videos using omxplayer by updating the user script file replace_video_user.js as below:

    Replace jQ(„#watch7-player“) with jQ(„#player-api“). Seems like youtube has changed the id of their div tag that holds the main video.

    There’s a problem however. After playing the main video, if you try to visit one of the related clips through the link on the sidebar at the right, the previous video will be player. This probably has to do with Javascript variable lifetime in the user script. I haven’t had the time to look into it, but when and if I do I’ll post the updated script.

    Hope this helps.

  53. any way not to use python in the whole proccess and continue using linux all the way through python has troubles on my pi

  54. Hi,

    I love this idea, but I followed all your steps faithfully, and got absolutely nothing. Not even a ‚play‘ button :(. When I load up that URL on midori I get nothing but a black rectangle, same as if I had done none of this.

    You mentioned a media-berry log above but I couldn’t see where the log was?


  55. Hello Arie,
    if you don’t get the play button. This seems to be connected with the userscript. Can you make sure the userscripts are enabled in configuration of your browser (midori) and you can also try to import this userscript manually. Hope that helps.

  56. I think in jQuery there is also the possibility to react on change events. Please take a look at the jQuery doc. Ajax pages sounds like custom code 😉

  57. sudo apt-get install subversion
    Reading package lists… Done
    Building dependency tree
    Reading state information… Done
    The following extra packages will be installed:
    libapr1 libaprutil1 libneon27-gnutls libserf1 libsvn1
    Suggested packages:
    subversion-tools db5.1-util
    The following NEW packages will be installed:
    libapr1 libaprutil1 libneon27-gnutls libserf1 libsvn1 subversion
    0 upgraded, 6 newly installed, 0 to remove and 0 not upgraded.
    Need to get 90.4 kB/2,630 kB of archives.
    After this operation, 7,022 kB of additional disk space will be used.
    Do you want to continue [Y/n]? Y
    Err http://mirrordirector.raspbian.org/raspbian/ wheezy/main libapr1 armhf 1.4.6-3
    404 Not Found
    Failed to fetch http://mirrordirector.raspbian.org/raspbian/pool/main/a/apr/libapr1_1.4.6-3_armhf.deb 404 Not Found
    E: Unable to fetch some archives, maybe run apt-get update or try with –fix-missing?

    it keeps on having this response said want to continue i said yes it said

    Err http://mirrordirector.raspbian.org/raspbian/ wheezy/main libapr1 armhf 1.4.6-3
    404 Not Found
    Failed to fetch http://mirrordirector.raspbian.org/raspbian/pool/main/a/apr/libapr1_1.4.6-3_armhf.deb 404 Not Found
    E: Unable to fetch some archives, maybe run apt-get update or try with –fix-missing?

  58. Hello Conley,
    it seems there is an error at the raspbian archive. I think this is only a temporary error. So if you try again maybe it works.

  59. Hey there,

    Is there a way to place the video in a portion of the screen, I need that the rest of the web page shows while the omxplayer floats above the frame the webplayer is suppossed to be and plus is there a way it autoplays (like playing and streaming).

    thanks in advance and thanks for the scripting.

  60. Thank you for this post. It has helped me tremendously.

    I am pretty new to linux. Is there a simple piece of code that will allow the audio jack to override the hdmi when it is plugged in? I am building a computer lab and changing the .sh files every time I want to switch from th hdmi to the audio jack would be a pain.

  61. It should be possible to add a check box next to the play button in the user script. So the user can choose between HDMI and audio jack. An auto recognition would be nice, but I don’t know if something like this exists. With a bit knowledge in JavaScript and rude python knowledge maybe this is an alternative.

  62. Hi

    I am just nee to using the pi as I was told I could get i player and youtube through my tv however this is not the case. Bbc iplayer keeps sayin needs flash player and you tube goes to play the video however does not work at all. Sooo confused need help.

  63. Hi Michelle, unfortunately there are often changes at youtube, so it took a lot of time in maintenance. You can take a look at the newest version of youtube-dl. Maybe that helps 🙂

  64. Hi,

    Great post, thanks!
    Just one question: do you think it’d be possible to embed the video on the page directly instead of fullscreen?


  65. Hello.

    Is it possible to somehow get callback if video is finished or omxplayer exits? Im buliding video signage system and if video is finished I need to load next page.

  66. Hello, The Python Server (Server.py) starts The omxplayer via script. So theoretically the server should be able to know when omxplayer is finished. If you build a custom way where to go next and your browser supports this to open a new webpage maybe in the same tab it can fit your requirements.

  67. You just shoud add the –win x1 y1 x2 y2. inside the script.

    the command in my script looks like this: omxplayer -o hdmi –win 395 70 1880 843

    I did it to have the video floating above a page with jquery, twitter and yahoo weather add-ons plus playing a http stream broadcasted with VLc from a server (youtube codecs are the faves of omxplayer). everything fit in place.

    now I need to make omxplayer to run again if the video stops, it seems like omxplayer gets tired after a couple of hours playing the stream. anyone out there knows how to automatically relaunch omxplayer without reboot? perhaps reloading the page or calling back omxplayer from the py server if omxplayer exits? THX a lot

Die Kommentarfunktion ist deaktiviert.