Support Forum - User Favorites: SugarRoyale

Support Forum - User Favorites: SugarRoyale sugarroyale Support Forum - User Favorites: SugarRoyale en-US Thu, 20 Jun 2013 09:09:16 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Nick on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-86541 Tue, 04 Dec 2012 23:18:47 +0000 Nick 86541@http://www.kriesi.at/support/ 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 <a href="http://www.mediafire.com/file/cv9kqdzqqd719i1/video-test.zip" rel="nofollow">http://www.mediafire.com/file/cv9kqdzqqd719i1/video-test.zip</a> 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 <pre><code>AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm</code></pre> 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 <a href="http://www.mediafire.com/file/ohii0ng4bgli343/mediaelement.zip" rel="nofollow">http://www.mediafire.com/file/ohii0ng4bgli343/mediaelement.zip</a> (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 SugarRoyale on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-86423 Tue, 04 Dec 2012 04:31:12 +0000 SugarRoyale 86423@http://www.kriesi.at/support/ 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 <a href="https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/flashmediaelement.swf?autoplay=1" rel="nofollow">https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/flashmediaelement.swf?autoplay=1</a> [HTTP/1.1 200 OK 763ms] [22:12:00.671] Error in parsing value for 'pointer-events'. Declaration dropped. @ <a href="https://envisionaire.com/" rel="nofollow">https://envisionaire.com/</a> [22:12:00.767] GET <a href="https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/bigplay.png" rel="nofollow">https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/bigplay.png</a> [HTTP/1.1 200 OK 105ms] [22:12:00.768] GET <a href="https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/controls.png" rel="nofollow">https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/controls.png</a> [HTTP/1.1 200 OK 483ms] -- [22:12:11.609] GET <a href="https://envisionaire.com/framehatch/wp-content/uploads/2012/10/spot-envisionation.mp4" rel="nofollow">https://envisionaire.com/framehatch/wp-content/uploads/2012/10/spot-envisionation.mp4</a> [HTTP/1.1 200 OK 32376ms] [22:12:12.110] GET <a href="https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/loading.gif" rel="nofollow">https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/loading.gif</a> [HTTP/1.1 200 OK 210ms] This is what happens on the portfolio item page: [22:16:23.088] GET <a href="https://envisionaire.com/portfolio-item/envisionation/" rel="nofollow">https://envisionaire.com/portfolio-item/envisionation/</a> [HTTP/1.1 200 OK] -- [22:16:28.765] GET <a href="https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/flashmediaelement.swf?autoplay=1" rel="nofollow">https://envisionaire.com/framehatch/wp-content/themes/angular/js/mediaelement/flashmediaelement.swf?autoplay=1</a> [HTTP/1.1 304 Not Modified 106ms] [22:16:29.024] Error in parsing value for 'pointer-events'. Declaration dropped. @ <a href="https://envisionaire.com/portfolio-item/float-like-a-butterfly/" rel="nofollow">https://envisionaire.com/portfolio-item/float-like-a-butterfly/</a> -- [22:16:38.377] GET <a href="https://envisionaire.com/framehatch/wp-content/uploads/2012/10/spot-envisionaire-papillon.mp4" rel="nofollow">https://envisionaire.com/framehatch/wp-content/uploads/2012/10/spot-envisionaire-papillon.mp4</a> [HTTP/1.1 200 OK] THANKS! Nick on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-84703 Tue, 20 Nov 2012 12:43:12 +0000 Nick 84703@http://www.kriesi.at/support/ Hi, Here is a video. Please watch till the end. Your videos come in second half in IE9, Firefox and Chrome on Angular Theme. <a href="https://docs.google.com/open?id=0B8hqGBMSfHtKczhhdjVwU0ZpYVk" rel="nofollow">https://docs.google.com/open?id=0B8hqGBMSfHtKczhhdjVwU0ZpYVk</a> Thanks, Nick Nick on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-84684 Tue, 20 Nov 2012 09:52:26 +0000 Nick 84684@http://www.kriesi.at/support/ Hi, Off topic: On your home page in two places you are referencing localhost (on bottom of page) <pre><code><div class="bg_container" style="background-image:url(http://localhost/wp-content/uploads/2011/12/bkgd-bw-sketch-lite.jpg);"></div></code></pre> and <pre><code></code></pre> ---------- I am showing errors on video are all coming from this: Have you tried removing that and seeing if video starts working? <pre><code><link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script></code></pre> 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. <pre><code># ---------------------------------------------------------------------- # 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</code></pre> Thanks, Nick SugarRoyale on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-84575 Mon, 19 Nov 2012 17:50:59 +0000 SugarRoyale 84575@http://www.kriesi.at/support/ 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 Nick on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-84357 Sat, 17 Nov 2012 09:37:05 +0000 Nick 84357@http://www.kriesi.at/support/ 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. <a href="https://docs.google.com/open?id=0B8hqGBMSfHtKYnJKREhkTWlDRnc" rel="nofollow">https://docs.google.com/open?id=0B8hqGBMSfHtKYnJKREhkTWlDRnc</a> and here is the thread where I explain what is taking place in the video <a href="http://www.kriesi.at/support/topic/html5-self-hosted-video-not-working-in-gallery-for-firefox-and-iphone#post-81159" rel="nofollow">http://www.kriesi.at/support/topic/html5-self-hosted-video-not-working-in-gallery-for-firefox-and-iphone#post-81159</a> Thanks, Nick SugarRoyale on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-84166 Fri, 16 Nov 2012 05:43:12 +0000 SugarRoyale 84166@http://www.kriesi.at/support/ 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! SugarRoyale on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-84154 Fri, 16 Nov 2012 03:28:30 +0000 SugarRoyale 84154@http://www.kriesi.at/support/ 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. <a href="http://envisionaire.com" rel="nofollow">http://envisionaire.com</a> It's a great looking theme. Just really need the videos to be self hosted. Hope you can figure this out. Thanks! Dude on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-80709 Tue, 23 Oct 2012 06:02:26 +0000 Dude 80709@http://www.kriesi.at/support/ 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: <a href="http://blog.patricktresp.de/2012/02/getting-those-html5-videos-running-correct-mime-types-on-server/" rel="nofollow">http://blog.patricktresp.de/2012/02/getting-those-html5-videos-running-correct-mime-types-on-server/</a> SugarRoyale on "Self Hosted HTML5 Video not working" http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working#post-80664 Mon, 22 Oct 2012 18:32:04 +0000 SugarRoyale 80664@http://www.kriesi.at/support/ 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.