Video playback/performance across multiple platforms

[drbyte]

Hi Jason

After fixing Amazon S3 Bucket permission issue with Amazon. I conduct a full video test using Only S3 and the results still poor.

Amazon S3 alone speed is fairly slow (Large files >150mb) combined with smart products speed like the iPhone, iPads will results in even slower speed impacting the video playback in multiple way (freezing, poor streaming, and disconnecting).

Combing S3 & S2M will impact the video delivery even more. The main issue is seeking through out the video. I understand that http delivery requires some buffering and will have to wait for some chunk of the video to be downloaded, but even with that seeking is not possible (forward or backward).

I looked at the secure url delivery and I see that the url provides no cache. Not sure if this is part of the seeking problem or simple it's an issue with tables and smart phones.

Can you please verify smooth video delivery with files larges than 150MB and more than 40min long

Thank you

Sam

[Cristián Lávaque]

Sam, when you seek through the video from a computer instead of a mobile device, do you have this problem too?

I'm not familiar with video, but I guess that when you want to start from another point in the video that had not been loaded yet, the player would try to connect again to the get the file from that point and lack the authentication that Amazon requires to serve the file, that s2Member adds when it redirects the request.

I think it'd be similar to resuming a download if seen that way and I think Jason explained recently that s2Member download protection doesn't support download resume yet.

[drbyte]

Hi Cris

I think the issue with mobiles and tablets are CPU Speed and available memory along off course bandwidth speed during playback. Said that, I also think it has something to do with the transfer speed coming form Amazon servers. Not entirely sure why, but when combined with S2M the video either freezes, stops, and/or gives an error when you try to seek over the Downloaded area of the movie or if you stop and play again

Take S2M out of the URL and the video plays just fine with no seeking problem. Maybe s2Member download protection doesn't support download resume yet is the case but I have doubts about that.


Will keep testing. Please do remember the videos are about ~200MB and some of them are over 60 min long.

Sam

[drbyte]

Shortcode for HTML5 Video Tag in WordPress

Include this code in your functions.php file and you are ready to go:

Code: Select all

function html5_video($atts, $content = null) {
   extract(shortcode_atts(array(
      "src" => '',
      "width" => '',
      "height" => ''
   ), $atts));
   return '<video src="'.$src.'" width="'.$width.'" height="'.$height.'" controls autobuffer>';
}
add_shortcode('video5', 'html5_video');


Now you can use the following shortcode in your post:

[video5 src="http://your-site/videos/your-video.mp4" width="720" height="480"]

[Cristián Lávaque]

Very cool! Thanks.

[Jason Caldwell]

Still looking into a solution for this Sam.

Yea, I suspect the issues that you're having with "seeking" are caused by the fact that s2Member does not support "streaming" media in the truest sense of the word yet. We're going to take a look at integrating s2Member with a CDN that does, and we'll try to integrate s2Member's protection routines with one or more of them, so that site owners will have a broader selection of companies to use.

I'm going to reference this thread here as well, for the benefit of other readers:
viewtopic.php?f=4&t=14668&p=33656#p33396

[drbyte]

Hi Jason

Thank you for looking into this

I'm still using Amazon S3/CloudFront and CNAME & Video tags. It's working across most of the gadgets I tried (iPhone, iPad, iPod, Android) Samsung Galaxy Tab, Motorola Tabs, and to my surprise Blackberry Tabs.

The only one that would not play/Yet is Windows mobile OS. Unless you have an app that can play mp4/h264 media.

Just an Update:

This URL format http://www.site.com/?s2member_file_inline=yes&s2member_file_download=/file.mp4 is not compatible with Apple iOS/Safari

Is there any possibilities that S2M can protect URL using CNAME/S3/Subdomain?


Sam

[Cristián Lávaque]

Maybe this helps? viewtopic.php?f=4&t=14643&p=32894#p32894

[drbyte]

Jason...Amazing work with the mod-rewrite option. Works great on all but Safari/iOS. Can you guys test it and post back.

I am using this /wp-content/plugins/s2member-files/s2member-file-inline/example-file.zip with the video tags

Code: Select all

<video src='http://www.site.com/wp-content/plugins/s2member-files/s2member-file-inline/<?php echo get_post_meta($post->ID, 'video', true); ?>' controls autoplay poster='http://site.com/poster.jpg' height="100%" width="100%"></video>


Thank you

Sam

[Jason Caldwell]

Thanks for reporting this important issue Sam.

I've just taken a good hard look at this problem in Safari, and it seems there is a deeper issue here. By default, WordPress sets a User's logged-in Cookie in httpOnly mode. Meaning that, the logged-in cookie is more secure ( i.e. inaccessible via JavaScript ). However, it seems that the Safari browser has a bug in it's HTML5 video tag support, preventing cookies set in httpOnly mode from being read on video source acqusition. Thus, HTML5 video tags in Safari will not work as expected on WordPress/s2Member, because the cookies are not being read by Safari whenever the video source file is accessed.

In short, we're going to take an even closer look at this problem over the next few days, but for now, here are two ways to avoid the issue in Safari.

1. Recommended.
Pass a File Download Key to s2Member, so that cookie authentication is not required.

Code: Select all

<video controls="controls" autoplay="autoplay">
  <source src="http://jason.websharks-inc.net/wp-content/plugins/s2member-files/s2member-file-inline/s2member-file-download-key-dcf456dd5fd749475c90296cc7ed8df1/movie.mp4" type="video/mp4" />
  <source src="http://jason.websharks-inc.net/wp-content/plugins/s2member-files/s2member-file-inline/s2member-file-download-key-eddaabf7e96b7f0723a68b70b66c539f/video.webm" type="video/webm" />
</video>

* See: http://jason.websharks-inc.net/safari-test-mp4.php

2. Or, create this directory and file to override WordPress defaults.
( use at your own RISK though, it's a trade-off between security and usability in this case )
/wp-content/mu-plugins/wp-set-auth-cookie.php

Code: Select all

<?php
function wp_set_auth_cookie($user_id, $remember = false, $secure = '') {
    if ( $remember ) {
        $expiration = $expire = time() + apply_filters('auth_cookie_expiration', 1209600, $user_id, $remember);
    } else {
        $expiration = time() + apply_filters('auth_cookie_expiration', 172800, $user_id, $remember);
        $expire = 0;
    }

    if ( '' === $secure )
        $secure = is_ssl();

    $secure = apply_filters('secure_auth_cookie', $secure, $user_id);
    $secure_logged_in_cookie = apply_filters('secure_logged_in_cookie', false, $user_id, $secure);

    if ( $secure ) {
        $auth_cookie_name = SECURE_AUTH_COOKIE;
        $scheme = 'secure_auth';
    } else {
        $auth_cookie_name = AUTH_COOKIE;
        $scheme = 'auth';
    }

    $auth_cookie = wp_generate_auth_cookie($user_id, $expiration, $scheme);
    $logged_in_cookie = wp_generate_auth_cookie($user_id, $expiration, 'logged_in');

    do_action('set_auth_cookie', $auth_cookie, $expire, $expiration, $user_id, $scheme);
    do_action('set_logged_in_cookie', $logged_in_cookie, $expire, $expiration, $user_id, 'logged_in');

    setcookie($auth_cookie_name, $auth_cookie, $expire, PLUGINS_COOKIE_PATH, COOKIE_DOMAIN, $secure, true);
    setcookie($auth_cookie_name, $auth_cookie, $expire, ADMIN_COOKIE_PATH, COOKIE_DOMAIN, $secure, true);
    setcookie(LOGGED_IN_COOKIE, $logged_in_cookie, $expire, COOKIEPATH, COOKIE_DOMAIN, $secure_logged_in_cookie, ((stripos($_SERVER["HTTP_USER_AGENT"], "safari") === false) ? true : false));
    if ( COOKIEPATH != SITECOOKIEPATH )
        setcookie(LOGGED_IN_COOKIE, $logged_in_cookie, $expire, SITECOOKIEPATH, COOKIE_DOMAIN, $secure_logged_in_cookie, ((stripos($_SERVER["HTTP_USER_AGENT"], "safari") === false) ? true : false));
}
?>

---

Also, watch out for the poster="" attribute on iOS, I think that was buggy in older versions. See: http://diveintohtml5.org/video.html#ios

[drbyte]

Hi Jason

Thank you for looking into this

Is that a short code you are using in your post?

wp-content/plugins/s2member-files/s2member-file-inline/s2member-file-download-key-[key]/example-file.zip

I'm going to need to insert this directly to the theme. What's the correct way of inserting the s2member-file-download-key-[key] using the example you have above or on the test page you created.

I tried different way but all failed

Thank you

some explaining:
this code works fine

Code: Select all

<video src='http://www.site.com/wp-content/plugins/s2member-files/s2member-file-inline/s2member-file-download-key-[s2Key file_download="test.mp4" /]/test.mp4' controls autoplay height="100%" width="100%"></video>

but what i am trying to do is this and I can't figure it out...

Code: Select all

<video src='http://www.site.com/wp-content/plugins/s2member-files/s2member-file-inline/s2member-file-download-key-<?php echo s2member_file_download_key("example-file.zip"); ?>/<?php echo get_post_meta($post->ID, 'video', true); ?>' controls autoplay height="100%" width="100%"></video>

As you see I am using custom fields to inset the movie into the video tags. this way if i need to add/edit something I just go directly to the code without the need to go over 4000 posts to adjust.

How I go by inserting this <?php echo get_post_meta($post->ID, 'video', true); ?> to replace the example-file.zip as the download key?

I think my brain is fried or I'm just becoming useless

thanks

sam

[drbyte]

OK...I tried to override the Video tags since it's buggy and link to the file directly [let the devices uses it's own player - most support mp4]. The files are mp4 and it's optimized to play all smart phones.

http://www.site.com/wp-content/plugins/ ... e/file.mp4
or
http://www.site.com/wp-content/plugins/ ... s/file.mp4

Firefox [pass] - Needs QuickTime - No full screen option
IE 8/9 [pass] - open the URL, go outside ..drink coffee, hunt some ducks, take a shower, eat, nape, and when you come back, you will see the browser still thinking. I think IE10 is going to make it possible but not IE9
Chrome [pass] - No full screen option
Safari 5.1 [pass] - full screen available
iOS [pass] - Full screen available
-----iPad2 [pass]
-----iPhone [pass]
-----iPod [pass]

Android [fail]

Windows Mobile - Data not available

Not sure why the Android is failing to load the media using the above URL.

Some updates:

Opera Mobile on Android works with the link above. I am still not sure why Android default browser wont execute the link. Interesting

[Jason Caldwell]

Thanks for these updates Sam. I'm using some of your research in new features coming soon. I can confirm that we WILL be introducing support for the RTMP protocol when connected to Amazon® CloudFront, making it possible to "stream" protected audio/video content in the truest sense. We're also working to add support for resumable downloads in s2Member's local storage default option.

[drbyte]

That's awesome Jason. I can't wait to get my hands on that

[Jason Caldwell]

Support for Amazon® CloudFront made it into s2Member v110926/27.
http://wordpress.org/extend/plugins/s2member/changelog/

[drbyte]

Hi Jason...don't know what to say....Thank you

I am trying to config both but keep getting this

Unable to auto-configure Amazon® CloudFront Distributions.
Error code: 409. Error Message: Unable to create Amazon® CloudFront Downloads Distro. Unable to create Amazon® CloudFront Downloads Distro. Conflict

Do we have to change the bucket in the S3 configuration?

I am also trying to setup CNAMES

any ideas? I deployed a new bucket and a new CNAMES but still getting the same error

Thanks


Sam

[drbyte]

OK, I was missing a (-) from the private key code at the end (-----END RSA PRIVATE KEY----)....are you serious!!

It seems it's taking it now...still in progress

Finally...It's a boy

Well beside the missing dash in the key code, it seems that CNAMES setup using s2-file-downloads does work but something like this ford36.site.com does not.

Updates:

Working on iPad, iPhone, Android, Safari, Chrome, FireFox

Not working on IE9

Not tested on Windows Mobile

Will post more data when Available

[drbyte]

Hi Jason

Is there any expiration date to the policy generated by S3&Cloudfront. Not using s2member file download key
(not sure if the download key needed in this situation - no effects on the link generated by S3$Cloudfront policy unless i am missing something)

example:

Code: Select all

http://www.site.com/wp-content/plugins/s2member-files/video.mp4

generates this: (unique link)

Code: Select all

http://s2-file-downloads.site.com/video.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cDovL3MyLWZpbGUtZG93bmxvYWRzLm9ubGluZWFyYWJpY21vdmllcy5uZXQvY29kZV8zNl9tb2JpLm1wNCsfhhgjRpdGlvbiI6eyJJcEFkZHJlc3MiOnsiQVdTOlNvdXJjZUlwIjoiNzYuOTMuMTcuMjM1LzMyIn0sIkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxMzE3NDAxNjc3fX19XX0_&Signature=gS5DuWtcz0wn-T3OYyXHpHm4sGtqonx4uNf~MlhhyEp12rL85HVJIVhjyutw4DrJCCUcYQ5EkQVS4K10xKk3Wr8fCB8D4DI293aTqFw3zp0Uy9WUdJQ79lEs1Oq4oE3cVUHHuvm6LfSbiO18VxLsMCVrwbQykCS57r1SHhpcI2I_&Key-Pair-Id=APKAJMYQ54GHSTY7ESAEQ

Does the above link expires?

Updates

It Does expire AccessDeniedAccess denied

Awesome work Jason. The Playback is super fast and seeking is smooth like slick.

[Jason Caldwell]

Hi Sam. Thanks for the updates on this for me. Much appreciated.

Well beside the missing dash in the key code, it seems that CNAMES setup using s2-file-downloads does work but something like this ford36.site.com does not.

Interesting. Hmm, I'll test that sub-domain on my end before the next update. I was not aware that CloudFront had any restrictions on numerics in a sub-domain, but I'll test again to see what might be causing a problem.

Working on iPad, iPhone, Android, Safari, Chrome, FireFox
Not working on IE9
Not tested on Windows Mobile
Will post more data when Available

Can I see the JW Player code snippet that you're using please? I got JW Player to work in IE9, but maybe there is something I'm missing.

Is there any expiration date to the policy generated by S3&Cloudfront. Not using s2member file download key
(not sure if the download key needed in this situation - no effects on the link generated by S3$Cloudfront policy unless i am missing something)

Code: Select all

    http://s2-file-downloads.site.com/video.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cDovL3MyLWZpbGUtZG93bmxvYWRzLm9ubGluZWFyYWJpY21vdmllcy5uZXQvY29kZV8zNl9tb2JpLm1wNCsfhhgjRpdGlvbiI6eyJJcEFkZHJlc3MiOnsiQVdTOlNvdXJjZUlwIjoiNzYuOTMuMTcuMjM1LzMyIn0sIkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxMzE3NDAxNjc3fX19XX0_&Signature=gS5DuWtcz0wn-T3OYyXHpHm4sGtqonx4uNf~MlhhyEp12rL85HVJIVhjyutw4DrJCCUcYQ5EkQVS4K10xKk3Wr8fCB8D4DI293aTqFw3zp0Uy9WUdJQ79lEs1Oq4oE3cVUHHuvm6LfSbiO18VxLsMCVrwbQykCS57r1SHhpcI2I_&Key-Pair-Id=APKAJMYQ54GHSTY7ESAEQ

Yes, the resulting CloudFront link expires in 24 hours. s2Member can safely allow 24 hours in CloudFront links, because the Policy also ties the link to a specific IP address; thereby preventing any possibility of link sharing.

[drbyte]

Hi Jason

Thank you...Yes the JW Player works fine in IE9. I was referring to the video tags. But I am suspecting that it has to do something with IE. Other than that, works fine using video tags and JWplayer in all

Thank you again..Fantastic work.

Sam

[Jason Caldwell]

Ah, OK. Thanks Sam.
I'll continue to look into this. You've probably seen this, but just in case:
http://www.longtailvideo.com/support/jw ... l5-support

[drbyte]

Hi Jason

There is a problem with S3&Cloud serving the same file within short periods. It player fine the first time but if the same file get requested, lets say by the iPhone, is shows an error "stream not found"

Then when I go back to the screen where it was working and refresh the page it will not play and will give you the same error above "stream not found"

I tried that so many times and getting the same results

Note: Different user logins (meaning as an admin from a PC and a paid user form an iPhone)

Can you please verify and let me know

Sam

[Jason Caldwell]

Thank you Sam. I believe we have this issue fixed in the development copy, coming in public release tomorrow. Here is an excerpt from the changelog regarding this issue.

* (s2Member/s2Member Pro) **Compatibility**. Improvements to s2Member's JW Player® integration. s2Member now prevents `unreserved chars`, i.e. `array ("-", ".", "_", "~")` from being URL-encoded in file download URLs, maximizing compatibility with many media players, including JW Player®. In previous releases, JW Player® would randomly fail on some RTMP streams with error `Stream Not Found`. Fixed in this release. For further details, see [RFC 3896](http://www.faqs.org/rfcs/rfc3986.html).

[drbyte]

Thanks Jason

I have a question

Is it possible to insert a custom field value into this <?php $cfg = array ("file_download" => "video.mp4", "url_to_storage_source" => true, "count_against_user" => true); ?>

The video.mp4 will be replaced to whatever the custom filed have.

The idea of this is to use a custom field to populate the movie player instead of having to hard code the whole JW Player code into each post.

For example: post 1234 have a custom filed name movie and the value is sam.mp4. When published the video.mp4 in the original code above will be replaced by sam.mp4

Thank You

Sam

[Jason Caldwell]

Thanks Sam. You might take a look at this plugin. You can probably wrap this up inside a PHP code snippet, and then re-use that code snippet with the help of this plugin: http://wordpress.org/extend/plugins/shortcode-exec-php/ To get the custom field associated with your Page/Post, see: http://codex.wordpress.org/Function_Ref ... _post_meta