Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #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: http://ehub31.webhostinghub.com/~jamesb17/wp/?page_id=510

    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

    FROM THE ANGULAR DOCUMENTATION (FOR REFERENCE)

    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

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

    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

    #94689

    Hi,

    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.

    https://docs.google.com/open?id=0B8hqGBMSfHtKYnJKREhkTWlDRnc

    Thanks,

    Nick

    #94690

    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.

    http://ehub31.webhostinghub.com/~jamesb17/wp/?page_id=550

    #94691

    Hi,

    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,

    Nick

    #94692

    @Nick,

    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,

    #94693

    Hi!

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

    Best regards,

    Peter

    #94694

    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?

    #94695

    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).

    #94696

    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.

    #94697

    Hi!

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

    Regards,

    Peter

    #94698

    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 : http://screenr.com/7h87

    Thanks,

    #94699

    Hi,

    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.]

    Thanks,

    Nick

    #94700

    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.

    Regards,

    Devin

    #94701

    Hello Devin,

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

    Thanks for your support,

    aeid101

    #94702

    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 :)

    Regards,

    Devin

    #94703

    Ok, I tried it again and still have the same issue: http://screenr.com/YM87 . Here is a link to the new page for inspection: http://goo.gl/IGQys

    Thanks,

    aeid101

    #94704

    Hey!

    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.

    Regards,

    Peter

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.