Self hosted video problems

24 posts from 3 voices

• Started 6 months ago by rumblefish
• Latest reply from Nick
• This topic is not a support question

Tags:

No tags yet.

1. 

   rumblefish
   Member

   Hi Guys,

   I'm having trouble with self hosted videos in Shoutbox, I wonder if you can help?

   Usually I just link out to a file on Vimeo or YouTube, but for a new site I want to create it would be better to self host the videos. But it seems to be more complex than I originally thought looking at this post on Angular by Nick:

   http://www.kriesi.at/support/topic/self-hosted-html5-video-not-working

   Basically I have three questions/problems:

   1. File Types

   Why is it necessary to have mp4, webm, and ogv (or f4v) and a jpeg file for each video?
   I'm assuming its a device or browser issue. So the next question is -

   2. Selecting the File Type

   If I make a link to a video using the Add featured media box, it only allows me to choose one file as the embedded video. So how/why do the other file types ever get activated? Sorry if these are dumb questions, but all this is completely new to me.

   3. Troubleshooting

   I set up a test post with a featured image as the keyframe for the linked hosted video (an mp4 hosted in a "films" folder in the "Uploads" folder of Wordpress. In that folder I have put all the test videos from the Angular post that Nick wrote (mp4, webm, ogv and jpeg) and also added the MIME file types into my htaccess file.

   When I viewed the post I had the following errors appear above it:

   Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

   Warning: file_get_contents(http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

   Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

   Warning: file_get_contents(http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

   Warning: file_get_contents() [function.file-get-contents]: http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes/shoutbox/framework/php/function-set-avia-frontend.php on line 496

   Warning: file_get_contents(http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /nfs/c09/h04/mnt/138685/domains/sosgalgos.com/html/wp-content/themes

   However, clicking the video did make it play. The only thing is that the video was positioned top left in the screen which I assume is because the video dimensions (480x270px) are too small for the player window (about 620x400px).

   I haven't made the post visible for obvious reasons, but you can get to it here:

   http://sosgalgos.com/?p=13217

   So basically I need to know

   - How to set up the video archive correctly (one folder for each video with the four file types inside?)
   - How do I use the jpeg file as the keyframe (or is it just a question of linking to it through the media library?)
   - How do I get the right video file to play if I can only select one file?
   - How do I fix the errors that appeared?

   Thanks in advance!
   Rich

   Posted 6 months ago #
2. 

   Dude
   Dude

   1) Not all browsers support all video formats - thus you need to upload mp4, ogv and a jpeg. mp4 is supported by IE, Safari, Opera and Chrome (afaik Chrome devs plan to switch to another format). Firefox doesn't support mp4 but only ogv. mp4 is required for flash fallbacks (older browsers) too. webm isn't required but if you want to be on the save side also upload it. The jpeg is required for the preview image (eg if the video doesn't autostart, etc. - you can skip it too if you don't want to display a preview image).

   2) Just upload all files with the same file name but different extension. I.e. if you've a video called starwars.mp4 upload an ogv version with the name starwars.ogv, a webm video called starwars.webm and a jpg called starwars.jpg - the avia framework should take care of the files and it will recognize that it's the same file based on the file names. You need to add all files to the "featured media" slideshow though. If the user hits the play button on the front end the browser will request the supported video type from your server.

   3) Ask your hoster to set the allow_url_fopen to 1 (i.e. in the php.ini) - see http://php.net/manual/en/filesystem.configuration.php

   Posted 6 months ago #
3. 

   rumblefish
   Member

   Hi Peter!

   Thanks for your response, I'll try all those things later today.

   So basically I need to create a featured media slideshow for the three video types, using the jpeg as the featured image? I set the rotation to "off" I guess?

   One last thing about video dimensions: If the video player in the page is say 620x348px, but I want it to be able to play a higher quality video at an expanded (full screen) size of say 1280x720px, how do I set that up so it plays the larger file if selected?

   Thank you!
   rich

   Posted 6 months ago #
4. 

   rumblefish
   Member

   Hi Peter,

   I did the fixes that you suggested:

   - Added allow_url_fopen=1 into the php.ini file
   - added the four files (mp4, webm, ogv and jpeg) into the featured media slideshow

   The video now plays in the player and is scaled to the right size for it, BUT the video controls are not showing whereas the slideshow controls are - which I obviously don't want. How do I fix that? And then resolve the fullscreen question previously?

   http://sosgalgos.com/?p=13217

   Thanks!

   Posted 6 months ago #
5. 

   Nick
   Moderator

   Hi,

   That's actually pretty good, did a good job. I see all the videos in the code for the first time. The problem with the overlay I had myself a few times. No idea why it goes crazy like that sometimes. But once it gets fixed up for the first time, it never goes out of line again. I am looking at your site now. Give me a few minutes, but you on the right track........

   ** It's a bad idea to have an activated cache plugin while developing because half the time you are looking at the cache and never know if your css is wrong or its still the cache. **

   Alright. Lets make the cover look proper with this css though there is so much css working on that thing i hope it gets through the blocade
   

   .mejs-poster.mejs-layer {
   width: 640px !important;
   height: 360px !important;
   }

   There is also something complaining about not understanding MIME for a webfont. So why dont you download htaccess editor plugin and paste the block below at the very top of the .htaccess file (you can use ftp also.
   

   # ----------------------------------------------------------------------
   # 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

   Ok lets do this first and see which way the wind blows.

   Thanks,

   Nick

   Posted 6 months ago #
6. 

   Nick
   Moderator

   Hey,

   I just glanced at your source and noticed something
   

   <div class=' preloading autoslide_false autoslidedelay__5 slideshow_page_big medium slideshow_container'>
   	<ul class='slideshow' style='height: 400px; width: 620px;'>
   		<li class='featured featured_container1'>
   		<video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_943255629_974567444">
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>
   		</video>
   		</li>
   		<li class='featured featured_container2'>
   		<video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_1855278671_1699939172">
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>
   		</video>
   		</li>
   		<li class='featured featured_container3'><video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_1550942432_40025619">
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>
   		</video>
   		</li>
   		<li class='featured featured_container4'><video class="avia_video" poster="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.jpg" controls id="player_13217_444903948_364385693">
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.webm" type="video/webm"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.mp4" type="video/mp4"/>
   		<source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>
   		</video>
   		</li>
   	</ul>
   </div>

   Something doesn't look right here, and its not a missing semicolon.

   Thnks,

   Nick

   Posted 6 months ago #
7. 

   rumblefish
   Member

   Hi Nick,

   I did everything you said up to the second post.

   I added that extra css and pasted in all the MIME file types into the htaccess file. (I emptied all the caches before and after the changes too).

   But the problem with the player controls remains. They are not visible and the slideshow ones are. (Well, they are visible for about 1 second when the page first loads, but then the slideshow kicks in and they are replaced)

   I don't know what's wrong in the code you pointed to in your second post. the only thing that looks weird to me is why it says:

   <source src="http://sosgalgos.com/wp-content/uploads/films/video-test/echo-hereweare.ogv" type="video/ogg"/>

   ie The source file is ogv, yet it calls it ogg in the file type.

   Also it appears to be repeating the same information 4 times. If it registers all four file types in each part ("container") of the slideshow, why is it necessary to make a slide show with the four in. Do I even need the slideshow?

   Thanks
   rich

   Posted 6 months ago #
8. 

   Dude
   Dude

   Hey!

   Try to add following code to css/custom.css to fix the video controls issue:

   .mejs-container .mejs-controls {
   z-index: 100;
   }

   Regards,
   Peter

   Posted 6 months ago #
9. 

   rumblefish
   Member

   Hi Peter,

   That helped, now I can see the video controls, but the slideshow controls are still appearing over the top, on the right hand side..

   Is there a way to restyle the video player at all? Does it have other skins or styling options. I was looking for something more minimal.

   Thanks again!
   rich

   Posted 6 months ago #
10. 

    Nick
    Moderator

    Hi,

    The ogv/ogg are ok same format one video, one audio and defined in htaccess as

    AddType audio/ogg oga ogg
    AddType video/ogg ogv

    Was weird, I double checked my source https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess and it looks fine.

    i see what you did wrong. I setup your files locally and all works well. 1) do not add each movie and 1 image to 4 different upload areas in Page.

    Upload 3 movies using main media button, copy the http url for the image. (mp4 i always attach), upload the cover and add the url to your mp4 as shown here http://i.imgur.com/5D1lY.png

    Try it please,

    Thanks

    Nick

    Posted 6 months ago #
11. 

    rumblefish
    Member

    Hi Nick!

    Ok, we are getting closer!

    Now I don't have the slideshow controls on top, because now there is no slideshow.

    I took out the other three parts of the slideshow I had built, so now there is only one featured video (the mp4). I thought this was the right way to do it initially, but Peter specifically said: "You need to add all files to the "featured media" slideshow though." So I interpreted that as make one slide for each video. Maybe he didn't mean that!

    Ok, so now the video plays and the video controls are there. Well, all except one. There seems to be a bug with the full screen button. It only appears at the very start of the video. Once the video plays you can't select it.

    Another thing about the fullscreen is that the video plays tiny in the centre. Now, I don't know if this is because the video player doesn't scale, or it's because there is a problem. I know your test videos are pretty small, but when the player is normal size, the video does seem to get scaled up to fit that size, so I think something isn't right. I also noticed that if the video is stopped in fullscreen, the large play button that appears over the image doesn't work. You can only reactivate the video with the small play button at the bottom.

    I also have problems uploading a featured image as a URL. I think someone else mentioned this a while back. The theme (or WP) doesn't accept it and the image thumbnail defaults to the film can icon all the time. I would have to upload that keyframe into the media library, it's the only way I can get it to work.

    Which video player does the theme use? Is it mediaelement? I may want to try and customise the interface later. I can look inside the player folder and see what I can change. I really hate the fullscreen warning thing that appears, for example...

    Anyway that is tweaking for later.

    Thanks so much for all your help Nick
    Rich

    PS. Your htaccess file is huge! Do I need all that info in mine?

    Posted 6 months ago #
12. 

    Dude
    Dude

    Yes, Kriesi uses mediaelements: http://mediaelementjs.com/ - unfortunately I couldn't find a "minimal" skin for it (I'm not even sure if the player supports several skins like http://flowplayer.org/ or if you can only use the default skin).

    Posted 6 months ago #
13. 

    Nick
    Moderator

    Hi,

    Please check the link above to the image i posted ( http://i.imgur.com/5D1lY.png ). The top arrow points to where you can control video size, though I never looked how big the video gets.

    The image explains also where to add the -overlay-image and where to add the LINK to the mp4 file. Repeat everything that is shown in the image please.

    Thanks,

    Nick

    Posted 6 months ago #
14. 

    rumblefish
    Member

    Hi Nick,

    Everything is as you posted in that image. This time I uploaded the overlay image into the library because there is no way to upload it from a URL, because of the problem I posted before.

    The link to the mp4 is correct otherwise thee would be no video at all playing.

    I still have the same problems as above:

    1) Fullscreen button disappears (using Firebug you can see it is actually shifted to below the player)

    2) Fullscreen "Play" overlay button doesn't work

    3) Video only plays small at fullscreen size

    If you change the slideshow setting form "medium" to "fullscreen" size all it does is stretch the player to a full page width and distort it. It doesn't affect the size of the video played at fullscreen size.

    If you look at the mediaelements site that Peter posted (http://mediaelementjs.com/ ), you can see how the video player should work. It is running the same test videos, but their fullscreen player has no problems.

    I wonder if there is a bug in the player set up in my version of Shoutbox (v.12)

    A friend of mine said to check out JW Player also. It's meant to be good.

    Thanks again
    rich

    Posted 6 months ago #
15. 

    Nick
    Moderator

    Hi Rich,

    Yeh I saw in the code... the width and height are hardcoded ... Lets update that player, see if that will do the trick. Download the latest files please http://www.mediafire.com/file/ohii0ng4bgli343/mediaelement.zip ...i put it up there and removed the stuff that's not needed.... unzip it, it is not a plugin, so will require use of ftp to upload. Just please make sure you back up everything before overwriting!

    In fact just change the name of /js/mediaelement/ directory to mediaelement-2 and then drop the entire mediaelement folder in its place that is within the zip. The version in the zip is 2.10 and hopefully it will make life easier a bit.

    Thanks,

    Nick

    Posted 6 months ago #
16. 

    rumblefish
    Member

    Hi Nick,

    Sorry for the delay - I was away.

    I replaced the mediaelement folder with the one you uploaded and it made no difference at all (and yes, I did clear the caches). The same problems remain PLUS one new one: now the video control bar floats halfway up the video display and is too short. This may be due to the css changes mentioned above - I don't know.

    I'm using WP 3.4 also, so it's nothing to do with a bug in 3.5.

    Thanks
    rich

    Posted 6 months ago #
17. 

    Nick
    Moderator

    Hi,

    You wrote 'Nothing happen.' after you installed the files. Were you looking at the cache by any chance? I still see you are using the W3 Total Cache plugin, even though what that means is that you will be making modifications that will show up next month when the cache is updated. It is independent of the browser cache, so clearing your browser cache will just make the browser get a fresh version of the page from.... the cache created by W3 Total Cache. Please deactivate it during development.

    Please use this css file for mediaelementplayer.css https://github.com/johndyer/mediaelement/blob/master/build/mediaelementplayer.css. I just pasted it into your page and everything fell into place, at least with the css.

    I just tested it locally and I am getting 100% screen size.

    **If you have any custom css from before, lets also remove it, specific to the videos.

    Thanks,

    Nick

    Posted 6 months ago #
18. 

    rumblefish
    Member

    Hi Nick,

    I emptied "all caches", which is a W3 option, before and after all the changes. I assumed that would make the changes visible. To be perfectly honest I don't like that plugin anyway, because I don't understand half the stuff it does. I'd rather get rid of it completely. I think my site is slow because of the image sizes more than anything. Anyway that's another issue I have to fix later.

    I'll do what you said above, deactivate W3 and report back later.

    Thanks again!
    Rich

    Posted 6 months ago #
19. 

    rumblefish
    Member

    Hi Nick,

    I did everything that you said and I'm back to where I was right at the beginning, minus the slideshow problem.

    The video plays, but I have no player controls visible, and from what I can tell the fullscreen is still playing the video at a small size.

    ???

    rich

    Posted 6 months ago #
20. 

    Nick
    Moderator

    Hi,

    The only problem I have is that there is a second overlay getting in the way from the new code So the first time you click it, the video plays but if you pause it the overlay that looks like a play button pops up in middle of screen and clicking on it results in .5 second of video till it returns again. But videos play 100% size, controls are there. I am gonna do a comparison between the update and the old code and get that re-appearing button to go away.

    Not as easy as I thought.

    I am using 3.5 wordpress. , new jquerry ui, and new media element player. too many factors. I will keep testing and let you know., but as i said, its one of the customizations , probably an absolute/relative somewhere doing this.

    Thanks,

    Nick

    Posted 6 months ago #
21. 

    rumblefish
    Member

    Ok, thanks Nick,

    I very much appreciate all the trouble you are going to.

    Rich

    Posted 6 months ago #
22. 

    Nick
    Moderator

    Hi,

    Please use these settings. http://i.imgur.com/ae1j8.png

    a) notice the size is 'medium'
    b) i am not adding the image, only the url to 1 video.
    c) there is no content in top area.
    d) there is no featured image.

    ---

    I am using wordpress 3.5

    Please look at second image showing media -> http://i.imgur.com/PIn9R.png

    Notice that the image is attached to the video here. *i attached it directly to the video in the media center* But the three videos are not attached to any post or page.

    ---

    Your code looks completely different from what mine is, and did exactly what I wrote here.

    Please email me a login/pw usjahm (aaattt) gmail (ddoott) com , because your settings are not same somewhere.

    Thanks,

    Nick

    Posted 5 months ago #
23. 

    rumblefish
    Member

    Hi Nick,

    I did as you said (or as far as I can work out from that image you sent). But I still have issues.

    I didn't upload the videos to the Media library. I uploaded them directly to the /wp-content/uploads/films/video-test/ folder on my host using ftp, and I am linking to them directly via a URL. Maybe that is why my code is different.

    I just sent you a username/pasword so you can access my site anyway.

    Thanks
    rich

    Posted 5 months ago #
24. 

    Nick
    Moderator

    Hi,

    Now you are updated, wpml is working, whether you use the child theme or no is up to you since thats a lot of custom templates you will have to re-create in the child theme. I am not sure if you want to do that or no. Maybe easier to let sleeping dogs lie. I will try the videos again in the next few days, sorry about the delay.. the holidays and all. :)

    Thanks,

    Nick

    Posted 5 months ago #

RSS feed for this topic

Reply

You must log in to post.