Your cart is empty
school of webcraft: Secure HTML5 Video Player Plugin for WordPress
Download Video: MP4
This is a sample video explaining a) why we created the WordPress plugin Secure HTML5 Video Player, and b) what new capabilities it has vs. the existing HTML5 plugins in the wordpress.org marketplace at the time we built it.
This plugin is built using videoJS so that we could secure some of our how-to videos (made custom for clients and coursework), because some of our videos aren’t free. We hope you find the plugin helpful! Please share comments or update the plugin yourself if you see areas needing improvement.
NOTE: the video shows an earlier version of the plugin with a different name. Rest assured it is the same thing.
Having trouble installing and making it work? We are happy to answer questions when we’re not working on paid client work. If you can’t wait, might I suggest hiring an oDesker for help? It was one of our best discoveries of 2011.
i couldn’t do this.
i downloaded the plugin and activated.
my wordpress is in localhost.
i used xampp server.
i tried to change video directory :
“http://localhost/videos/_5BFrom_20www.metacafe.com_5D_204920302.14857403.4.mp4″
when i using wordpress, i can download my this video with idm program..
Secondly, i genereted a password,
bu it didn’t work too..
i am new about wordpress..
my question may be dummy question..
thanks for your readings..
It sounds like you’re trying to secure the video. If that’s the case what you need to do is either:
A. Change the video directory to a path outside of where website files are visible and served, so it would be not under the public_html directory, but a path above it. Right now your setting is in public_html/videos. They’ll have to move the contents of the folder over to the new place, and set the video directory setting in the plugin settings to the new file path.
B. Password protect the videos directory with auth basic so that it is not accessible to general users.
From the 2 options, A is easier.
After protecting the video directory, if you want to totally restrict access to the video, you need to protect the page that serves the video by password protecting it, or use a plugin that handles user access to WordPress pages, like Cart66, to protect the page from public access.
thanks duncan
it helps a lot..
thank you so much for creating this plugin. What is funny is that the other day I was looking for a away to host my video on hostgator. I red some articles about it, but it seems a little complex. So, I was going to do it some time in the future. But, thank you for saving me time!!
Keep up the good work.
We’re glad you’re enjoying it and hope it saved you some time!
thanks for answer.
this plugin just amazing.
Thanks a lot…
Looks good. I’ve always wanted secure, so that’s good. I’ve always wanted html5, so that’s doubleplusgood. The thing I guess I’ll find out is will it open with that lightbox effect like my trusty old but now broken “Flash Video Player”…
hey guys how to you get a video to loop??
have tried loop in options no joy
Unfortunately, the video loop attribute is not support across all browsers consistently. But we will try to see if we can get this feature working in the next release. Until then, you can probably get it to work using Javascript. I did some research, and this seems to work on most browsers:
jQuery("video").bind('ended', function(){
this.play();
});
Hi,
First let me say that I love the plugin.
I have 3 questions for you.
1. Am I to assume that I can’t use my flv files for this player.
2. Can mac’s play videos using this player?
3. What is the “secure seed” for, I want these videos secure above the html folder.
when I use the short code [video file="xyz"] nothing shows up.
Any advice would be greatly appreciated
Willim R.
1. Unfortunately, FLV is not a format supported by the HTML5 video specification. But you can convert that FLV video into MPEG4 H.264 using many free programs, and that video will play in either the browser’s HTML5 player or the fallback flash player. Handbrake, FFMPEG, Miro Video Converter, Adobe Media Encoder, Firefogg, are all good converters that will convert to the format you need.
2. Yes, it’s tested and verified to work on the following Mac browsers: Safari, Chrome, Opera, & Firefox.
3. Secure seed is used to generate the unique session ID’s that authenticate the pseudo streamer with the browser’s video player. It can be any string that fits in the space, or you may generate one randomly.
4. If the video is not showing up, the likely problem is that you don’t have the video in the right format, named the with the right file extension, and located in the video directory you set. Make sure the video file(s) ends in one or more of: mp4, m4v, ogv, webm. And make sure the video directory is set to the directory that holds all the videos.
So to clarify my question… as you use shortcodes, can I get this to work with a lightbox? I usually have five or ten videos on a page and would prefer to use thumbnails.
It would depend on the type of lightbox you’re using. I’m not sure it would work on all types of lightbox’s. If it supports the video tag as is in the lightbox, it should work. A point of advice: we’ve done HTML5 video in light boxes before, and it tends to bogg down a browser if you have too many video tags inline in a page. It’s best to load in the video tag dynamically into an iframe, which is then in turn in a lightbox.
This is a really cool plug-in! I love the interface. I am trying to use it to play a video that’s hosted by Amazon S3. When I specify that in the video directory, the player won’t recognize the file. What am I doing wrong? The directory should be https://s3.amazonaws.com/BucketName
Thank you!
-Sandra Gardner
The video directory feature isn’t really made to work with video’s hosted remotely – it expects the video directory to be on the same server as the WordPress. If your website was somehow hosted on Amazon, then you might be able to that.
You may be able to get it to play by writing in the full URL of the video in the short tag. Like this:
[video mp4="https://s3.amazonaws.com/BucketName/videofile.mp4"]how does the player play flash (flv) files through external url? does it play flv first then make mp4 available if that does not work? or visa versa or not at all? i am not sure what it is to do. i want to play flv video or mp4 if it is mobile phone and have the image there too can you help?
First you will need to convert the FLV file to MP4. MP4 is supported by Flash players, so there shouldn’t be a need to have both FLV and MP4. Then upload the video to the directory on your server that you set to be you video directory. Then insert the video short tag into your post/page using the short code:
[video file="filename"]
You don’t need the file extension if you use the “file” attribute. It should play on most modern mobile devices because we’re following the standard. We tested on Android and iOS.
Hi there, thanks for the plugin, having a problem getting it to work:
1. I downloaded the plugin, put it in html_public, activated it in the ‘plugins’ menu.
2. I created a text widget in the sidebar and entered the text
[video mp4="http://www.remarkablyyou.com/Videos/CIMG0075.mp4"]
and all I get is the actual text. Right now, the video is in the public portion of the domain. Sorry, HTML newbie here. Thanks for the help.
Unfortunately WordPress does not allow you to use short tags in a Text widget. You’ll have to download another plugin that allows you to use short codes in sidebar widgets. This is one that does that: http://wordpress.org/extend/plugins/shortcode-for-sidebar/.
We’ll try to make widget support with a nicer interface in a future version.
Great plugin! I would like to add a continuous loop to a video if possible.
Thanks!
We’ll work on making this in the next version. Thanks for the suggestion. Until then you may be able to get it to work by inserting this Javascript into your template.
jQuery("video").bind('ended', function(){
this.play();
});
Which template file?
Thanks!
This plugin has worked very well for me, but I would like to add some specific css and I’m looking at your comment at the top of the video-js.css file :
“Box containing video, controls, and download links.
Will be set to the width of the video element through JS
If you want to add some kind of frame or special positioning, use another containing element, not video-js-box. ”
And I can’t see how that’s possible given that the video falls inside the ‘entry’ class without any other markup — and I happen to share the ‘entry’ div with different types of posts
While I have some flexibility in custom category pages (where I simply call the ‘entry’ class something else), I really would like to be able to post videos on the home page (index.php) but give them a different margin and look from ordinary posts.
Any ideas? Thanks a lot.
I think you can do what you want to do by surrounding the short-tag with your own div with a specific ID or class, and then apply the styling to that div wrapper. You should be able to also override the CSS used by video-js with your own CSS, provided that the new CSS is loaded later in the page than the video-JS one. You can write it inline at the end of the head tag, for example.
Like the plugin, except the flash fallback player doesn’t keep the correct aspect ratio in full screen mode, it stretches to fill the monitor. So for my portrait widescreen monitor, things got really stretched.
Unfortunately we can’t do anything about that, aside from switching flash fallback players. If you know of one better than Flowplayer, we’ll be happy to look into it.
There seems to be a lot of discussion on the Flowplayer forums about how to fix it.
http://flowplayer.org/forum/2/20591
“As already mentioned in this discussion, you need to set the clip’s scaling property to “fit” to guarantee the correct aspect ratio.”
Hi I’m really liking the look of this plugin.
I’m wondering if there is a way that I could have a video (using this plugin) “popup” in a lightbox on page load (ie my home page).
I have found a plugin called “WP Super Popup,” but it doesn’t seem to work with shortcodes; only HTML.
Perhaps there’s a solution you could recommend. Then again perhaps not – but I thought, “asking is free!”
Thank you.
Some light boxes support popping up iframes. I’d recommend using one of those. I believe Fancybox is one, but there are others. In your template, create a barebones page template that will only show the video. Then post your video to a page that uses that template. Then set the lightbox to have an iframe that opens that video page.
Thanks all for your helpful comments. We’re so pleased that so many of you are using the plugin!
There’s no apparent way to EMBED the video player in my wordpress site. There is no code provided in the player settings; there is no option under widgets to drag the player to the sidebar; there is no clue at all.
Hi Audentes,
To make the player appear, use a short code in the content of a post / page. e.g.,
[video file="webcraft_intro_8_3_11"]
And, to answer your other question, the plugin is not currently widgetized. shortcodes only work in a post / page.
he there, I am installed your plugin and it works fine in Safari, but not in IE and Firefox. It shows only a white screen with “2008-2011″ and plays the sound. Could it be that the browser or the tool doesn’t support mp4??
Also I am trying to center it on the page without having to edit the template source css.
beautiful tool if it can work in Firefox and IE!
On Firefox, you’ll have to convert the mp4 file to OGV format to get it to play in HTML5 video format. If your video is not playing in IE 8, then its likely your mp4 file is not in the proper encoding scheme compatible with HTML5 video. It has to be in h.264 format. See:
http://diveintohtml5.org/video.html
for more information.
this plugin don’t work with wo3rdpress 3.2.1 =(
It does work. You just need to follow directions and set it correctly.
Hello, it’s me again! Sorry to bother you. This is my initial shortcode:
[video file="http://habeascorpuscanada.zqlz.org/HabeasCorpusCanada/videos/WHISPER.mp4" preload="yes" autoplay="yes" width="580" height="435"]
That’s in this draft page: http://habeascorpuscanada.zqlz.org/HabeasCorpusCanada/video-whisper/
The player was triggered in the sense that it seems to be there, but no video shows up.
I then tried another path to inside “public” but outside (I think) the WordPress content folders, in the event this is an 8-mg WordPress limit problem (not sure). Video still doesn’t play:
[video file="http://habeascorpuscanada.zqlz.org/Videos-Mp4/" preload="yes" autoplay="yes" width="580" height="435"]
That’s in this page: http://habeascorpuscanada.zqlz.org/HabeasCorpusCanada/video-ekos-the-annexation-survey/
I’m probably missing something simple. These are mostly larger than 8MB, but being locally hosted in powrhost.com, I thought the 8MB limit could be exceeded. This is my goal, I need all locally hosted videos. Sorry to be so dense about this.
Thanks for your time.
Actually, you’re not using the “file” attribute correctly. When using the file attribute, you upload the video file in the directory you set as the video directory and then only use the file name in the file attribute. So in your case:
[video file="WHISPER"]
This plugin isn’t meant to serve files from servers that are now your own. But it may work if you set it in one of the other attributes, like mp4. But then the video wouldn’t be served secured.
I uploaded, but no matter what I do, I cannot get the player to work in preview so that I can make sure everything is right first. It’s really frustrating. Do I have to publish it to test it?? That would be a nightmare if I have errors. I’m getting traffic to the site already and don’t want to publish and then edit and the republish and edit, etc. Advice?
What does your short code look like? It should work in preview, unless you have a conflicting plugin that also uses the “video” short code. Make sure you set the video directory correctly and upload to only that directory.
Guess I’m a dummy. I can’t figure out how to use it.
By what means is the video uploaded to said directory? By simply embedding a video using the ordinary wordpress media library?
So I have the cool short codes. To what do they attach? the uploaded video url, or the file in my computer?
Bruce,
1. In your WordPress dashboard, go to Settings > Secure HTML5 Video Player and there is a space there to specify the location of the folder where your videos live.
2. On the page or post where you want the video to appear, use a shortcode , e.g.:
[video mp4="video_clip.mp4"]
on that same admin page, there are examples of various shortcodes for the type of video you’re serving up.
3. You don’t need a player. VideoJS and FlowPlayer are part of the code.
Hope this clears things up. Good Luck.
Lucinda
Basically, you create a directory, and upload the files to it using FTP. You don’t use the media uploader, because then those files are exposed publicly and can be accessed by people who do not necessarily visit your site or not. It could be this is over your head. If that’s the case, you should hire someone to do this for you.
Okay. I created the videos folder at my html directory and FTP’d a video. Now it’s a matter of . . . . getting the js player working? I installed that plug in. Not sure how much code I have to write in for that.
Sorry that I can’t handle this. It’s all new to me. I just want to make it work!
All you would need to do now is insert the short code of the video into a post where you want the video placed. Like:
[video file="filename"]
Then publish the post/page.
You can see and download the video from looking at the source. Am I missing something? How does this secure it?
The video of course can still be viewed. It wouldn’t be useful to have a video that cannot be viewed anyone. But the idea is people will not be able to access the video without loading your page first. Also, if you password protect your page, then the video is not accessible, because the folder it resides is not accessible.
everything is all set up and works -EXCEPT, having trouble with on the browser, explorer. Any ideas?
Hi,
I am new to creating web MPEG4/H.264 videos that display in HTML5. I do have a fair amount of background in video. I am trying the most basic way to get a video to display. I have a post with three examples of streaming video in a WordPress Post. None of these seem to work. I am assuming something is wrong with the video format. The plugin is configured to point to the vid2 folder and it is presently not password protected.
Plugin Path: /home/abtechno/public_html/vid2
(1) using your plug in
(2) using a standard HamptonTest
(3) Using HTML5 tag:
Your browser does not support the video tag.
None of them seem to work. I created the clip using Compressor on a MAC and the video plays back in Quicktime and VLC. The settings I am using for creating the video are below.
Name: Untitled MPEG-4
Description: No description
File Extension: mp4
Estimated file size: 205.75 KB
Audio Encoder
Format: MPEG4
Sample Rate: 44.100kHz
Channels: 2
Bits Per Sample: 16
AAC encoder quality: high
Data rate: 64 Kbps
Video Encoder
Format: MPEG4
Width: 320
Height: 240
Pixel aspect ratio: Square
Crop: None
Padding: None
Frame rate: 15
Frame Controls: Automatically selected: Off
ISMA Profile: 0
Constant bit rate: 368 (Kbps)
Hinted for streaming server with
packet size: 1450 bytes
and packet duration: 100 milliseconds
Enhanced Podcast: Off
Any ideas?
The Post itself is:
http://abtprojects.com/orbit/2011/10/01/abt-video-z-time-hampton-tour/
One last thing. I tried two other H.264 compression options using Sorenson Squeeze 5 (sorenson H.264 and MainConcepts H2.64) I changed the link and HTML 5 tag to the MainConcepts H.264 file. The link plays the video on my MAC in Safari and Chrome. The top four versions are using your plug in. the
[video mp4="HamptonsTest.mp4"]
[video mp4="HamptonsTour_iPod_Lg.mp4"]
[video mp4="HamptonsMain264.mp4"]
[video file="HamptonsMain264"]
None of them are working. I moved the Video path inside the WordPress Site and updated the plug in settings: /home/abtechno/public_html/orbit/vid2
Hi,
I can’t see the plugin in Safari and IE. I know IE that I need to use ogv for most browsers (so I am) and mp4 for IE. But how can I create a shortcode in the page/post with both ogv and mp4 options available, so there won’t be two instances of the video in one page/post?
And also, why doesn’t it work in Safari? I thought ogv was compatible with this browser :/
Therese
I now have it working in Safari using
[video ogg="vts.ogv" mp4="vts.mp4"]
but still no luck in IE
Hi Therese,
If your video is not playing in IE 8, then its likely your mp4 file is not in the proper encoding scheme compatible with HTML5 video. It has to be in h.264 format. See:
http://diveintohtml5.org/video.html
for more information.
Lucinda
Great job!
hello,I have a problem,I couldn’t see the video,only appears loading screen..
I created a location outside of public_html and upload them videos about 7mb.I tried localhost and
nothing4hosting but it didn’t work.my shortcode is true.could you say anything for me?
Hello,
Often this problem relates to a bad video file. Here’s a video that is short and I know works.
http://www.trillamar.com/wp-content/uploads/2011/12/test_video.mp4
save it to your computer, upload it to the directory you’re using for video storage, and see if it plays.
Good luck.
Lucinda
Hi,
Thanks for the plugin. I encountered a script error when viewing mp4 videos in IE8 but I managed to fix it by making a simple change. Details here:
http://is.gd/vMVc8I
Thanks
Thank you for developing great plugin, however I have a few questions:
1. Is it possible to modify plugin to always use directory in other server than website is hosted ? Most of public videos websites uses CDN networks to improve performance, so it is important to host videos in CDN rather than webhosting server
2. As I understand, in order to have IE/Firefox/Chrome/Safari + iOS compatibility, I have to upload these files:
my_video.mp4
my_video.ogv
my_video.png
and use this tag:
[video file="my_video"]
Will this guarantee 100% compatibility, or I have to use alternative setup ?
3. What should be modified to use this plugin with Google adsense or other video advertising networks ?
Thank you in advance for your time and answers
1. It should be possible to modify it to host the videos on another media server. I’m sure if you hire a web developer they will be able to tell you the different options. I think the complicated part would be to have the secure keys on both servers match up, and to have the plugin on the web server recognize the existence of the files located on the media server.
2. Yes, providing these formats generally provides compatibility across all known HTML5 platforms.
3. This would depend on the ad service. If I was implementing a video ad service API, I would provide a way to provide the URL served content as a parameter to the URL of the ad video, so that the video ad plays first, and then plays the content automatically after ad finishes. I would hope such a service exists already. But if doesn’t, you only option may be to present the ad tag in a div tag that resides in a more forefront z-index (like a lightbox), and have the ad close automatically after a certain point, or force the user to close the popup.
Great plugin. One interesting thing though…while the videojs player plays html5 video just fine in Firefox7 and IE9, your plugin does not. Why is that if it uses videojs code.
For me, I would rather use the html5 player on all platforms that support it, rather than defaulting to the flash player.
As a note, I downloaded all of the files from the videojs site to test each player. The videojs player always shows the html5 player. Secure HTML5 video player does not.
I’d really appreciate any help on how to get it to always display the html5 player. (If I deselect Flash as an option in the Secure HTML5 player, it simply ceases to function in IE9)
All the best!
Stephen
What file formats are you providing for your video, and what does your short tag look like? You’ll need to provide an mpeg4 file format for IE9. It could also be that you are running IE9 in IE8 or IE7 mode. HTML5 video does not play on any version of IE except 9, including IE9 running in those other modes.
If I could get it to work, this would be the greatest thing since sliced bread. But after futzing with with it for a couple of hours, still no video playing. Unfortunately I don’t even have a coherent question…
Hello Fred,
Often people are banging their heads against a wall due to a bad video file. Here’s a video that is short and I know works.
http://www.trillamar.com/wp-content/uploads/2011/12/test_video.mp4
save it to your computer, upload it to the directory you’re using for video storage, and see if it plays when you use this html syntax (IN HTML MODE, not Visual Mode):
Good luck.
Lucinda
Hi,
I uploaded the video in mp4 h.264 format, the video plays, but takes too long to play, for example if a video weighs 100 mb, takes 10 minutes to play!
There is no way that the videos will load while playing like youtube
Thanks
Hello,
100MB is too large a file size for a video. Youtube saves the video into a compressed format so that the filesize is small, so it plays fine. I’ve had no trouble with videos encoded using Camtasia Studio. 5 minutes of footage = 15 MB kind of ratio of duration to filesize. I’d try to limit your filesize to 20 MB max and that should be a long duration video if it’s that big.
Lucinda
Hello,
I reallyy like this plugin, it is amazing, but still a problem bothering me.
I set a video in my post and it can be played in Safari and Chrome(Firefox not tested, but I guess its ok), but in IE9, it shows me an error information”200, Stream not found. NetStream.Play.StreamNotFound. clip:[Clip]www.xxx.xxx/xxx/plugin/secure-html-video-player/flowplayer/xxx.mp4/”".
This message confused me. And I tried to copy this .mp4 to the folder it requires, and still it shows up again. Maybe it is a dummy question, but how can I get it to load the video from the right path like Safari and Chrome can do?
How does your short tag look like? It looks like the browser is trying to load the flash fallback instead of the HTML5 video tag. What video file formats are you providing. To have the best compatibility across all browsers you should provide both mp4 and ogv.
I’d also advise that you rename your files so that there are no spaces in the file names.
Hello, it’s me again.
Here is another problem now: shortcodes don’t work.
The origin was like[video mp4="http://www.xxx.xxx/video/xxx.mp4"] with options, and it worked well. Then I tried to use shortcoeds and set the path of the video in Settings, and made it like this:
[video mp4="xxx.mp4" preload....]
Then, it doesn’t work with any browsers. Im a newbie of HTML and maybe this is a dummy problem, but really I need some advices. Since the full path works, the file format should be all right, so I am confused and have no idea where is the fault.
Also about the IE 9 problem, why there comes a “[Clip]” to the filename with full path?
I think you need to use the file attribute. For ex:
[video file="xxx"]
It could also be that your video directory is not set correctly.
Can’t get the “secure” part to work in IE9. I have the videos up a level from public_html. All works fine in FireFox… meaning, if you right click and save video, in FireFox you see getvideo.php but in IE9, you can download the .mp4. EVEN here on your page. Any ideas to fix???
Hi Jerome,
.
You’re not the first to bring this up. We use the Secure HTML5 Video Player with another plugin, cart66, that handles access to the pages that have the videos. That way, only members can see the videos. I personally don’t have a problem with them saving the mp4, if they are on a page that they are allowed to be on. For some, it could be a feature
Lucinda
Hi there,
Great plugin, thank you. I just can’t get it to work yet.
I’m using Media Temple grid service for hosting, and wondering if that has anything to do with it.
I’ve tried basically all different types of configurations and i’m getting this error:
.StreamNotFound, clip: ‘[Clip] ‘http://www.***.com/wp-content/plugins/secure-html5-video-
Thats just part of it, it’s copying weird. But anyways, some sort of “200″ error. Any ideas? Thanks.
Opps. Got it working somehow. Deactivated all plugins, activated one by one, but nothing caused an error again? Odd.
Okay, next question is, how would I set this up for a CDN? I’m new to CDNs.. Would I simply upload it to the CDN and use that for the URL? Could it be cloaked still?
Lovely plugin.
Only thing that doesn’t work for me for some reason is setting the video directory.
When I set this to /host/videos, upload movie.mp4 there and add the code [video mp4="movie.mp4"], it will display an error message that http://www.domain.com/movie.mp4 wasn’t found – you’ll notice the missing /videos/ in the URL.
When I use the whole URL as a link, it works though so it’s no big deal.
I managed to get the plugin working nicely for Chrome, Firefox and IE, by having an mp4 and ogv version of each video.
But it doesn’t seem to work on the iPhone – I’m getting a page where the location where the player should appear simply looks empty(white). It doesn’t show the download link either. Any clue?
Do I need to convert the video to some other format?
Thanks!
Hi Shai,
For the video plugin on iPhone, it should work on iPhone if you provide a correct MPEG4/h.264 formatted video. For this, it’s best to use a tool/converter to create the video. It sometimes also matters that the video is “web optimized” which means that the start of the movie is formatted in a way that lets the browser know how to best load the video. Usually the converter will do that. I usually use
Handbrake: http://handbrake.fr/
Miro: http://www.mirovideoconverter.com/
or Adobe Media Encoder: http://www.adobe.com/support/downloads/product.jsp?product=160&platform=Windows
for this.
Good luck!
Lucinda
Hi Lucinda,
I host a website similar to yours, hosting videos that make a profit. I really like the concept that your plugin provides, and thanks for providing them.
However, I ran into a little problem with using the plugin. I saw the placeholder for the video, but I don’t see the video loading, only an X. An below it is a link that says “Download MP4″ (btw, how can I remove this?).
I have verified all of my configuration (I can directly access the video if I use ‘DIRECTORY_PATH/VIDEO_NAME’), and I’m using the following syntax: [video mp4="File.mp4"] and you can view my page at training.cyntilin.com/fryy-samply-vidyo/ (replace all ‘y’ with ‘e’).
Angela
To remove the download link, you should uncheck: “Enable download fallback” in the options.
Do you have any instructions on how to configure it to work with WP Multisite? Thanks.
Unfortunately we haven’t done any work towards making it work on the multisite version of WordPress. But now that you bring it up, we will try to make it compatible with that.
Pingback: Probando el agregado para mostrar vídeos y audio con HTML5 | Sweet: Geek · Life · Love
I’m not able to get full screen mode to work correctly. Seems like a videojs problem maybe?
I googled this and found some other similar reports and even a guy who claimed he has a fix (http://gltovar.com/blog/?p=258) but that didn’t help either.
Care to look at my page and see if there is something I’m doing wrong?
http://www.neebula.com/demo-page/
Thanks a lot!!
Full screen generally seems to perform differently in different browsers. We do rely on videojs for the video playback, so perhaps updating the videojs directory in the plugin would make it behave better. It also has to do with how browser support full screen as well.
Hi, this is my second comment posted, and I’m still having issues with getting the video to display using your plugin.
First of all, the problem is not with the video file. I’m running a test at local server, and here are the shortcodes I used (they refer to the same video file).
[video mp4="http://localhost/videos/Hardware4.mp4"]
[video mp4="Hardware4.mp4"]
and the directory path is configured to be /Applications/XAMPP/xamppfiles/htdocs/videos. Interestingly, the one with localhost is showing up, whereas the other just have this loop that goes on forever. The HTML below tells me that the file is not found? but if I type in ‘/Applications/XAMPP/xamppfiles/htdocs/videos/Hardware4.mp4′, the video show up immediately, where did I go wrong?
The HTML output is as follows:
Are there any errors in the web browser’s error log? Also, could your try this short tag instead:
[video file="Hardware4"]
When you use the video directory, you should be using the file attribute with the file name sans the file extension.
hi, just wanted to say i’ve been using this plugin for about 4 months now and it’s great! i don’t know much about video and had read that iphones won’t play .mp4, but my iphone plays the videos from my site just fine using your plugin! so thank you for providing this as an open source asset to wordpress users =)
happy new year!
anh
Pingback: Great WP video plugin: Secure HTML5 Video Player | Worldwide Penguin
iOS devices should play MPEG4 files fine, but the issues can come up when they’re not HTML5 video encoded. There are many codecs for MPEG4, and the only one that is supported for video playback on the web through the video tag is H.264. Also, if there’s an option to “web optimize” the video, it’s usually a good idea to use that option when you encode the video.
Very interesting plugin, have you seen any of the minor issues with using the flow player system and the license model they use? just curious about that flow player seems to be a nice alternative but something about the license model they use is a bit odd, (
We have seen those issues. For some cases, you’re forced to see a Flowplayer watermark, so that’s the reason why people choose to purchase the license. I think it’s best practice just to provide all the open video formats so you can avoid the Flash fall back altogether.
How is it that you claim the video is secure when I can view source, copy the file url, paste into browser and access it or download it via that generated link?
That is exactly the behavior I am trying to prevent, and is why I am here to test your plugin.
Please advise…
The video can be secured by securing the page that hosts the video. So if you password protect the WordPress post, or use some other user account system with WordPress, like Cart66, you will not even be able to see the link to the video that is in the tag. The link to the video is a temporary session link to the video that is changed daily. If you know the link today, you will not know it tomorrow without having access to the page where it’s served. No system is entirely secure, and HTML5 video being an open DRM free video protocol, it is even more problematic to secure. But this is, I think, the best that can be done.
You can further secure the videos by serving it on an SSL connection to stop possible packet interception, but that is probably going overboard.
Hello
Is possible to use only OGV (or WEBM) videos for IE, FF and Chrome with this plugin?
Thank you
Unfortunately, the video compatibility issues would make that not quite work across all platforms.
WEBM is supported by Chrome and some later versions of Firefox.
OGV is supported by Chrome and Firefox
H.264/MPEG-4 is support by IE, Safari, Chrome, iOS, Android, and Flash players
To have the greatest amount of compatibility, you pretty much have to have MPEG4 as one of the video formats. We usually go with OGV as the other format because not all versions of Firefox support WEBM, and no versions of Firefox support MPEG4.
Great work! Love love love this plugin!
I just did a validation with validator.w3.org and found your plugin giving the following errors:
Warning Line 65, Column 146: The language attribute on the script element is obsolete. You can safely omit it.
…ayer/video-js/video.js’ language=’javascript’ type=’text/javascript’ >
Warning Line 66, Column 54: The language attribute on the script element is obsolete. You can safely omit it.
…ge=’javascript’ type=’text/javascript’ > VideoJS.setupAllWhenReady();
It’s just saying that the “language=’javascript’ ” tag can be omitted from the code.
Thought you’d like to know!
Thanks for the heads up. Dreamweaver still thinks this is a valid attribute, but I guess it was removed at some point from the standard. We’ll make sure to update it accordingly.
Finally an awesome WordPress video plugin!
This works great in Firefox, Chrome, Internet Explorer as well as on my iPhone and iPad!
Superb!
Nothing happends when the page loads. I have used the test_video.mp4 file in a folder outside public html. I have used every kind of directory structure in the video directory field i can think of.
Can please someone help me?
Kind regards,
Alex
What does your short tag look like? Assuming your video directory is set correctly in the settings, the short tag would be:
[video file="test_video"]
The issue might be that your hosting provider is somehow masking how the directory structure looks like. I’d look at your phpinfo page (by creating one http://php.net/manual/en/function.phpinfo.php ) and see how your public_html directory looks like as a full path. Then use a directory under public_html as your video directory. If it works, then just password protect that video directory with an htaccess password and you’re all set with a secured video directory.
Could I get this to work with the video files being on Amazon S3? It looks really cool! Thank you guys.
Cant wait for your answer.
Unfortunately, no, it’s not likely you can get that to work. The plugin is really meant to work with videos that you host on your own website’s server, and much of the automatic aspect of it depends on the video being a file in a folder. We’ll try to see what options we can provide to support Amazon S3, or other types of offsite media servers in the future.
Hi there,
First would like to say congratulations on producing such an awesome plugin. I really like the way you can have an image display over the top of the video player, and love the way the video player is seamlessly integrated within the browser. One query if I may, I am struggling to display transparency with my image overlay. Does the plugin support png transparency for the image?
Look forward to your reply. Thanks
Kind Regards,
Damian
Thanks for the kind words. The plugin simply uses the web browser’s standard HTML5 video tag, which has support for a poster frame as an attribute. How transparent PNG’s behave in the poster frame would likely be browser dependent. In most browsers, I think you will likely see white or black behind the transparent pixels, so I don’t its something you can use consistently. Usually we just select one of the frames in the video that look representative of the video to use as the poster frame. And since videos don’t have transparent pixels, we’ve never come across this as an issue.
I installed this plugin and noticed on the hu.css file that on line 33, there is an unused and unclosed “width” attribute, voiding the “left” attribute. Also, the video tag for HTML5 needs to have the height set to 100%, at least it did for me. Great plugin though! Simple to use.
Thanks for reporting this. We updated it with the fix you suggested. I think height of the video tag can be set using the preference setting for height. Is this what you set to 100%? I wasn’t sure where else you would be referring to.
Hi Lucinda, Can you share the name of your hosting company that you use. I am currently at the small business authority formerly crystal tech. Have just created a new site to offer pc maintenance and repair videos (basic set by donation, advanced later for small fee.) The short 30 sec (5 meg) video works great with your secure html 5 player but my next tril of 4 mins (11 megs mp4 and 20 megs .flv) freezes and blacks out after 30 sec or so. Tried IE7 w latest flash and/or google chrome. I have great bandwith, my pc is a quad I-7 3.0GHz largest lga, 12 gigs ram, 2 solid state hard drive. I keep my ie temp folder clean and it is set to limit 500 gigs. I think it must be my hosting comapny even though I have an upgraded plan, lots of bandwith and hd space. They claim I should be good up 32 megs but I read your blog where you recommend under or no more than 20 megs-so I use that. still no solutions, can u please advice. I will get you a listing under my “Special Thanks” link on home page. Thx, dale poston, a1mc.net daleposton@msn.com
oh yea, one more thing, I feel pretty confident in all of my encoding settings.
Lucinda, they started working in Google Chrome but not in IE, tried two PC’s one with ie8 and mine with ie9, any ideas?
Lucinda, I reset ALL IE settings including advanced, re-downloaded flash 11 (which I already had) and the video started working on my PC with IE9. Will have to clean up my wife’s pc and try it on IE7. However the whole time your videos look great and played with no problem. I made need to pay you for a little consulting about which screen recorder you use, the zoom utility, and the final encoding settings. Dale, computer engineer.
sorry Lucinda, the video at my site under “testupload” did finally play thru once but now will only play for like 8 seconds and then it defaults back to the start poster. Sorry to right so much I am a lot more use to solving problems myself but I am so baffled….??? LOL Dale Poston
Dale,
Glad you are troubleshooting your way out of the issues. My thoughts about your various comments:
Can you share the name of your hosting company that you use
– lunarpages
the whole time your videos look great and played with no problem. I made need to pay you for a little consulting about which screen recorder you use, the zoom utility, and the final encoding settings. Dale, computer engineer.
- We use Camtasia Studio to both record and edit. We tried many, and this one won out because it is PC-native (though they offer Mac too but cross-platform collaboration is not good), tracks clicks, does auto zoom, and compresses really efficiently.
now will only play for like 8 seconds and then it defaults back to the start poster
- not sure what to tell you, except try tools.pingdom.com to see what the individual sources of delay are. Might help you diagnose the problem.
Good Luck!
Lucinda
I’m using it!!
http://www.thegrailquest.com/2012/02/02/thank-you/
Thank you.