Secure HTML5 Video Player Plugin for WordPress

search

Secure HTML5 Video Player Plugin for WordPress

January 14, 2013
Share
315 Comments
  • 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


five × = 15

Error Please check your entries!