Self Hosted HTML5 Video not working « Support Forum | Kriesi.at

Support Forum » Angular

Self Hosted HTML5 Video not working

10 posts from 3 voices

Started 6 months ago by SugarRoyale
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

SugarRoyale
Member

I am following your instructions on adding an external link to show self-hosted HTML5 and inserting a "preview" image onto the external link, however it is not working consistently. With some files the video will show up and with others I just get a link to the video. I've got all the copies of the different file formats (.mp4, .ogv .web4 and .jpg) stored in the same folder. And I'm at a loss as to why it's working sometimes. I wonder if WP itself is preventing the files from showing up? Do I need to create a totally different folder outside of wp-content/uploads? The codex does not indicate it supports HTML5 and I noticed that there's a link to the codex stating what files WP supports. I'm creating this site on a localhost so it's not online yet. Maybe that's the issue? I don't know. I'm at an apprentice level with WP, but have created HTML sites in the past.

Another bug is that with the videos that I can view on the frontpage play inline (in the thumbnail view on the frontpage) instead of opening into a lightbox or the post. Basically none of the settings you can choose from work. The other problem is that one needs to click twice to view the video. While I'm not crazy about these bugs, I could live with it if I felt confident that the HTML5 Videos would function as your documentation states.

Are you going to do anything to support this feature in Angular? Self-hosted HTML5 video was a key reason why I purchased your theme and I've invested way too much time into creating my website to switch to another theme at this point. From what I've been reading up here it sounds as if there's more issues down the road on iOS devices. I love this theme and truly appreciate all that is involved in creating it and maintaining it. Does Kriesi see a fix for this or not? If so a time frame? Looking forward to a response. Thanks for a great theme. Hope we can get the HTML5 videos working.

Posted 6 months ago #
Dude
Dude

1) Check the extension of your videos - afaik they must be .mp4, .ogv and .webm. but you just need .mp4, .ogv to cover all browsers.

2) Maybe it's a server/mime type issue. See: http://blog.patricktresp.de/2012/02/getting-those-html5-videos-running-correct-mime-types-on-server/

Posted 6 months ago #
SugarRoyale
Member

Got my site on a live server and the HTML5 self hosted videos are not functioning. Very frustrating to have support say this is working when obviously it is not judging by all the comments up here.

Here's what is happening:

1. On SOME of my video PORTFOLIO items I was able to upload the .mp4 file and insert the "preview/poster" image as outlined in your directions and the video you posted in response to another member's query... BUT on a few of them, following the EXACT SAME STEPS as outlined in your directions the "preview" image blocks the video file so when you access the portfolio item it's just the static .jpg. No film icon shows up. No video is accessible. FAIL. FYI, This is what was happening to me before when I posted 3 weeks ago. I don't understand why it works sometimes. Unfortunately I don't know what I did to get it to work last time—I think it just started working again.

2. The other BIG PROBLEM is that with the videos that do show up only the audio plays on Firefox. It's a black video screen on those browsers—the controls are there just no visuals. They play on Chrome, Safari, iPad and iPhone. I've added the correct info to the .htaccess file as well. Nothing would play until I did that.

3. Also, is there anyway I can get the videos to preload?

4. Background image of my site does not show up in Chrome or Firefox.

Can you please take a look. http://envisionaire.com

It's a great looking theme. Just really need the videos to be self hosted.

Hope you can figure this out. Thanks!

Posted 6 months ago #
SugarRoyale
Member

Ok. I figured out what to do with No. 1. After manually typing (cut and paste from a txt doc will not work) external link. I hit Update. THen I clicked Show and added a preview image from Media. Clicked on Update again and then Clicked on Vew Portfolio Item et voila! the video showed up. If you cut and paste the external link it would not work...Pretty sure the View Portfolio Entry step was what I did 3 weeks ago.

Still not showing up on Firefox—NEED SUPPORT HELP THERE. Along with the background image not viewing. Thanks!

Posted 6 months ago #
Nick
Moderator

Hi,

Here is a video I made a little while back showing how to add HTML5 video hosted locally that works with all browsers on Angular.

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

and here is the thread where I explain what is taking place in the video http://www.kriesi.at/support/topic/html5-self-hosted-video-not-working-in-gallery-for-firefox-and-iphone#post-81159

Thanks,

Nick

Posted 6 months ago #
SugarRoyale
Member

Hi Nick,

I've seen your video and I have followed your instructions exactly as written. I even tried it again before responding. It is NOT WORKING on Firefox. It works on Safari, chrome, iPhone, iPad.

You can see the preview image on all browsers, because you need to click twice to get to the video in this theme. I know other people were complaining about this problem and I can live with that but really need it to play on Firefox.

Here's what's happening:
On Firefox you can hear the audio but not see the video. There's just a black screen with the controls. If you look at my site on both firefox and safari to compare, you can see that they are loading the same way except that on firefox something is blocking the video portion.

Need you to look at this, please.

Thanks!
Sue

Posted 6 months ago #

Nick
Moderator

Hi,

Off topic:

On your home page in two places you are referencing localhost (on bottom of page)

<div class="bg_container" style="background-image:url(http://localhost/wp-content/uploads/2011/12/bkgd-bw-sketch-lite.jpg);"></div>

and

<!--[if lte IE 8]>
...cut...
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://localhost/wp-content/uploads/2011/12/bkgd-bw-sketch-lite.jpg', sizingMethod='scale');
...cut...
<![endif]-->

----------

I am showing errors on video are all coming from this: Have you tried removing that and seeing if video starts working?

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

Because right now your code is only showing the mp4 file and not showing the other two formats (i know you have them there, i checked) but for whatever reason they are being ignored, try to remove the above video player please.

[Edit] Your video didn't play for me at first. Then I added MIME types below, and it worked on FF, IE9, and Chrome. I added video using exactly same process outlined in previous video I posted.

Please add this to your .htaccess file located at the base of wordpress, it should be next to your wp-config.php file. If you can't see it, download the htaccess editor plugin from wordpress and add the block below through the plugin.

# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------

# JavaScript
#   Normalize to standard type (it's sniffed in IE anyways)
#   tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript         js jsonp
AddType application/json               json

# Audio
AddType audio/mp4                      m4a f4a f4b
AddType audio/ogg                      oga ogg

# Video
AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm
AddType video/x-flv                    flv

# SVG
#   Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz

# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType application/x-font-woff        woff
AddType font/opentype                  otf

# Assorted types
AddType application/octet-stream            safariextz
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-shockwave-flash       swf
AddType application/x-web-app-manifest+json webapp
AddType application/x-xpinstall             xpi
AddType application/xml                     rss atom xml rdf
AddType image/webp                          webp
AddType image/x-icon                        ico
AddType text/cache-manifest                 appcache manifest
AddType text/vtt                            vtt
AddType text/x-component                    htc
AddType text/x-vcard                        vcf

Thanks,

Nick

Posted 6 months ago #

Nick
Moderator

Hi,

Here is a video. Please watch till the end. Your videos come in second half in IE9, Firefox and Chrome on Angular Theme.

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

Thanks,

Nick

Posted 6 months ago #
SugarRoyale
Member

Hi Nick,
Thanks so much for all of your help and work towards this issue. The tip about the images referencing localhost was a BIG help—my first experience developing on localhost and transferring to a server!

Unfortunately I still can't get the videos to play in FF—not sure about IE because I don't have a windows system. Not so much of a worry about IE as my client's customers are art directors, mainly on Mac, but I think a lot use FF as their browser so this is a bummer to not be working.

What's happening is that the mediaelements plugin doesn't appear to create a flash forward file nor does it load either the OGV or WEBM format but is instead loads the MP4 file when viewing it in FF 17. It only plays the audio portion of the MP4 file—the rest is a black screen—perhaps the audio of mp4 is compatible with FF?

I know with some HTML5 players you need to include a swf version in the html code but I thought the point of mediaelements.js is that a script creates a swf file so it will "flash forward" on non-html5 browsers.

I'm not the only one having this issue. Just do a google for mediaelements.js audio only...I've done some research but haven't come up with anything that fixes it.

Not sure why it's working on your end and not mine. I'm doing everything correctly and have the htaccess set up with the MIME types. Thinking it might be a server issue (on GoDaddy). It works brilliantly on localhost. Or it's conflicting with the theme maybe?

What server did you test the ggogle video sample you created—is it hosted on your own testing server or a remote hosted server? Another thought is perhaps Bullet Proof security plugin is conflicting with mediaelements.js. I am loathe to disable that just for the videos. At this point I'm coming up with a work around so if people can't view it they can click a link to a webm format or an ogv format of the video.

I don't have the expertise to figure this out. But in FF using Firebug this was the error I kept getting when I click to play:

This is the video on the Front page:
--
[22:11:59.932] GET https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/flashmediaelement.swf?autoplay=1 [HTTP/1.1 200 OK 763ms]
[22:12:00.671] Error in parsing value for 'pointer-events'. Declaration dropped. @ https://envisionaire.com/
[22:12:00.767] GET https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/bigplay.png [HTTP/1.1 200 OK 105ms]
[22:12:00.768] GET https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/controls.png [HTTP/1.1 200 OK 483ms]
--
[22:12:11.609] GET https://envisionaire.com/framehatch/wp-content/uploads/2012/10/spot-envisionation.mp4 [HTTP/1.1 200 OK 32376ms]
[22:12:12.110] GET https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/loading.gif [HTTP/1.1 200 OK 210ms]

This is what happens on the portfolio item page:

[22:16:23.088] GET https://envisionaire.com/portfolio-item/envisionation/ [HTTP/1.1 200 OK]
--
[22:16:28.765] GET https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/flashmediaelement.swf?autoplay=1 [HTTP/1.1 304 Not Modified 106ms]
[22:16:29.024] Error in parsing value for 'pointer-events'. Declaration dropped. @ https://envisionaire.com/portfolio-item/float-like-a-butterfly/
--
[22:16:38.377] GET https://envisionaire.com/framehatch/wp-content/uploads/2012/10/spot-envisionaire-papillon.mp4 [HTTP/1.1 200 OK]

THANKS!

Posted 5 months ago #
Nick
Moderator
Hi,

Don;t disable bulletproof, and instead add the mime types to it. There is an option to add additional items to htaccess right inside bulletproof. Video is made on my localhost Apache, i just renamed localhost to wp.dev to make life simpler.

0) Download the follow 3 correctly made videos http://www.mediafire.com/file/cv9kqdzqqd719i1/video-test.zip and 1 image and add them to see if they work. If they do work, then your videos are encoded incorrectly. If they do not work, continue reading below.

1) Connect to your server with ftp and *visually* confirm that your htaccess file indeed has
```
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
```
If it doesn't have the lines above, add them somewhere in the beginning of the file.

2) While you are there via FTP go to the theme folder /js/mediaelement/ make a backup of the mediaelement directory (just rename it to me2) and download the latest version of mediaelement http://www.mediafire.com/file/ohii0ng4bgli343/mediaelement.zip (i put it up here and removed what isn't needed) and upload the new mediaelement folder from the zip file in place of the old folder that you've renamed.

3) Empty Cache.

4) Check if the videos are working now from step 0. if something isn't working/broken, just delete the folder and rename the me2 folder back to mediaelement.

Thanks,

Nick
Posted 5 months ago #