Video for Everybody!

So I’ve added in the Video for Everybody HTML code block for graceful JavaScript fallback. JavaScript is used to detect if there are enough capabilities of the browser to support the custom JavaScript HTML5 video controls, but JavaScript is not required.

Grab it while it is hot!
http://universvideo.braydon.com/wp-univers-0.2.tar.gz
http://universvideo.braydon.com/wp-univers-0.2.zip

65 Responses to “Video for Everybody!”

  1. mark says:

    Can you explain a bit how this works? Why would you need custom javascript html5 controls.. Cant you play without the javascript? I would love to talk to you about this idea and this plugin to see if you would be interested in creating a custom plugin for me. You can see that on our site, we talk alot about video and HTML 5 and open video – reelseo.com/tag/html5 So it is of huge interest to me. Thanks again.

  2. @mark

    Why would you need custom javascript html5 controls.. Cant you play without the javascript?

    So the video controls are the same ~95% of the time; in all browsers, and also identical to the Flash version of the controls.

    Can you explain a bit how this works?

    1. If JavaScript is not run and the browser supports HTML5 Video, then it will play using the default player controls for the browser.

    2. If JavaScript is run, and the browser supports HTML5 video, and the browser supports the needed JavaScript API for the video element, then it will replace the browsers default controls with the custom one.

    3. If the browser has the Flash plugin installed but doesn’t support HTML5 video, then the Flash player will be used irregardless if JavaScript does or does not run.

    4. If the browser doesn’t have the Flash plugin and does not support HTML5 video, but has another video plugin (Quicktime, Windows Media Player, Totem or Mplayer), then it will play using the plugin’s default interface. This will happen if JavaScript is run, or if it isn’t.

  3. Christiaan says:

    Hi Mark, hey thanks for adding support for ‘Video for Everybody’ so quickly!

    When I activated the plugin, however, I got these errors coming up:
    Warning: chdir() [function.chdir]: No such file or directory (errno 2) in /domaindirectorywp-content/plugins/univers/univers.php on line 24

    Warning: mkdir() [function.mkdir]: File exists in /domaindirectory/wp-content/plugins/univers/univers.php on line 25

    Warning: chdir() [function.chdir]: No such file or directory (errno 2) in /domaindirectory/wp-content/plugins/univers/univers.php on line 24

    Warning: mkdir() [function.mkdir]: File exists in /domaindirectory/wp-content/plugins/univers/univers.php on line 25

    Warning: touch() [function.touch]: Unable to create file /home/brgg6746/public_html/last-straw/wp-content/video/running because No such file or directory in /domaindirectory/wp-content/plugins/univers/univers.php on line 30

    Warning: touch() [function.touch]: Unable to create file /home/brgg6746/public_html/last-straw/wp-content/video/queue because No such file or directory in /domaindirectory/wp-content/plugins/univers/univers.php on line 34

  4. Christiaan says:

    Hey also, fancy offering a version that doesn’t include the video encoding? For those of us who are happy encoding the video ourselves.

  5. @ Christiaan,

    /domaindirectory/ should be the full path to the location of your wp directory….. You will also need a directory in wp-content called video and it should be writable by the webserver. The video files are put here, as well as some files used for processing the video, a queue and running file.

    A preference to turn off video encoding I think would be a good idea, and would actually be a good default state, as setting up the video encoding can be quite a process, depending on the server. However the player depends on both a mp4 and ogg video file…. perhaps if only one of the two is available it drops support for the other but will still work. If an ogg is supplied it will work in Firefox 3.5, etc. If a mp4 is supplied, it will work in Safari, Flash, etc. Would this be something you would want to work on developing? Otherwise I can work in it. Either way, let’s get in contact.

  6. Christiaan says:

    Hi Braydon, first of all, apologies for calling you Mark! Slight confusion there. Thanks for responding so quick.

    Adding the video directory solved my problem, thanks.

    The difficulty in setting up the video encoding is exactly the reason I’d like a preference to turn it off. Encoding video is reasonably easy with Handbrake: http://handbrake.fr/

    With regard to the player depending on both mp4 and ogg files, it would be great if you could keep it this way otherwise people using only one file would break the whole “Video for Everybody” idea.

    Perhaps you could devise an interface that requires the two video files to be present before you can publish a video using Univers?

    I’m not a developer sorry so I’m unlikely to be able to help you out in any useful way.

    You could maybe provide links to instructions for encoding on video too. Kroc Carmen did have some instructions on his Video for Everybody page at first but he’s starting replacing them with links to other pages:
    http://camendesign.com/code/video_for_everybody#video-encode

    See also:
    http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

  7. Braydon Fuller says:

    @ Christiaan

    No worries, and glad to hear adding the video directory worked.

    I’ve also been asked to have custom poster upload, so what might be a good idea would be to have the option to either upload a source file to be automatically converted, or to upload each resource separately, or to be able to replace the automatically converted version with a manually done one. I’ll see what I can do, I need to look at how WordPress handles doing uploads from a plug-in.

  8. Christiaan says:

    Fantastic, look forward to seeing what you come up with.

  9. mysoogal says:

    Video for Everybody!

    after I active plug-in, where is the settings ? I can not find them anywhere and documentary is limited how to use this,

    can you do a screen cast tutorial please

    thank you

  10. mysoogal says:

    what is this

    The video is currently in the queue to be processed. Please try viewing again later…

    i have ffmpeg installed and flv2tools and newest wordpress system

  11. Braydon Fuller says:

    @mysoogal

    Make sure that the directory wp-content/video in writable by your webserver. I usually do this by:

    $ chown -R www-data:www-data wp-content/video

    There should be a .lck file created in that directory when the video proccessing que is running

  12. Braydon Fuller says:

    @mysoogal

    There currently isn’t a settings page for the plugin, to change the setting currently you have to modify the source code….

  13. Braydon Fuller says:

    @mysoogal

    A screen cast is a good idea, at some point I would like to have one.

  14. mysoogal says:

    thanks for that but i see this thing on upload

    : Division by zero in /var/www/wp-content/plugins/univers/univers.php on line 225

    Warning: Division by zero in /var/www/wp-content/plugins/univers/univers.php on line

    inside i see .lck but i also check the file chmod

    /var/www/wp-content/video inside here is www-data is this right it looks like files are locked

    after waiting 5 times i refresh

    i get this

    Warning: Division by zero in /var/www/wp-content/plugins/univers/univers.php on line 225

    Warning: Division by zero in /var/www/wp-content/plugins/univers/univers.php on line 225

    libraAdding the video to the process queue. Try viewing again later…

    here is the screen shoot of file chmod type

    http://i35.tinypic.com/2vbq63m.png

    http://i37.tinypic.com/vq73m9.png

    im not sure whats making these issues, maybe i need to chmod some files ? inside the video ?

    please help thank

  15. mysoogal says:

    i try this

    root@ubuntu:/var/www/wp-content# chmod 777 -R video
    root@ubuntu:/var/www/wp-content#

    now i get this

    libra
    October 23rd, 2009

    Warning: Division by zero in /var/www/wp-content/plugins/univers/univers.php on line 225

    Warning: Division by zero in /var/www/wp-content/plugins/univers/univers.php on line 225
    Adding the video to the process queue. Try viewing again later…

    Posted in Uncategorized | Edit | No Comments ยป

    *
    Search for:

    ๐Ÿ™

  16. mysoogal says:

    my log file

    FFmpeg version SVN-r20336, Copyright (c) 2000-2009 Fabrice Bellard, et al.
    built on Oct 21 2009 01:04:41 with gcc 4.3.3
    configuration: –enable-gpl –enable-nonfree –enable-pthreads –enable-libfaac –enable-libfaad –enable-libmp3lame –enable-libtheora –enable-libx264 –enable-libxvid –enable-x11grab
    libavutil 50. 3. 0 / 50. 3. 0
    libavcodec 52.37. 0 / 52.37. 0
    libavformat 52.39. 2 / 52.39. 2
    libavdevice 52. 2. 0 / 52. 2. 0
    libswscale 0. 7. 1 / 0. 7. 1
    [mpeg @ 0x8b9b420]max_analyze_duration reached
    Input #0, mpeg, from ‘/var/www/wp-content/uploads/2009/10/OutputFile.mpg’:
    Duration: 00:00:07.83, start: 0.500000, bitrate: 119 kb/s
    Stream #0.0[0x1e0]: Video: mpeg1video, yuv420p, 320×240 [PAR 49:33 DAR 196:99], 104857 kb/s, 30 tbr, 90k tbn, 30 tbc
    Incorrect frame size

  17. Braydon Fuller says:

    Try running manually the command:

    ffmpeg /var/www/wp-content/uploads/2009/10/OutputFile.mpg

    Does it output information about the video? There should be a width and height in it.

  18. mysoogal says:

    Braydon Fuller, possible you can write some how to documentation for your plug-in what type of server is needs ffmpeg version ? etc if it needs php_ffmpeg.dll etc things like that

    if i had a working demo on my server i will be willing to write it all and do screen cast ๐Ÿ˜€

  19. mysoogal says:

    ok i try what you said i get this

    mysoogal@ubuntu:~$ ffmpeg /var/www/wp-content/uploads/2009/10/OutputFile.mpg
    FFmpeg version SVN-r20336, Copyright (c) 2000-2009 Fabrice Bellard, et al.
    built on Oct 21 2009 01:04:41 with gcc 4.3.3
    configuration: –enable-gpl –enable-nonfree –enable-pthreads –enable-libfaac –enable-libfaad –enable-libmp3lame –enable-libtheora –enable-libx264 –enable-libxvid –enable-x11grab
    libavutil 50. 3. 0 / 50. 3. 0
    libavcodec 52.37. 0 / 52.37. 0
    libavformat 52.39. 2 / 52.39. 2
    libavdevice 52. 2. 0 / 52. 2. 0
    libswscale 0. 7. 1 / 0. 7. 1
    File ‘/var/www/wp-content/uploads/2009/10/OutputFile.mpg’ already exists. Overwrite ? [y/N] y
    At least one input file must be specified
    mysoogal@ubuntu:~$

  20. mysoogal says:

    when i try to open OutputFile.mpg it says in totem stream contains no data

  21. Braydon Fuller says:

    Also make sure that you can process the video by copying and running the FFMPEG commands in the file wp-content/plugins/univers/scripts/process_video.sh or process_video_simple.sh

    You can adjust the quality of the encoding, etc in that bash script.

    Also then make sure that the function “get_video_info” on line 238 of univers.php is returning a height and width. The function is using:

    preg_match(‘/Stream.*Video:.* (\d+)x(\d+).*/’, $line, $matches)

    To get the width and height. Might need to adjust the regex?

  22. Braydon Fuller says:

    It requires a manually built ffmpeg to get it fully working. Except maybe on Ubuntu you don’t need to do this. Instructions here -> Installing FFmpeg & FFmpeg2Theora

  23. Braydon Fuller says:

    Errr. What’s the input filename of the video you’re working with? The outputfile.mpg is blank.

  24. Braydon Fuller says:

    All communication between PHP and FFMPEG is done through a bash script so a php driver isn’t needed for ffmpeg…

  25. mysoogal says:

    im on ubuntu 9.4

    i have done the manually compiled ffmpeg also installed ffmpeg2theora, im able to encode and grab pic with the following code

    http://phpsnaps.com/account/edit-snap/78/grab-image-convert-video-to-h264-single-php/

    i think there are some issues within the process_video.sh maybe ? im still unsure about how to go and fix this thing ?

    i can give you remote access if you want to check it out ?

  26. mysoogal says:

    im testing with the following clips

    http://www.ufocasebook.com/mpegvideo.html

    there are all mpegs

  27. Braydon Fuller says:

    “i can give you remote access if you want to check it out ?”

    That might help, you can email me, info is on the contact page of this site.

    For some reason it’s not getting the height and width of the video you’ve uploaded, which causes the rest of the errors.

  28. Braydon Fuller says:

    I’m trying out some of those videos on this install.

  29. Braydon Fuller says:

    So I uploaded one of those videos to this site, and the video transcoded, etc. however the aspect ratio was wrong. The videos might not be using square pixels, which is what causes that….

    What do you get when you run:

    ffmpeg -i diamondufo.mpeg on your server?

    Also try putting some flags in “get_video_info” to see if the height and width are being found correctly. If not that’s what I would try to fix.

  30. Braydon Fuller says:

    Never done VNC over the internet like that, only on a local network… worked out pretty well ๐Ÿ™‚

    So the problem ended up being that the FFMPEG_BINARY was defined to the wrong location… which was only being used by the get_video_info function, making it so the width and height were always at zero causing the rest of the errors. Might be worth putting some better error messages here….

    Let me know if you figure out what was going wrong with the upload.

  31. mysoogal says:

    after starting with a fresh wordpress install, then i reinstalled the video plugin, added the full path to ffmpeg,

    guess what happend ? it Works, but Guess again ? the mp4 has Zero data on it, which means the ffmpeg command inside process_video.sh this line has some problems

    nice ffmpeg -i $5_cat.mpg -vcodec libx264 -acodec libfaac -vb 900k -ab 128k -ar 44100 -ac 2 -s $2x$3 -y $5.mp4 &> $5.mp4.log 2>&1

    this is the log for mp4

    Input #0, mpegvideo, from ‘/var/www/wp-content/uploads/2009/10/Israel-UFO.mpeg’:
    Duration: 00:00:04.67, bitrate: 458 kb/s
    Stream #0.0: Video: mpeg1video, yuv420p, 320×240 [PAR 49:33 DAR 196:99], 458 kb/s, 30 tbr, 1200k tbn, 30 tbc
    [libx264 @ 0x9a83c10]broken ffmpeg default settings detected
    [libx264 @ 0x9a83c10]use an encoding preset (vpre)
    Output #0, mp4, to ‘/var/www/wp-content/video/480/Israel-UFO.mp4’:
    Stream #0.0: Video: libx264, yuv420p, 480×360 [PAR 49:33 DAR 196:99], q=2-31, 900 kb/s, 90k tbn, 30 tbc
    Stream mapping:
    Stream #0.0 -> #0.0
    Error while opening encoder for output stream #0.0 – maybe incorrect parameters such as bit_rate, rate, width or height

    you see it, when i open mp4 it says stream contains no data, so encoding has not taken place, but jpg thumb and ogg encoding work, i can only think something in the above cmd line is wrong or has extra features which are not needed ?

    i will try to use mencoder, i hope it works ๐Ÿ˜€

    by the way i have installed FF 3.5 its called shiretoko what a crapy name , the ogg plays fine ! but where the hell is full screen btn ??

  32. Braydon Fuller says:

    process_video_simple.sh is the script that is run, not process_video.sh
    I should probably get rid of the alternate.

    Firefox 3.5 is called Shiretoko? Where does it have that, is just Firefox here.

    I’ve been working on doing a ‘fullscreen’ for the player, in a web friendly way. However you can install a plugin to Firefox that lets all <video> have a fullscreen button in the contextual menu that pops up when you right-click the video.

  33. mysoogal says:

    when you install ff 3.5
    applications / internet / shiretoko

    http://i35.tinypic.com/2cpucyt.png

    yeah i know about that plug-in for full screen ! but was wondering how come the default player has no full screen ? as default ? all that and doesn’t have full-screen ?

    I’m about to use this

    #!/bin/bash

    #now we transcode the concatenated video to .mp4 and .ogg
    nice mencoder $1 -o $5.mp4 -af volume=10 -aspect 16:9 -of avi -noodml -ovc x264 -x264encopts bitrate=500:level_idc=41:bframes=3:frameref=2: nopsnr: nossim: pass=1: threads=auto -oac mp3lame &> $5.mp4.log 2>&1

    #nice ffmpeg -i $1 -vcodec libx264 -acodec libfaac -vb 900k -ab 128k -ar 44100 -ac 2 -s $2x$3 -y $5.mp4 &> $5.mp4.log 2>&1
    nice ffmpeg2theora $1 -V 900 -A 128k -c 2 -x $2 -y $3 -o $5.ogg &> $5.ogg.log 2>&1

    #and we grab a screenshot from the middle of the video
    nice ffmpeg -i $1 -ss $4 -vcodec mjpeg -vframes 1 -an -f rawvideo -s $2x$3 -y $5.jpg &> $5.jpg.log 2>&1

    exit 0

    hope it works ๐Ÿ˜€ but i have a feeling it will not work on since is not compatible mp4 to be used in player ?

  34. Braydon Fuller says:

    I didn’t realize Ubuntu had a package out for Firefox 3.5; Shiretoko must be a code name.

    Websites can’t go fullscreen either though, unless you press F11 (it’s not possible to do with JavaScript, which is good…).

    You’ll want to make sure that the mencoder transcoding also scales the video, otherwise you’ll end up with two identical size videos in 480/ and 640/

    You might try adding this to the mencoder line:
    scale=$2:$3

  35. mysoogal says:

    i’ve gone back to ffmpeg, can’t seem to play the output mp4 from mencoder :O

  36. Braydon Fuller says:

    Adding a switch to be able to do mencoder or ffmpeg could be worth looking into. At some point it would be good to get an issue tracker for this project going.

  37. mysoogal says:

    try github ? i know many developers use it for free

  38. Braydon Fuller says:

    It might come to that, I’ve also thought about using Trac, like these guys: http://dev.pocoo.org/projects/werkzeug/ and http://dev.jquery.com/

  39. mysoogal says:

    it looks perfect for this

  40. mysoogal says:

    I fix like this ! on firefox 3.0 now there was a issue with – swscaler thing i removed few parts of it and now encoding works for both formats, ๐Ÿ˜€ also stream working just fine !

    everything is working just fine right now !!!

    ——————————————————————————————————————–
    #!/bin/bash

    nice ffmpeg -i $1 -acodec libfaac -ab 128k -ac 2 -vcodec libx264 -vpre hq -threads 0 $5.mp4 &> $5.mp4.log 2>&1

    nice ffmpeg2theora $1 -V 900 -A 128k -c 2 -x $2 -y $3 -o $5.ogg &> $5.ogg.log 2>&1
    #nice mencoder $1 -o $5.mp4 -af volume=10 -aspect 16:9 -of avi -noodml -ovc x264 -x264encopts bitrate=500:level_idc=41:bframes=3:frameref=2: nopsnr: nossim: pass=1: threads=auto -oac mp3lame &> $5.mp4.log 2>&1

    #and we grab a screenshot from the middle of the video
    nice ffmpeg -i $1 -ss $4 -vcodec mjpeg -vframes 1 -an -f rawvideo -s $2x$3 -y $5.jpg &> $5.jpg.log 2>&1

    exit 0
    ———————————————————————————————————————-

  41. mysoogal says:

    incase you come accross this issue

    swScaler: Unknown format is not supported as input pixel format
    Cannot get re-sampling context

    it means this ” This means that a codec is missing, here IV41(Intel Indeo 4).
    Intel Indeo versions 2 and 3 have decoders in FFmpeg. Indeo version 4 and 5 are not supported by any open source decoders. So we cannot trans-code this file.

    Your best chance is to re-encode to a codec that is supported by FFMPEG with a commercial package that does support the missing codec. ”

    http://mediamosa.org/forum/viewtopic.php?f=13&t=76

    hope that helps anybody reading this !

  42. mysoogal says:

    its looking good also on a wp theme im using called Blocks 2.1.4 by mg12

    now I’m wondering how to remove that View Larger link and code, also to resize the ogg and flash player so they look good with the layout

    this flash player does not have full screen ?

    where should i look to resize flash player ?

  43. mysoogal says:

    just a interesting thought i had !

    since we are on Linux, could we use the bittorrent client ? to upload to wp instead of wp form ? i wonder if wget can be used to upload files from remote servers such as megaupload, rapidshare etc !

    the wp up-loader form is very limited and some users have millions of videos on remote servers :O

    i was looking into xfileshare pro that sort of system to handle remote uploads :O

  44. now Iโ€™m wondering how to remove that View Larger link and code, also to resize the ogg and flash player so they look good with the layout

    The html that is inserted into the page is generated between the lines 78 and 192 of univers.php. The “view larger” is appended to the end at the end from line 173.

    The widths of the video are defined at line 19 on univers.php:
    $this->WIDTHS = array(480, 640); The smaller one will be used for embeds.

    The player doesn’t have fullscreen right now, but the “view larger” will sometime turn to “full screen”, or someplace else.

    Note: before working too much on it you should make a backup of the site ๐Ÿ˜‰


  45. since we are on Linux, could we use the bittorrent client ? to upload to wp instead of wp form ? i wonder if wget can be used to upload files from remote servers such as megaupload, rapidshare etc !

    the wp up-loader form is very limited and some users have millions of videos on remote servers :O

    Yeah it would be great to use wget or something to be able to add a video by a URL, and even use things like youtube-dl, and others to be able to give it a URL of a video page and it would parse out the FLV and download it.

  46. mysoogal says:

    lets start lol i’m no way coder but ill try since ! it sounds like a great idea ! i think with wget we can do remote upload from other servers right since its http ๐Ÿ˜€

    wget -O – http://example.com/video.flv | input.flv | ffmpeg -i $1 -acodec libfaac -ab 128k -ac 2 -vcodec libx264 -vpre hq -threads 0 $5.mp4 &> $5.mp4

    i read it from here wget guide

    http://www.thegeekstuff.com/2009/09/the-ultimate-wget-download-guide-with-15-awesome-examples/

  47. Braydon Fuller says:

    the $1 param could be a link to an external source, and then use that to wget it, however this will complicate the bash script…

    i’m thinking it would be nice to have another tab in the “add media” where it would be “from another server”, and it would either use wget, or use php to download it and put it in the “uploads” directory, and then it would add it to be processed. This way you could do the same thing with audio, images too.

  48. mysoogal says:

    ” have another tab in the โ€œadd mediaโ€ where it would be โ€œfrom another serverโ€, and it would either use wget ”

    that would be a really great thing to have, under media / wget url

    but can wget be accessed from php html ? I didn’t read enough to understand it

    I like wget ! it display progress bar information and it can also trigger ffmpeg encode which is something we want after all ? or once file has been downloaded it will be processed ? from sh script

    i agree ” complicate the bash scriptโ€ฆ ”

    things should be very simple

    i’m going to try to use flv2tools or some other meta injection tool to see if it works :O