jinsookang

luisbonie wrote:
One other thing, How do I remove the black boarder around the video? I did resize and when it plays the border is gone, but when it’s loaded it has a side and bottom border?

Any thoughts on this?

It sounds like both issues are due to some inherited css styles that cascaded to the player. I’d recommend using Safari or Chrome to see what css is actually causing this, and either delete those css styles, or override them for the player. In Safari, enable the developer menu in Preferences, then right click on where the style is off, and select “Inspect Element” and that will show you where the style is defined for that element. If you expand the computed style panel, you can see where in the style sheet that border comes from.

jmahaney wrote:
Hello, having beginner trouble.I’m new to this plug in and video for wordpress. I could use some help, and here’s what I tried.
I used the MIRO Video converter for a wmv to format into webm and mp4, The results of the same vid are; INTRO_2CM.webmvp8 and INTRO_2CM.mp4video.
Then stored them at the hosting site (bluehost.com) via Filezilla.
The path looks correct in the video directory for this plugin;
/home1/teachit9/public_html/videos
In html mode I individually inserted these short codes with no luck in ie, chrome or firefox;
[video webm="INTRO_1CM.webmvp8.webm"] – no video appeared.
then I tried the short code,
[video mp4="INTRO_1CM.mp4video"]
then I tried the short code,
[video file="INTRO_1CM"]

I’d recommend first renaming all of the video files. The 3 video files should start with the same file name before the period, and end in the 3 different file extensions: .mp4, .ogv, .webm. So you 3 video files should be named:

INTRO_1CM.webm
INTRO_1CM.ogv
INTRO_1CM.mp4

Then use the short code:
[video file="INTRO_1CM"]
and the video should now be visible.

Thank you for your interest and suggestions.

From your screen caps I see you use “file:///…” as the file path. That shouldn’t work. It should be just the file path as your operating system expects it. Like what you have but without the starting “file://”.

It would be interesting to put a button to add a video in the form of new entry. So we should not write the code.

Thanks for the suggestions. I agree that would be a good feature.

You should be able to tweak the skins yourself by editing the CSS files under:
wp-content/plugins/secure-html5-video-player/video-js/skins

I think the CSS around where it says:
Big Play Button (at start)
is the place to do the changes.

Thanks for the feedback. We’ll definitely look into making some of the skins more customizable, or possibly add some new skins in the mix.

Also, to resolve the sizing issues for the player, you may have to set the short code width and height attributes for your video, or reset the setting values in the plugin options.

The form of the video directory does not work, because it always take the root of the web page, not the directory where the videos are, and to show a video I have to put the entire address in the code: [video mp4="https://.../videos/xxxxxxx.mp4"], or this another way: [video mp4="wp-content/uploads/videos/xxxxxxx.mp4"]. This happens to me on the internet and on localhost.

Could you show me how your setting for the plugin look like? It should properly be loading from the video directory provided that the directory is set in the plugin options and that it exists in the file system. Then you need only set the file name of the file, not any path.

Well, yes, it would. Technically, that file is hosted on our site. It is just the main www.* domain which is on the same server as our test site. The test site is just a subdirectory / subdomain off our main site.

This actually simplifies matters. You don’t need to use the full URL at all then. Just set the video directory setting in the plugin settings to be the path where you store your videos, and then use the “file” short tag attribute to set the name of the video file (removing the file extension).

So in your case it would be:
[video file="BigBuckBunny_320x180"]

For converting to Ogg/Vorbis ffmpeg is a good option. Most GUI programs that convert to Ogg actually use it in the background. An easy one to use is MiroVideoConverter, which uses ffmpeg. There is a complete list of encoders for OGV here: https://wiki.xiph.org/index.php/TheoraSoftwareEncoders

For HTML5 video to work in Firefox you will have to have the video is Ogg/Vorbis format, not Mpeg4. This is a decision made by the Firefox development team for their implementation of the HTML5 video tag. If you only have the MP4 version of the file, it will work in the latest IE, Safari, and Chrome. The best combination to have is Ogg/Vorbis and Mpeg4, because that gives you Firefox compatibility, Flash fallback and playability on IE and Safari.

You should be able to find many free converters for Ogg/Vorbis. The one that produces the best files for me has been Firefogg:
https://firefogg.org/
I keep an old Firefox version installed just to use Firefogg.

But there are many out there.

It would be ideal if you downloaded that video and hosted it on your site. That way the video wouldn’t have to be loaded entirely and it can be pseudo-streamed from your site using the plugin Streaming remote files will be hit or miss depending on the site that is serving the video. Many sites protect their videos (and images) from being accessed directly this way, so while it may work temporally, it is not likely to work long term.

Unfortunately we would be unable to do this because MPEG files aren’t supported as a playable file by HTML5 video or Flash. But you should be able to recode this into Mpeg4 very easily using Handbrake. Here is a how to on that:
https://diveintohtml5.org/video.html#handbrake-gui

Thanks for the feedback. We’ll work on making widget support happen in the next version.

Until then, you can probably get what you need done by using a short-code widget plugin. I found one, but haven’t verified yet that it works:

https://www.ads-software.com/extend/plugins/shortcode-for-sidebar/