Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #17242

    Hi, so I’ve attempted to host my own HTML video but the code that’s supposed to detect browser type and display the appropriate video file (.ogg, mp4, webm) is not working. Also, the preview still that’s supposed to show up is not working either.

    I’m not sure what’s going on, but I really need the video to play in Firefox and on a iOS and Android devices. I’m frustrated that the code doesn’t work as it says in the documentation. Can you please help me fix this?

    Link to my site:

    Specific issue: MP4 video plays in Chrome and Safari, but the gallery it’s not loading the OGG for Firefox or the WEBM for iPhone.

    Steps I’ve taken

    – uploaded 3 video files and a JPG with the same name to my WP media library

    – added AddMedia code to htaccess file

    – added a portfolio item to display the MP4 video


    Self Hosted Videos, HTML5:

    If you want to display self hosted videos: that works as well, but only for HTML 5 compatible data types. Simply click the add external URL Button and add the link to your Video. The slideshow will automatically embed the movies as HTML5 movies with a fallback flash slider. Supported formats are .mp4, .webm and .ogv. If you want to upload different formats for different browsers (some browsers support mp4, some ogv, some webm) feel free to do so by just linking to one of these files and uploading the others with the same name but different file format. Eg you enter

    http://yoursite/wp-content/uploads/2011/12/Cataclysm_Cinematic.ogv into the URL Field once you have clicked the “Add external Video” Button. Then make sure that the files

    http://yoursite/wp-content/uploads/2011/12/Cataclysm_Cinematic.mp4 and


    are also on your server. The SLideshow will automatically pick the correct Video for the current Browser

    The Slideshow will also automatically check if the browser used to display the video is capable of displaying the content as HTML5 video, and if thats not the case serve a flash fallback. It is recommended to always at least provide a h264 encoded mp4 file. If you want to set a “poster image” (a image that is displayed before the player starts) simply upload an image with the same name as the video.

    If the Videos do not appear correctly in your browser you might want to add this to your root folders htaccess file, since some servers are not equiped to properly play html5 videos by default:

    AddType video/ogg .ogv

    AddType video/mp4 .mp4

    AddType video/webm .webm



    I downloaded your 3 videos and set everything up on my localhost and there were no problems. Looking at the code, you are attaching the mp4 file as the doorway image which would break firefox and the ios browser since they don’t use that format. Please take a look at this video, and see what you are doing different.




    Thanks for taking the time to make the video. I’m confused because in the video you selected the mp4 file as the doorway image when you added the URL through the add external video button… yet your previous post says this was causing the issue. I followed the video exactly and created this link. Still not working on Firefox and iOS. Please help.



    No. Please make the video full screen and pause it during the times I indicate.

    Initially all 3 videos are uploaded. The image is not. So (1) first thing I do, is I get the URL of the mp4 [second :11 of video]. (2) I create a new page and paste the url to the mp4 video [second :22 of the video] that i copied in step 1. then I click the insert video button. (3) I then click the link SHOW and at [second :29] I click the image of the film canister. This is the part where I upload the image (*not* the .mp4 file), you can see the extension of the file I picked is .png.

    So, what you are doing, is adding the mp4 video when I am adding the image,(you add the mp4 twice,) when I add it once (i paste URL), and then I upload the image.





    Thanks for posting a screencast on this. My question is what video player are you using to play the .MP4 file? I would like to do exactly the same thing that you are demonstrating in your screencast with FlowPlayer. Is that possible?

    Thanks in advance,



    Since angular version 1.3 (latest version is 1.4) Kriesi uses mediaelements: for html5 media. It’s not easily possible to replace it with flowplayer 5 though.

    Best regards,



    Thanks Dude!

    I installed the mediaelements.js plugin for WordPress and followed the steps in Nick’s screen cast. However, the video doe not play. It only shows the static cover image which I selected. The video I am trying to run is MP4 file type and is hosted locally on my wordpress installation.

    Is there a step I am missing?


    Afaik Angular already uses the mediaelement player and you don’t need to install any additional plugins (maybe the plugin even breaks Angular). Try to deactivate the plugin and use the “Featured media” uploader on the post/page editor page to upload your mp4 or ogv videos (the uploader will handle these videos like images).


    Ok, thanks for the quick response. I am running the Eunoia theme. Are there self-hosting video capabilities built into Eunoia? If not, I’d like to request that mediaelement player be integrated into this theme in a future update, as it appears that it currently is not and many users would like to use the theme to host videos.



    Yes, the mediaelement player is already built into this theme. It will bes used if the media file type is ogv, mp4 or webm.




    Hmm… For some reason, the mediaplayer is not working for a 10MB MP4 video file on Eunoia. Here’s a short screencast of an attempt to get the video player to work on my development theme :




    Have you installed the update that was released in last day or so?

    [Edit: Yes, you are not using the latest version of Eunoia, because you are throwing jquery error on line 1756 of aviapoly2.js , which is completely rewritten in the latest update. Please go to Theme Forest and update. Nice video btw, looks ultra smooth compared to mine. But after looking at the prices $$$… I paid $15 for 1 year of screen-cast-o-matic and it uploads to youtube, vimeo, google apps, and a few others.]




    Hi aeid101,

    Can you try disabling all active plugins you have running to make sure nothing is conflicting with the themes attempt at getting the video to play.

    If you could also push your test site live to see if putting it live fixes the issue and to let us inspect the page as well.




    Hello Devin,

    I upgraded to version 1.2 of Eunoia and disabled all plugins. The test site is live here: .The video still does not run…

    Thanks for your support,



    Now that you’ve updated, can you go back through the steps of adding the video. Could you also try not setting a preview image just to help add another layer of checks to the page.

    Appreciate the quick updates and working with us on this one :)




    Ok, I tried it again and still have the same issue: . Here is a link to the new page for inspection:





    Please create me a wp admin account and send me the login data to: (Email address hidden if logged out) – I’ll look into it.



Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘HTML5 self-hosted video not working in gallery for Firefox and iPhone’ is closed to new replies.