October 22, 2012 at 3:23 pm #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
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 .webmOctober 23, 2012 at 6:40 pm #94689
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.
NickOctober 23, 2012 at 8:45 pm #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.October 26, 2012 at 11:03 am #94691
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.
NickNovember 2, 2012 at 11:19 pm #94692
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,November 3, 2012 at 7:11 pm #94693
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.
PeterNovember 3, 2012 at 8:04 pm #94694
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?November 4, 2012 at 6:03 am #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).November 5, 2012 at 7:25 am #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.November 5, 2012 at 10:34 am #94697
Yes, the mediaelement player is already built into this theme. It will bes used if the media file type is ogv, mp4 or webm.
PeterNovember 5, 2012 at 6:30 pm #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,November 5, 2012 at 6:43 pm #94699
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.]
NickNovember 5, 2012 at 6:44 pm #94700
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.
DevinNovember 5, 2012 at 7:54 pm #94701
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,
aeid101November 5, 2012 at 7:59 pm #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 :)
DevinNovember 5, 2012 at 8:08 pm #94703November 6, 2012 at 5:37 am #94704
The topic ‘HTML5 self-hosted video not working in gallery for Firefox and iPhone’ is closed to new replies.