Secure HTML5 Video Player Plugin for WordPress

search

Secure HTML5 Video Player Plugin for WordPress

January 14, 2013
Share
337 Comments
  • Erland
    January 22, 2015 Reply

    I found when I set up the plugin to use Amazon S3 (“Served Dynamically” option from Sao Paulo, Brazil), the correct link would be generated when I used the file=”” tag option, but it would try to use my local server with an invalid URL when I specified the webm=”” or ogg=”” or poster=”” tags without the file=”” tag.

    For example, the shortcode:
    [video ogg="vidtest06.ogg" poster="vidtest06.JPG" width="720" height="480"]
    generates the HTTP request (which returns a 404):
    http://www.mydomain.com/vidtest06.ogg
    Whereas the shortcode (to the same video file):
    [video file="vidtest06" width="720" height="480"]
    generates the request:
    https://s3-sa-east-1.amazonaws.com/mybucket/Test/vidtest06.ogg?AWSAccessKeyId=AKIAJ6stuffhere2EBAQ&Expires=1422842916&Signature=IROfsadfsafasfdhQ%3D

    I also had problems with some (but not all) computers getting an error:
    “No video with supported format and MME type found” even on a format I *know* is supported on that browser (for example, playing a WebM video on Firefox).
    What is usually the cause of this?

    • Erland
      January 22, 2015 Reply

      …and what I’d prefer to have generated is some obfuscated URL that works and which points to my domain rather than either of the above. Is there a way to make that work?

    • duncan
      January 26, 2015 Reply

      When using the “file” attribute, you specify the file name without the file extension, and the plugin will determine the link automatically based on detection of its existence in your specified video folder or on Amazon S3. However, if you specify the other attributes (mp4,ogg,poster,webm), they require full URL’s to the resources, not just the file name, so that is likely the cause of the errors. It’s easiest to use the file attribute and just make sure that you have all of the file formats present in the video directory. (For ex: if you specify: myvid, there should be myvid.mp4, myvid.webm, myvid.jpg in the video folder.)

      When using Amazon S3, unfortunately there is currently no way to change the format of the URL when using it with the plugin. If you choose to host the files locally on your server, the URL’s will originate from your server and will appear somewhat obfuscated.

      • Erland
        January 29, 2015 Reply

        Thanks for the reply.

  • Robert
    January 12, 2015 Reply

    Ok, here is what I found:

    I set up an echo statement to check both the time value and the lifetime value. It all seems to work fine for minutes, hours and days. But if you put in seconds…no matter how many seconds you put in the lifetime value is always 28800. Seems like a bug around the seconds feature.

    • duncan
      January 12, 2015 Reply

      Thanks for reporting this to us. We’ll get this fixed in the next update. We very much appreciate all the feedback and detailed reporting.

      • Robert
        January 12, 2015 Reply

        Your quite welcome. You have by far the best plugin for this that I have found.

        Any chance you would add the ability to play audio files as well as video? It would really enhance the plugin.

        • duncan
          January 13, 2015 Reply

          Thanks very much for the suggestion. We will make an effort to make audio playback a feature in the next major release. For now, I suppose the only work around would be to use a video still with audio.

  • Robert
    January 11, 2015 Reply

    I’m using Amazon S3…the Media Lifespan doesn’t seem to be working, or maybe I just don’t understand how it works. I set it to 30 seconds to test, but after close to an hour, I can still access it. How does this work, and will it generate a URL that is only good for the time specified? Does the url get re-generated if you do a page refresh?

    Thanks,

    Robert

    • Robert
      January 11, 2015 Reply

      I’ve tried to do some research and it looks like the expire option in the admin area is just not working, can you check?

      Also, I do have one other rather simple question. When you first load the page, the big play button is shown in the middle of the video, how can I get it to show if the video is paused.

      • duncan
        January 12, 2015 Reply

        The expire value in a S3 media link is the current lifespan of the media in the given link. The link itself is refreshed with every page load, so to correctly test if the expiration is working, you’ll have to keep a saved record of an old link for longer than the duration of the S3 expiration. After waiting the elapsed time period, I think you will observe that the media will not be permitted to be loaded, provided that the video is set to be private.

        The big play button in the videojs skin has a CSS class: “vjs-big-play-button”. Once you play it, it becomes hidden because it has display:none applied to it. You should be able to make it appear again by forcing it to be display:block when the video in question encounters pause event.

        • Robert
          January 12, 2015 Reply

          That is what I thought the expire link should do. I set the time to 5 seconds and here is the link it generated:

          https://s3-us-west-1.amazonaws.com/excelerate-members/videos/test-video.mp4?AWSAccessKeyId=AKIAIUVDOE6YBBI54E6Q&Expires=1421115270&Signature=eU4mRJ6V7ThoJ4JIw%2Bcj0eM61jc%3D

          This link has been active for quite a while…well over 5 seconds. I have loaded it in multiple browsers to make sure it’s not some caching issue. I did some research on the code, and while I’m certainly no expert, it doesn’t appear to be working. If you try the link above, it should take you to my test video and play, but it should have easily expired by now.

          • duncan
            January 12, 2015

            I tried the same test on one of my test instances: setting the expiration time of the media to be in a very short time frame in the future, and it seemed to work find on my instance. I set mine to expire in 2 minutes, and S3 indeed responded with an “Access Denied: Request has expired” message.

            From looking at your URL, the “Expires” time value is definitely not set to be 5 seconds in the future, because the value of my Expires was 1421100420 which is less than 1421115270. I think what must be happening is that either the time on your server is not set correctly, or you have the wrong unit of time set for the time. You’re allowed to set time in the plugin settings in either seconds, minutes, hours or days. I think you might have it set to hours. If that’s not the issue, it’s most likely that the time on the server is set a little fast, or otherwise, is set to send the number of milliseconds past the epoch a little offset from how Amazon is set.

            You can play around with the number that is sent to Amazon S3 by changing the code in: s3/S3.php:

            public static function getAuthenticatedURL($bucket, $uri, $lifetime, $hostBucket = false, $https = false)
            {
            $expires = time() + $lifetime;
            $uri = str_replace(array('%2F', '%2B'), array('/', '+'), rawurlencode($uri));
            return sprintf(($https ? 'https' : 'http').'://%s/%s?AWSAccessKeyId=%s&Expires=%u&Signature=%s',
            // $hostBucket ? $bucket : $bucket.'.s3.amazonaws.com', $uri, self::$__accessKey, $expires,
            $hostBucket ? $bucket : self::$endpoint.'/'.$bucket, $uri, self::$__accessKey, $expires,
            urlencode(self::__getHash("GET\n\n\n{$expires}\n/{$bucket}/{$uri}")));
            }

            The expires value is the time at which the video should expire. If you know for sure how much it is offset by, you should be able to subtract that number from the variable. My guess is that either the clock is off by 18000 seconds (5 hours) or the hours are being taken as the units.

  • Robert
    January 9, 2015 Reply

    I’ve installed your plugin on a wordpress 4.1 installation but am getting the following error:

    Warning: SH5VP_S3::getBucket(): [InvalidArgument] Authorization header is invalid — one and only one ‘ ‘ (space) required in … /wp-content/plugins/secure-html5-video-player/sh5vp-functions.php on line 223

    Please help?

    Robert

    • Robert
      January 9, 2015 Reply

      Thanks for the quick reply. I get the error in the video section when editing the page as well as on the page. Interestingly enough, if I use the mp4=”video1″ instead of file=”video1″, I still get the error when trying to edit the page, but NOT on the page, but the video won’t play. I have a test page with both.

      FYI, I am using Amazon S3 to serve my video files and I want to make them private. I will have a members only site and only want people who have access to the members area have access to the videos.

      Robert

      • Duncan
        January 9, 2015 Reply

        Hi Robert,

        I think what is happening is that Amazon S3 somehow doesn’t like spaces that are being passed to their API. Please check that the video directory name has no spaces in it, and that all of the bucket names also don’t have any spaces in them. I think after correcting the directory paths and bucket names in both S3 and the plugin settings, it should resolve the error you’re seeing.

        Please let us know if you continue to have problems.
        Thanks.

        • Robert
          January 9, 2015 Reply

          I’ve checked, there are no spaces, only dashes.

          Also, I have two additional issues:

          1) As you see on my test page, the video only plays when made public, it needs to play when private or it’s no good to me.

          2) When you disable controls, it also disables play and pause, is there any way to only let people play and pause (not rewind and fast forward)?

          • Duncan
            January 9, 2015

            Hi Robert,

            Please check the “Access Key” and “Secret Key” for spaces as well. It could be that they got appended at the ends after copy/pasting.

            To disable rewind and fast forward, I think your best option is to use a Video JS Skin, like “vim”, which can be set under the Skin tab. Then in your template’s css, set the progress bar to be hidden:

            .vjs-progress-control {
            display:none;
            }

          • Robert
            January 9, 2015

            Looks like that was it…there was a space in the access key.

            Everything looks good except one thing. I have made the video private and it plays and I can’t access it directly from a browser, but when I right click on it it gives the option to download the video or save it as….how do I disable these options?

          • Duncan
            January 9, 2015

            Hi Robert,

            While there is no way to completely prevent someone from downloading a video they have been granted access to, there is a way to make it harder by disabling the right click on the video.

            You can disable all of the right click contextual menus by adding this script to the video pages:

            jQuery(document).ready(function() {
            jQuery(‘video’).bind(‘contextmenu’, function(e) {
            return false;
            });
            });

  • James
    October 31, 2014 Reply

    I am wanting to use this video player to prevent my users from downloading the video but it seems that the WordPress shortcode is the same as the shortcode for this plugin. it looks like there is a place in the settings of this plugin to modify the shortcode but when i try to change it, it doesn’t change…

    Any help would be great please!

    Thanks.

    • duncan
      January 12, 2015 Reply

      It appears there’s a bug in saving that preference. We’ll get this corrected with a release this week. If you’d like to work around the problem ahead of the fix, edit sh5vp-functions.php, lines 855 to 861 so that it’s like the following:

      if (isset($_REQUEST['secure_html5_video_player_video_shortcode'])) {
      $new_video_shortcode = trim($_REQUEST['secure_html5_video_player_video_shortcode']);
      if ($new_video_shortcode == '') {
      $new_video_shortcode = 'video';
      }
      update_option('secure_html5_video_player_video_shortcode', $new_video_shortcode);
      }

  • Thorsten
    September 22, 2014 Reply

    Your plugin worked fine, but the last update seemed to change things.
    You changed something in the way the files are served from cache I
    remember. In my case I cannot serve the files anymore from cache they
    will not display in both Internet Explorer and Firefox 32.0.1. This
    happened after I did some changes on my site.

    What I did: My video directory was a symbolic link to a directory
    somewhere else on my webspace. I changed the video directory to a
    different symlink and the videos could not be started. The controls
    appear but I cannot start the video.

    I tested different locations and managed to run the video from my
    public_html folder but all other locations I have tested did not work.

    Is there a way to clear the cache or do I have to use real directories
    as video directory and not symlinks?

    By the way: In Firefox 32.0.1, when serving files dynamically, Mp4 files
    did not display in general on my blog. The plugin starts a flash player
    but the video could not be started. My workaround was the option to
    serve from cached files but this seems to have stopped working now.

    • Duncan
      September 22, 2014 Reply

      Hi Thorsten,

      Sorry about the problems.

      In the recent update we optimized the plugin to favor using symbolic links instead of file copies when trying to cache the file for video serving. In most situations, this should improve performance and space usage significantly.

      I think for your case, the problem is either that:

      1. The webserver is configured to not allow serving linked files.
      If this is the case, I think it can be solved by adding this line to your htaccess file:

      Options +FollowSymLinks
      Or by adding “FollowSymLinks” to the link of options set in the apache configuration for “Options”.

      2. The PHP code is not able to create a symbolic link to a symbolic link
      If this is the case, I think it can be solved by making the video directory setting point to a real directory, or by making the symbolic link a hard link to the directory. I don’t think this is likely the problem, but it might be worth trying.

      Another thing you can try is deleting the sh5vp_cache directory in wp-content.

      If it still doesn’t work after all that, you can change the behavior back to how it was before it in the php file: prepvideo.php in the plugin’d directory, and change around line 94:

      if (!symlink($video_orig, $video_cache)) {
      copy($video_orig, $video_cache);
      }

      to be:

      copy($video_orig, $video_cache);

      After making that change, delete the sh5vp_cache directory to make it take effect.

  • Bob
    September 22, 2014 Reply

    In response to a question I left on June 23, Duncan explained that that on Chrome, you needed to set preload=”yes” to get autoplay to work. This solved my problem at the time.

    I just updated from v 3.8 to v 3.9, and immediately began to experience a significant delay before my videos would begin to autoplay in Chrome. I was able to resolve this by changing preload back to “no”. (And autoplay now works in Chrome with preload=”no”.)

    Any idea what’s going on?

    • duncan
      September 22, 2014 Reply

      Hi Bob,

      Sorry for the problems. I don’t think the preload setting should make any different with regard to autoplay in the latest version of Chrome. This may have been a bug specific to an older version of Chrome.

      I think the change in the plugin that may have broke auto play for some of your videos in Chrome is likely the one that now orders MP4 videos ahead of OGV and WEBM. That change was done primarily because now that Firefox support MP4 videos, and because processor efficiency is greater with MP4 decoding both on mobile and desktop browsers, there’s no reason to give a preference to the other codecs.

      But the side effect of that change is that likely Chrome is giving preferred playback preference to MP4 rather than the other format, and that’s revealing a streaming issue specific to some of your MP4 videos. With MP4 unless they’re encoded as being “web optimized” or “fast start” they will encounter delays prior to playback on most browsers.

      You should be able to do this using Handbrake:
      http://diveintohtml5.info/video.html#handbrake-gui
      or Final Cut Studio:
      http://www.screenlight.tv/blog/2010/11/25/encoding-h-264-quicktime-for-the-web-with-compressor/
      or another video encoder that is able to create MP4 videos meant for web playback, like Miro:
      http://www.htmlandcssbook.com/extras/encoding-videos-for-the-web/

      If these file updates are too time consuming, for the time being you can reverse the change we made by editing the file:
      sh5vp-functions.php at around line: 1836
      from:

      if ($mp4_source) {
      $video_tag .= “{$mp4_source}\n”;
      }
      if ($webm_source) {
      $video_tag .= “{$webm_source}\n”;
      }
      if ($ogg_source) {
      $video_tag .= “{$ogg_source}\n”;
      }

      to:

      if ($webm_source) {
      $video_tag .= “{$webm_source}\n”;
      }
      if ($ogg_source) {
      $video_tag .= “{$ogg_source}\n”;
      }
      if ($mp4_source) {
      $video_tag .= “{$mp4_source}\n”;
      }

      That will change the source tag ordering back to the way it was before. Please let us know if you continue to have problems after trying these steps. Thanks.

      • Bob
        September 22, 2014 Reply

        You’ve got it. No problem to recreate the MP4’s properly. Thanks for the quick response and incredible support!

  • Bob
    September 20, 2014 Reply

    I’ve been using Secure HTML5 Video Player (currently version 3.9) to handle a number of short videos on a client’s site. The setup has successfully worked on several hosts (to facilitate development and testing). The client just upgraded from FatCow’s regular shared hosting to its new “WP Essential” faster shared hosting.

    On the new platform the following problem has begun occurring: Even though the locally-hosted videos still work fine on computer-based browsers, they fail to play at all on IOS devices. There’s no error message–just no response when you attempt to start the video playing.

    For now I’m working around the problem by hosting the videos on Amazon S3.

    Any idea what might be happening?

    Thanks.

    • duncan
      September 20, 2014 Reply

      Have you tried an alternate setting for caching? It looks like you’re using dynamic caching. If you switched to file caching, the video playback performance should be more consistent. The most recent update to file caching is optimized for space. One option uses hard links, and the other symbolic file links. We provide 2 options because some server configurations are such that only one of those options work.

      I’m not sure why the video is failing to play on iOS. My best guess would be that there is some configuration on the server that is set to limit the capabilities of PHP, and that is making some aspect of the plugin fail. I’d advise that you check the server’s error log and see if there are any php errors present. If there are errors, please send that information to us.

      • Bob
        September 22, 2014 Reply

        The video performance is fine at this point. The only issue is the failure to play on iOS when the videos are hosted on the new FatCow server. On the old server, on my test server at Bluehost, and on my local development server the problem doesn’t exist.

        I don’t think I have access to the server logs, but I’ll see. Regardless, they have a ticket open and I’m sure someone can look at them.

        I was basically just checking whether this (won’t play on iOS from certain servers) is a symptom you’ve run into before. I realize your Plugin is free, and don’t want to take a bunch of your time. Thanks again for the quick responses!

  • Klaus
    September 17, 2014 Reply

    Hi, I’m using your version 3.9 with WordPress 4.0 and the Pinboard theme. But it is displayed very ugly. The controls are above the video and the video lays over the comment section. With wordpress 3.9.x it has worked well….
    Thanks for any help…

    • duncan
      September 17, 2014 Reply

      Unfortunately, it looks like that WP template is conflicting with some of the skins in the video plugin. You should be able to work around the problem by changing the skin settings in

      Settings -> Secure HTML Video Player -> Skin

      and set it to “native”, and save the settings. The videos should now appear correctly with controls in the right places.

      • Klaus
        September 19, 2014 Reply

        Hi Duncan,

        thanks for your answer, but I do not have any Skin selected. It is set to native.
        I have tested Safari and Google Chrome. In both browsers it is not working correctly.
        Any other suggestions?

        Thanks!!

        • duncan
          September 19, 2014 Reply

          The problem is that the template is manipulating and applying styles and sizing rules to the video elements. To work around it, you can do one of the following:

          1. Choose to use an alternate WordPress template

          2. In pinboard/functions.php, comment out all lines of code that reference “mediaelementplayer”. This should include the stylesheets and all of the JS calls that look like this:
          $('audio,video').mediaelementplayer({
          videoWidth: '100%',
          videoHeight: '100%',
          audioWidth: '100%',
          alwaysShowControls: true,
          features: ['playpause','progress','tracks','volume'],
          videoVolume: 'horizontal'
          });

          Changing the skin to be native fixed it for me. Are you using a caching plugin? If so, you might need to clear out the cache so that you see the updated code in your browser.

  • Tim
    August 24, 2014 Reply

    Secure HTML5 works great for me using a directory below my public directory, but I’m running out of disk space so I want to put some or all of the videos on Amazon S3. I’m unclear as to whether *some* videos can be on Amazon S3 and some videos stored locally, both playing successfully with Secure HTML5, or whether I have to pick one (?)

    Under the “Security” tab I have a link to my local videos location:
    /home/mysite/videos

    …And in the S3 tab I have links to my S3 bucket: videoserve/ and S3 video directory: videos/

    With both of those settings saved, if I have a Secure HTML5 shortcode in my page:

    [video file="myvideo" width="720" height="480"]

    …And I had the myvideo.mp4, myvideo.ogv, myvideo.png files in both locations (locally, and on S3) how would Secure HTML5 know which location I was directing it to play the file from? Is there a WAY to let me know which location to load the file from?

    Sorry, I’m just confused, thanks in advance.

    • duncan
      September 9, 2014 Reply

      The plugin allows files to be stored in both S3 and on the webserver, and files may be mixed or matched. If the same file and path exists on both video directories, then the S3 video will take priority. You can verify which video is being served by right clicking the video, inspect it in the web browser’s inspection console and see what src the video URL is being loaded from.

      To reduce space usage on your server, you could switch to using “serve dynamically” as your caching method. That will reduce the amount of space utilized by removing the requirement for placing videos in a accessible directory path. Instead the files will be streamed using PHP. The downside to this is that it doesn’t perform well with certain hosting providers that limit the resources available to PHP.

  • Mark Hultgren
    July 15, 2014 Reply

    I agree with all the people that love your plugin, it is wonderful. With that being said, I am running into an issue with IE (of course).
    I am streaming the videos from S3 and they play fine in Firefox, Safari, Chrome but all I get in IE is a ‘standard’ 640 x 480 video player (my videos are all wide screen 16×9 format) with a video time of 0:00 and no splash image or video.
    I am using a premium theme from ThemeForest with a couple custom plugins.
    Please help?!?!?

    • duncan
      July 16, 2014 Reply

      Most often when you get a browser specific video playback error like this, it’s because the browser wasn’t able to play the specific video encoding that was used to create the video file.

      For ex: http://blogs.msdn.com/b/thebeebs/archive/2011/07/20/html5-video-not-working-in-ie9-some-tips-to-debug.aspx

      I would try to re-encode it using a Miro video encoder preset for H.264 HTML5 video and see if that corrects the issue. Another possibility is that IE might have trouble detecting the content type of the file coming from S3. S3 usually get’s the content-type correct automatically for any given file, but in earlier times it was less capable and you would have to manually specify the content-type of any given file in the S3 console for it to be served properly to a browser. I would advise checking the content-type for your test video and make sure it’s the correct MIME type (“video/mp4″).

      • Mark Hultgren
        July 16, 2014 Reply

        Hi Duncan,
        Thanks fort he reply, but all the settings and encoding is correct. Even the mime types are listed on the server and the issue is with IE 11, not 9, which is what really has me stumped. I used Handbrake set to h.264 (web optimized) 29.97 fps, AAC and even uploaded multiple formats to no avail. All I get is a blank 640 x 480 player skin with no video in it.

        • duncan
          July 17, 2014 Reply

          Could you provide an example link? I’ll email you separately (to your provided comment email address) in case you are uncomfortable posting that link here.

  • begs
    July 7, 2014 Reply

    Hello team,
    thanks for your really great plugin!

    I got two questions:

    1. When using the plugin to select a video in a page or post, NOT via shortcode:
    Is there an option to select the poster image?

    2. when using the plugin and sitching to full screen mode, the video only expands to full screen in chrome, but not the full screen of the monitor.
    On the video.js homepage http://www.videojs.com full screen mode is “real” full screen mode.
    Am i missing some option with the Secure HTML 5 Video Player plugin to get a “real” full screen?

    Best regards

    • duncan
      July 16, 2014 Reply

      1. To set the poster image, you just need to upload an image that that has the same base-file-name as the video into the video directory. So if your video is named: “myvideo.mp4″, you should create and upload “myvideo.jpg” or “myvideo.png” into the same path as the video, and then the plugin will detect that it’s there and use it as the placeholder image.

      2. If you’d like to use full screen mode in a consistent way, you can switch your video skin to “native” and that will allow for full screen video that takes up the full computer screen, usually. There might be exceptions on certain specific browser and OS combinations.

      • begs
        July 17, 2014 Reply

        Hello duncan,
        thank you so much! Both suggestions worked like a charm.

        Best regards

  • Robert
    June 19, 2014 Reply

    We have been using the plugin for a while now and it has been working well. We post videos to our website using short code. Recently we have started to see an issue that only allows a video to play for so many minutes before it just stops. I have tried it with different videos and it is happening to all. Any ideas on how to fix this?

    • duncan
      June 19, 2014 Reply

      What is your “caching” setting in the plugin? Are you serving the videos from cached files or dynamically? If one option is not working for you, it’s possible the other will work fine. How long are your videos? We routinely test with videos in excess of 2 hours in length and it loads in the hosting provider we use.

      If the cached file strategy is not working and playing the videos all the way through, it could be that either the file copy of the video to the directory cache did not succeed completely, or that the webserver is dropping/blocking serving the download request fully. I would advise checking the wp-content/sh5vp_cache directory to see if the video copies are there fully. If only a portion of the file is there, it’s because creating the file copies failed at some point. If it routinely fails then your best option might be to switch to dynamic mode, or to using S3 as your video repository.

      • Robert
        June 20, 2014 Reply

        Hi Duncan. Thanks for the reply. I have actually tried both settings in the ‘caching’ section with the same results. Our videos are usually from 30-60 minutes long. The file size on the videos in the cache directory are the same, if not slightly higher, than the original videos.

        • duncan
          June 20, 2014 Reply

          What is likely happening is that the connection is being cut off by the web server or by PHP or both. If you have the ability to adjust the settings in your host provider control panel, you’ll need to increase PHP’s max_execution_time and Apache’s TimeOut settings to reflect the length of time it would take to download a file that large.

          http://www.php.net/manual/en/info.configuration.php#ini.max-execution-time
          http://httpd.apache.org/docs/2.0/mod/core.html#timeout

          If you don’t have the controls in place to tune the server to allow for large file downloads, you’ll have to either change hosting plans or providers, or use an external service to host your videos (like Amazon S3 or Youtube).

1 4 5 6
Leave Comment

Error Please check your entries!